Next.jsでOGPタグを設定

Next.jsでOGPタグを設定

2023/05/06

2023/05/07

目次

Next.jsでOGPタグを設定する方法です。

next/head をインポート

headタグを設定するためにファイル上部で以下をインポートします。

import Head from 'next/head';


OGPタグの設定

以下は_document.tsxに記述する場合の例です。
全画面共有のheadタグとなります。

import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
    return (
        <Html lang="ja">
            <Head />
            <title>Tukky Tech Blog</title>
            <meta name="description" content="Jam Stackで作成したBlogです。" />
            <meta property="og:title" content="Tukky Tech Blog" />
            <meta property="og:description" content="Jam Stackで作成したBlogです。" />
            <meta property="og:type" content="website" />
            <meta property="og:url" content="" />
            <meta property="og:image" content="" />
            <meta property="og:locale" content="ja_JP" />
            <meta property="og:site_name" content="Tukky Tech Blog" />
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}


OGP (Open Graph Protocol) タグとは

OGP（Open Graph Protocol）は、ウェブページの情報を外部サービスがより適切に解析し、表示できるようにするためのメタデータを提供するプロトコルです。
Facebookが開発し、現在ではTwitterやLinkedInなど多くのプラットフォームでサポートされています。

以下のような情報が設定されることでリンクがシェアされた際、ウェブページのコンテンツがより魅力的な形で表示されるため、ユーザがコンテンツをクリックする可能性が高まります。

・タイトル (og:title)
・説明 (og:description)
・タイプ（記事、ビデオ、ウェブサイトなど） (og:type)
・URL (og:url)
・画像 (og:image)
・サイト名 (og:site_name)
・言語 (og:locale)