【Next.js】Next.js製サイトでSEO対策をする

Copy
npm install next-seo

Copy
yarn add next-seo

Copy
export default {
  titleTemplate: '%s | サイト名',
  defaultTitle: 'タイトル',
  additionalMetaTags: [
    {
      property: 'dc:creator',
      content: '運営者名',
    },
    {
      name: 'application-name',
      content: 'サイト名',
    },
  ],
  openGraph: {
    url: 'https://hogehoge.com/',
    type: 'website',
    locale: 'ja_JP',
    site_name: 'サイト名',
  },
//   twitter: {
//     handle: '@hogehoge',
//     site: '@fugafuga',
//     cardType: 'summary_large_image',
//   },
};

Copy
import { AppProps } from "next/app";
import PropTypes from "prop-types";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { CacheProvider, EmotionCache, Global, css } from "@emotion/react";
import theme from "@/theme";
import createEmotionCache from "@/createEmotionCache";
import { Layout } from "@/components/layouts/layouts";

import { MDXProvider } from "@mdx-js/react";
import { MDXComponent } from "@/components/MDXcomponent/MDXComponent";
import { DefaultSeo } from "next-seo";
import SEO from "../../next-seo.config";

const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}

function MyApp(props: MyAppProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

  return (
    <CacheProvider value={emotionCache}>
      <DefaultSeo {...SEO} />
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Global
          styles={css`
            html,
            body {
              margin: 0px;
              font-family: "Noto Sans JP", Roboto, sans-serif;
            }
            &::-webkit-scrollbar {
              width: 10px;
            }
            &::-webkit-scrollbar-track {
              background-color: #e4e4e4;
              border-radius: 100px;
            }
            &::-webkit-scrollbar-thumb {
              background-color: #454a96aa;
              border-radius: 100px;
            }
          `}
        />

        <Layout>
          <MDXProvider components={MDXComponent}>
            <Component {...pageProps} />
          </MDXProvider>
        </Layout>
      </ThemeProvider>
    </CacheProvider>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  emotionCache: PropTypes.object,
  pageProps: PropTypes.object.isRequired,
};

export default MyApp;

Copy
import { NextSeo } from "next-seo";

~
  return (
    <>
      <NextSeo
        title="xxxxxx"
        description="xxxxxxxxxxxxxxxxx"
      />
    ~
    </>