Improve head meta

yuhaofe · Sep 26, 2021 · 340053c · 340053c
1 parent 13bf0ab
commit 340053c
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 22 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -1,10 +1,25 @@
+import Head from 'next/head'
 import Header from './header'
 import Footer from './footer'
 import styles from '../styles/Layout.module.css'
 
 export default function Layout({ children }) {
+  // https://nextjs.org/docs/api-reference/next/head
   return (
     <>
+      <Head >
+        <title>fHz | fly through the waves</title>
+        <meta name="description" content="fly through the waves" />
+        <meta property="og:title" content="fHz" key="title" />
+        <meta property="og:description" content="fly through the waves" key="description" />
+        <meta property="og:type" content="website" key="type" />
+        <meta property="og:url" content="https://flyhaozi.com/" key="url" />
+        <meta property="og:image" content="https://flyhaozi.com/banner.jpg" key="image" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+      </Head>
       <Header />
       <main className={styles.children}>{children}</main>
       <Footer />

diff --git a/pages/[project].js b/pages/[project].js
@@ -15,17 +15,11 @@ export default function Project({ source, frontMatter }) {
     return (
         <>
             <Head >
-                <title>{frontMatter.title}</title>
+                <title>{frontMatter.title + " | fHz"}</title>
                 <meta name="description" content={frontMatter.description} />
-                <meta property="og:title" content={frontMatter.title} />
-                <meta property="og:description" content={frontMatter.description} />
-                <meta property="og:type" content="website" />
-                <meta property="og:url" content={"https://flyhaozi.com/" + frontMatter.path} />
-                <meta property="og:image" content="https://flyhaozi.com/banner.jpg" />
-                <meta name="twitter:card" content="summary_large_image" />
-                <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-                <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-                <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+                <meta property="og:title" content={frontMatter.title + " | fHz"} key="title" />
+                <meta property="og:description" content={frontMatter.description} key="description" />
+                <meta property="og:url" content={"https://flyhaozi.com/" + frontMatter.path} key="url" />
             </Head>
             <div className={cstyles.top}>
                 <h1>{frontMatter.title}</h1>

diff --git a/pages/about.js b/pages/about.js
@@ -1,8 +1,14 @@
+import Head from 'next/head'
 import cstyles from '../styles/Common.module.css'
 
 export default function About() {
     return (
         <>
+            <Head >
+                <title>About | fHz</title>
+                <meta property="og:title" content="About | fHz" key="title" />
+                <meta property="og:url" content="https://flyhaozi.com/about" key="url" />
+            </Head>
             <article className={cstyles.section}>
                 <h2>About Me</h2>
                 <p>Hi, I am <em>Yuhao Feng</em>. fHz is the name I use to publish my works.</p>

diff --git a/pages/blog.js b/pages/blog.js
@@ -1,11 +1,18 @@
+import Head from 'next/head'
+import Link from 'next/link'
 import cstyles from '../styles/Common.module.css'
 
 export default function Blog() {
     return (
         <section className={cstyles.section}>
+            <Head >
+                <title>Blog | fHz</title>
+                <meta property="og:title" content="Blog | fHz" key="title" />
+                <meta property="og:url" content="https://flyhaozi.com/blog" key="url" />
+            </Head>
             <h2>Blog (Under Construction)</h2>
             <ul className={cstyles.blogList}>
-            <li><span>2021-10-01</span><a href="/blog/2021-national-day">Celebrate The 2021 National Day!!! 🎉✨</a></li>
+                <li><span>2021-10-01</span><Link href="/blog/2021-national-day"><a >Celebrate The 2021 National Day!!! 🎉✨</a></Link></li>
             </ul>
         </section>
     )

diff --git a/pages/index.js b/pages/index.js
diff --git a/pages/projects.js b/pages/projects.js
@@ -2,11 +2,17 @@ import { promises as fs } from 'fs'
 import matter from 'gray-matter'
 import path from 'path'
 import Link from 'next/link'
+import Head from 'next/head'
 import cstyles from '../styles/Common.module.css'
 
 export default function Projects({ projectInfos }) {
     return (
         <section className={cstyles.section}>
+            <Head >
+                <title>Projects | fHz</title>
+                <meta property="og:title" content="Projects | fHz" key="title" />
+                <meta property="og:url" content="https://flyhaozi.com/projects" key="url" />
+            </Head>
             <h2>Projects</h2>
             <div className={cstyles.cardContainer}>
             {