Use next-seo package for current SEO meta data

desko27 · desko27 · commit 0acff8aee9d6 · 2020-03-04T20:54:49.000+01:00
diff --git a/components/seo/CommonMetaTags/index.js b/components/seo/CommonMetaTags/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Head from 'next/head'
 import { useRouter } from 'next/router'
+import { NextSeo } from 'next-seo'
 
 const siteData = {
   siteTitle: 'Smash Tier List',
@@ -15,32 +15,30 @@ const CommonMetaTags = ({ title, description: descriptionProp }) => {
   const description = descriptionProp || siteData.metaDescription
 
   return (
-    <Head>
-      <title>{title}</title>
-      <meta name='description' content={description} />
-
-      <meta property='og:title' content={title} />
-      <meta property='og:url' content={`${siteData.siteRoot}${pathname}`} />
-      <meta property='og:description' content={description} />
-      <meta property='og:type' content='website' />
-      <meta property='og:image' content={`${siteData.siteRoot}/apple-touch-icon.png`} />
-      <meta property='og:site_name' content={siteData.siteTitle} />
-
-      <meta name='twitter:title' content={title} />
-      <meta name='twitter:url' content={`${siteData.siteRoot}${pathname}`} />
-      <meta name='twitter:card' content='app' />
-      <meta name='twitter:site' content='desko27' />
-      <meta name='twitter:creator' content='desko27' />
-      <meta name='twitter:description' content={description} />
-      <meta name='twitter:image' content={`${siteData.siteRoot}/apple-touch-icon.png`} />
-
-      <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' />
-      <link rel='manifest' href='/site.webmanifest' />
-      <link rel='mask-icon' href='/safari-pinned-tab.svg' color='#5bbad5' />
-      <meta name='msapplication-TileColor' content='#da532c' />
-    </Head>
+    <>
+      <NextSeo
+        title={title}
+        description={description}
+        canonical='https://www.canonical.ie/'
+        openGraph={{
+          url: `${siteData.siteRoot}${pathname}`,
+          title,
+          description,
+          images: [{
+            url: `${siteData.siteRoot}/apple-touch-icon.png`,
+            width: 180,
+            height: 180,
+            alt: siteData.siteTitle
+          }],
+          site_name: siteData.siteTitle
+        }}
+        twitter={{
+          handle: '@handle',
+          site: '@site',
+          cardType: 'summary_large_image'
+        }}
+      />
+    </>
   )
 }
 
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "glob": "^7.1.6",
     "intersection-observer": "^0.7.0",
     "next": "^9.2.1",
+    "next-seo": "^4.4.0",
     "preact": "^10.2.1",
     "preact-render-to-string": "^5.1.4",
     "react": "github:preact-compat/react#1.0.0",
diff --git a/pages/_app.js b/pages/_app.js
@@ -11,6 +11,13 @@ function CustomApp ({ Component, pageProps }) {
       <Head>
         <meta name='viewport' content='width=device-width, initial-scale=0.9, user-scalable=no' />
         <meta name='theme-color' content='#000000' />
+
+        <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' />
+        <link rel='manifest' href='/site.webmanifest' />
+        <link rel='mask-icon' href='/safari-pinned-tab.svg' color='#5bbad5' />
+        <meta name='msapplication-TileColor' content='#da532c' />
       </Head>
       <Component {...pageProps} />
     </DomainContext.Provider>
