この記事を読んだ後に理解できること

ogpの役割
Next.jsでogpを設定する方法

ogpとは

SNSでシェアした際にWebページのタイトルや概要等の情報を見やすい形でユーザに届けることができます。

SNSでの拡散はユーザへの訴求として有効な手段となるので、最近のWeb開発でogpを設置することは必須となっています。

例：LINE

例: Twitter

ちなみにogpが適切に設定されていないとリンクだけの表示になってしまいます。

ユーザとしては、そのWebサイトの情報が視覚的に確認できるものがないとそのリンクを開きづらいですよね。

Next.jsでogpを設定する

ogpを宣言する

Next.jsアプリケーションのpages配下に _document.tsx を作成しましょう。

このファイルでは、全ページで使いたい設定をすることができます。

ここの <Html> タグの中に prefix=og:http://ogp.me/ns# を設定することで、ogpを使うことの宣言をすることができます。

import { Html, Head, Main, NextScript } from 'next/document'


export default function Document() {
  return (
    <Html lang="ja" prefix="og: http://ogp.me/ns#">
      <Head />
      <body className='bg-gradient-to-r from-cyan-100 to-sky-100'>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

metaタグの中にogpに関する設定をする

ogpは、metaタグの中で設定します。<Head>の情報は使い回すことが想定されるので、コンポーネント化しています。

import Head from "next/head"

type Props = {
  title: string
  description: string
  url: string
  type: string
  imageUrl: string
}

const CommonMeta = (props: Props) => {
  const { title, description, url, type, imageUrl } = props
  return (
    <Head>
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={url} />
      <meta property="og:site_name" content={title} />
      <meta property="og:type" content={type} />
      <meta property="og:image" content={imageUrl} />
    </Head>
  )
}
export default CommonMeta

ここからは上記に記載されているogpに関する設定で主要なものについての解説をします。

meta name="twitter:card" content="summary_large_image"

twitterでの表示方法をここで指定します。summarylargeimageはtweetの画面幅いっぱいに要素が拡大してくれるので、画像での訴求力が高まります。

ユーザは画像を見て、そのWebサイトがどんなものかを判断することが多いので、画像にも情報をのせておくと拡散力が高まります。

meta property="og:title" content={title} />

Webサイトのタイトルを設定することができます。画像の赤枠がtitleに該当します。

meta property="og:description" content={description}

Webサイトの概要について記載することができます。画像赤枠がdescriptionに該当します。

meta property="og:image" content={imageUrl}

カード上部の画像を指定することができる。画像の赤枠がog:imageに該当します。なお、注意点が2点あります。

contentの中身は相対パスではなく、絶対パスで書かれている必要がある。
- content="/image.png" NG
- content="https://dev-harry-next.com/image.png" OK
拡張子がsvgの画像ファイルは指定できない

Next.jsでアプリケーション内に配置した画像をog:imageとして使用したい場合は、public配下に画像を配置し、https://{ドメイン名}/{public配下に配置した画像名} でurlを指定することができます。

さいごに

今回はogpの設定方法について解説しました。Webを公開するにあたってogpの設定は必須レベルになっています。

この解説記事のようにHeadに関する設定をコンポーネント化しておくことで動的にogpを設定することができ、訴求力も高まります。

参考にしてみてください。

次回は、サイトマップの生成方法について解説します。

Next.jsのSEO対策でogpを設定する

目次