Update Head with additional metadata - Githubissues

HidemichiShimura / old-portfolio

My personal portfolio website

https://hidemichi-shimura.vercel.app/

0 stars 0 forks source link

Update Head with additional metadata #58

Closed HidemichiShimura closed 1 year ago

HidemichiShimura commented 1 year ago

Proposed Changes

This PR brings additional metadata to the Head

Code changes

Created the CustomHead component in src/meta
Added necessary constants for CustomHead in src/constants/index.js
Added CustomHead to the entry point
Embedded CustomHead in pages/_app.js

Issues affected

Closes #52

Additional Info

CustomHead is embedded in _app.js instead of _document.js to avoid the errors below.
- should not be used in _document.js's <Head></a> </li> <li><a rel="noreferrer nofollow" target="_blank" href="https://nextjs.org/docs/messages/no-document-viewport-meta">Viewport meta tags should not be used in _document.js's <Head></a></li> </ul></li> </ul> <h2>Screenshots and/or video</h2> <img width="1034" alt="metadata-screenshot" src="https://user-images.githubusercontent.com/110521018/224427812-1a98befc-c941-4b99-81ae-2340c0927ae0.png"> <h2>Testing Plan</h2> <ul> <li>Check with the google developer tools if all the metadata is properly embedded</li> </ul> <h2>Checklist</h2> <h4>Basics</h4> <ul> <li>[x] Local QA is complete</li> <li>[x] No debugging <code>console.log()</code> statements</li> <li>[x] Commented-out code removed</li> <li>[x] Unused code removed (imports, functions, styles, etc - if it's not used anywhere, it's not in this PR)</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/vercel[bot]"><img src="https://avatars.githubusercontent.com/in/8329?v=4" />vercel[bot]</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p><strong>The latest updates on your projects</strong>. Learn more about <a href="https://vercel.link/github-learn-more">Vercel for Git ↗︎</a></p> <table> <thead> <tr> <th style="text-align: left;">Name</th> <th style="text-align: left;">Status</th> <th style="text-align: left;">Preview</th> <th style="text-align: left;">Updated</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;"><strong>portfolio</strong></td> <td style="text-align: left;">✅ Ready (<a href="https://vercel.com/hidemichishimura/portfolio/DNmYtqw6FSxjbiXEx7N9PzSjvTZt">Inspect</a>)</td> <td style="text-align: left;"><a href="https://portfolio-git-update-head-hidemichishimura.vercel.app">Visit Preview</a></td> <td style="text-align: left;">Mar 10, 2023 at 9:09PM (UTC)</td> </tr> </tbody> </table> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>