SEO

Adding SEO using a wrapper container

Date: 2021-10-19

Use this wrapper Container component in the HOC

import Head from 'next/head';
import { useRouter } from 'next/router';

import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';

function Container(props) {
  const { children, ...customMeta } = props;
  const router = useRouter();

  const meta = {
    title: 'Title ...',
    description: 'Summary ...',
    image: 'Page image ...',
    type: 'website',
    ...customMeta,
  };

  return (
    <>
      <Head>
        <title>{meta.title}</title>
        <meta name='robots' content='follow, index' />
        <meta content={meta.description} name='description' />
        <meta property='og:url' content={`Base url ... ${router.asPath}`} />
        <link rel='canonical' href={`Base url ... ${router.asPath}`} />
        <meta property='og:type' content={meta.type} />
        <meta property='og:site_name' content='Learn NextJS' />
        <meta property='og:description' content={meta.description} />
        <meta property='og:title' content={meta.title} />
        <meta property='og:image' content={meta.image} />
        <meta name='twitter:card' content='summary_large_image' />
        <meta name='twitter:site' content='@learnnextjs' />
        <meta name='twitter:title' content={meta.title} />
        <meta name='twitter.description' content={meta.description} />
        <meta name='twitter:image' content={meta.image} />
        {meta.data && <meta property='article:published_time' content={meta.date} />}
      </Head>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  );
}

export default Container;

Usage in a Dynamic route

import { useMemo } from 'react';
import { getFiles, getFileBySlug } from '@/lib/mdx';
import MDXComponent from '@/components/MDXComponents';
import BlogLayout from '@/layouts/Blog';
import { getMDXComponent } from 'mdx-bundler/client';

export default function BlogSlug({ code, frontMatter }) {
  const Component = useMemo(() => getMDXComponent(code), [code]);

  return (
    <BlogLayout matter={frontMatter}>
      <Component components={{ ...MDXComponent }} />
    </BlogLayout>
  );
}

export async function getStaticPaths() {
  const posts = await getFiles('posts');

  return {
    paths: posts.map((p) => ({
      params: { slug: p.replace(/\.mdx/, '') },
    })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const post = await getFileBySlug(params.slug, 'posts');

  return { props: { ...post } };
}

Edit this page