基本 2023-09-23

もっと見てもらうためのOGP設定forSEO対策

Language：

JavaScript

Framework/Library：

React Next.js

Technology：

OGP SEO対策

Platform/Tool：

記事一覧へ

はじめに

「OGP」とは(Open Graph Protcol)の略で、SNSでページがシェアされる際に、シェアしたコンテンツの視認性を向上させるものです。例えばネットで検索した記事をSNSでシェアしようとすると、画像と説明付きのリンクとなって投稿画面下部に出てきますよね？アレです。ではそのアレをNext.jsプロジェクトで設定してみましょう。

Next.jsプロジェクトで設定

next/headを利用

OGP設定を施すには<head>タグ内に<meta>タグを作成し記述していきますが、Next.jsにおいては<Head>コンポーネントを使用します。通常の<head>タグでは静的な値しか扱えない一方で、<Head>コンポーネントを使うことで動的に値を設定可能なためページ別に設定する情報（URL、ページタイトル）を変更することができます。この<Head>コンポーネントですが、より再利用しやすい形にするために、Next.jsプロジェクト内のcomponentsディレクトリで設定していきましょう。今回はcomponentsディレクトリ内でSEO.jsというファイルを作成し、ここに<Head>コンポーネントを記述していきます。

「一行解説」を見る

(l.1) <Head>コンポーネントはNext.jsで標準で提供されているものですので、(l.1) の通りインポートしておきます。
(l.3) URL、ページのタイトル、ページの説明の3つをページ毎に動的に変更して設定させたいので、この<SEO>コンポーネントを呼び出した先でurl, title, descriptionというプロパティを受け取れるようにします。
(l.5) <Head>コンポーネントで全体を囲います。この中で (l.6) 以降で<meta>タグを設定していきます。<meta>タグはWebページにおけるメタ情報を記載するもので、Webページ上には表示されませんがChromeでは「検証ツール」から確認できます。
(l.6-8) <meta>タグの中でもpropertyを持つものを設定していきます。propertyはFacebookやLINE等のソーシャルメディア共通で使用できるOGP情報です。※ただし、X（旧：Twitter）は通常nameで設定されます。
- (l.6) og:site_name：Webサイトの名前を設定。
- (l.7) og:url：WebサイトのURLを設定。
- (l.8) og:image：Webサイトの画像を設定。
(l.9-12) <meta>タグの中でもnameを持つものを設定していきます。nameは（X（旧：Twitter）情報を除いて）通常はページ間で共通の情報が設定されます。ここではX（旧：Twitter）向けの設定をしていきましょう。
- (l.9) twitter:title：X（旧：Twitter）表示用のタイトルを設定。
- (l.10) twitter:site：X（旧：Twitter）表示用のアカウント名を設定。
- (l.11) twitter:card：X（旧：Twitter）表示用のカードの種類を設定。※ここではX（旧：Twitter）で投稿される際の画像掲載形式を選択できます。通常summaryもしくはsummary_large_imageを使用します。
- (l.12) twitter:description：X（旧：Twitter）表示用の説明文を設定。

これで<Head>コンポーネントの基本設定が完了しました。しかしこれを作っただけではシェアされる時に表示されないので、実際のページ側で呼び出してあげる必要があります。

ページ側設定（index.js）

前述の<Head>コンポーネントをページ側で呼び出しましょう。

「一行解説」を見る

(l.1) 上で作ったSEOコンポーネント内に<Head>コンポーネントがあるので、最初に呼び出します。
(l.3) （※省略してありますが）APIサーバを呼び出してnというpropsを持つSampleというページコンポーネントを作ります。nにはtitle, url, descriptionがあるものとします。
(l.5-9) return内でSEOという名の<Head>コンポーネントを呼び出します。<Head>コンポーネントではtitle, url, descriptionの3つのプロパティを動的に受け取れるようにしているため、{n.~}の形式でそれぞれ値を取得して、各プロパティに入れていきます。
(l.10-16) 通常のページ部分が下に続きますが、ここは省略します。

これで、設定は完了です。

実装結果確認

ここまで完了したら実際に設定できているか確認してみましょう。ここでは2つの方法を紹介します。

1.Chromeの「検証ツール」を確認

Chromeを使っている場合、「検証ツール」を開いてみましょう。上の画像のようにElementsを覗いてみると、<head>タグがあることが分かると思います。この中に、上で設定したようにタグがあることが分かると思いますが、問題なく実装できていれば、動的に変化する3つのプロパティであるtitle, url, descriptionに、ページ固有の値が入っているはずです。

2.確認ツール

今回はX（旧：Twitter）についても設定しました。実際にX（旧：Twitter）に何かURLを貼り付け投稿してみても良いですが、もし本番環境にホスティングできている場合は公式のCard Validatorがあるのでこちらを使っても良いと思います。またFacebookで確認したい場合はシェアデバッガーというツールも同様に利用できます。いずれも作成したページのURLを貼り付けるだけで、OGPのプレビューが表示されるはずです。

まとめ

今回はOGPについて設定しました。Next.jsであれば<Head>コンポーネントを使うと簡単に実装できるので、SEO対策のためにも試してみると良いかもですね。