となります。

ざっくりと説明すれば、Webページで公開しているコンテンツのクオリティを高めて、Googleで検索した時により多くの人に見てもらえるようにすることです。Googleで検索した時に検索結果の最初のページの一番上に来ているページを見る人が多いので、ここでの表示を目指すことがSEO対策をする理由となります。

metaタグとは

コンテンツの情報を表示するためのタグのことです。

上記画像は、Googleで検索した時の検索結果ですが、headタグに適切な情報を設定しているのでWebサイト名とそのサイトの概要が記載されています。

headタグに適切な情報が記載されていない場合、Webサイトの概要を検索結果から把握しづらいため、検索ユーザの訪問につなげることができません。

Next.jsでmetaタグを設定する

import Head from "next/head"

type Props = {
  title: string
  description: string
}

const CommonMeta = (props: Props) => {
  const {title, description} = props
  return (
    <Head>
      <title>{title}</title>
      <meta name="description" content={description} />
    </Head>
  )
}
export default CommonMeta

next.jsにHeadタグのcomponentが用意されているので、importします。
Headは動的な使い方ができるように、コンポーネント化しておきます。

Headタグ内にセットした<title>は、Webサイト名を表示することができます。
<meta name="description" content={description} />では、画像の「ダブルタップすると、、」から始まる概要を記載することができます。

import type { NextPage } from 'next'
import CommonMeta from "../organisms/CommonMeta"

const Home: NextPage = (props) => {
  const title = "これはWebページのタイトル"
  const description = "これはWebページの概要"
  return (
    <>
      <CommonMeta title={title} description={description} />
      <p>ホーム</p>
    </>
  )
}

export default Home

ページコンポーネントの中で呼び出し、ページに応じたtitleタグとdescriptionを設定することができます。

さいごに

Headタグ内で設定すべき事項はまだまだあります。
今回の内容だけだとSEO対策としては不十分です。
次回の記事では、ogpの設定方法について解説します。

Next.jsのSEO対策でheadタグを設定する

目次