SNSシェアを想定してOGPを設定しました。

## はじめに
<strong>「OGP」</strong>とは(Open Graph Protcol)の略で、SNSでページがシェアされる際に、シェアしたコンテンツの視認性を向上させるものです。例えばネットで検索した記事をSNSでシェアしようとすると、画像と説明付きのリンクとなって投稿画面下部に出てきますよね？アレです。ではそのアレをNext.jsプロジェクトで設定してみましょう。

## Next.jsプロジェクトで設定
### next/headを利用
OGP設定を施すには`<head>`タグ内に`<meta>`タグを作成し記述していきますが、Next.jsにおいては`<Head>`コンポーネントを使用します。通常の`<head>`タグでは静的な値しか扱えない一方で、<strong>`<Head>`コンポーネントを使うことで動的に値を設定可能なためページ別に設定する情報（URL、ページタイトル）を変更することができます。</strong>この`<Head>`コンポーネントですが、より再利用しやすい形にするために、Next.jsプロジェクト内の`components`ディレクトリで設定していきましょう。今回は`components`ディレクトリ内で`SEO.js`というファイルを作成し、ここに`<Head>`コンポーネントを記述していきます。

<script src="https://gitlab.com/-/snippets/3602059.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1) <code>&lt;Head&gt;</code>コンポーネントはNext.jsで標準で提供されているものですので、(l.1) の通りインポートしておきます。</li>
<li>(l.3) URL、ページのタイトル、ページの説明の3つをページ毎に動的に変更して設定させたいので、この<code>&lt;SEO&gt;</code>コンポーネントを呼び出した先でurl, title, descriptionというプロパティを受け取れるようにします。</li>
<li>(l.5) <code>&lt;Head&gt;</code>コンポーネントで全体を囲います。この中で (l.6) 以降で<code>&lt;meta&gt;</code>タグを設定していきます。<code>&lt;meta&gt;</code>タグはWebページにおけるメタ情報を記載するもので、Webページ上には表示されませんがChromeでは「検証ツール」から確認できます。</li>
<li>(l.6-8) <code>&lt;meta&gt;</code>タグの中でも<code>property</code>を持つものを設定していきます。<code>property</code>はFacebookやLINE等のソーシャルメディア共通で使用できるOGP情報です。※ただし、X（旧：Twitter）は通常<code>name</code>で設定されます。
<ul>
   <li>(l.6) <code>og:site_name</code>：Webサイトの名前を設定。</li>
   <li>(l.7) <code>og:url</code>：WebサイトのURLを設定。</li>
   <li>(l.8) <code>og:image</code>：Webサイトの画像を設定。</li>
</ul></li>
<li>(l.9-12) <code>&lt;meta&gt;</code>タグの中でも<code>name</code>を持つものを設定していきます。<code>name</code>は（X（旧：Twitter）情報を除いて）通常はページ間で共通の情報が設定されます。ここではX（旧：Twitter）向けの設定をしていきましょう。
<ul>
   <li>(l.9) <code>twitter:title</code>：X（旧：Twitter）表示用のタイトルを設定。</li>
   <li>(l.10) <code>twitter:site</code>：X（旧：Twitter）表示用のアカウント名を設定。</li>
   <li>(l.11) <code>twitter:card</code>：X（旧：Twitter）表示用のカードの種類を設定。※ここではX（旧：Twitter）で投稿される際の画像掲載形式を選択できます。通常<code>summary</code>もしくは<code>summary_large_image</code>を使用します。</li>
   <li>(l.12) <code>twitter:description</code>：X（旧：Twitter）表示用の説明文を設定。</li>
</ul></li>
</ol>
</details>

これで`<Head>`コンポーネントの基本設定が完了しました。しかしこれを作っただけではシェアされる時に表示されないので、実際のページ側で呼び出してあげる必要があります。

### ページ側設定（index.js）
前述の`<Head>`コンポーネントをページ側で呼び出しましょう。

<script src="https://gitlab.com/-/snippets/3602063.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1) 上で作ったSEOコンポーネント内に<code>&lt;Head&gt;</code>コンポーネントがあるので、最初に呼び出します。</li>
<li>(l.3) （※省略してありますが）APIサーバを呼び出して<code>n</code>という<code>props</code>を持つ<code>Sample</code>というページコンポーネントを作ります。<code>n</code>には<code>title</code>, <code>url</code>, <code>description</code>があるものとします。</li>
<li>(l.5-9) return内で<code>SEO</code>という名の<code>&lt;Head&gt;</code>コンポーネントを呼び出します。<code>&lt;Head&gt;</code>コンポーネントでは<code>title</code>, <code>url</code>, <code>description</code>の3つのプロパティを動的に受け取れるようにしているため、<code>{n.~}</code>の形式でそれぞれ値を取得して、各プロパティに入れていきます。</li>
<li>(l.10-16) 通常のページ部分が下に続きますが、ここは省略します。</li>
</ol>
</details>

これで、設定は完了です。

## 実装結果確認
ここまで完了したら実際に設定できているか確認してみましょう。ここでは2つの方法を紹介します。

### 1.Chromeの「検証ツール」を確認
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/ogp-settings1_souphe"/>

Chromeを使っている場合、「検証ツール」を開いてみましょう。上の画像のように`Elements`を覗いてみると、`<head>`タグがあることが分かると思います。この中に、上で設定したように<meta>タグがあることが分かると思いますが、問題なく実装できていれば、動的に変化する3つのプロパティである`title`, `url`, `description`に、ページ固有の値が入っているはずです。

### 2.確認ツール
今回はX（旧：Twitter）についても設定しました。実際にX（旧：Twitter）に何かURLを貼り付け投稿してみても良いですが、もし本番環境にホスティングできている場合は公式の[Card Validator](https://cards-dev.twitter.com/validator)があるのでこちらを使っても良いと思います。またFacebookで確認したい場合は[シェアデバッガー](https://developers.facebook.com/tools/debug/)というツールも同様に利用できます。いずれも作成したページのURLを貼り付けるだけで、OGPのプレビューが表示されるはずです。

## まとめ
今回はOGPについて設定しました。Next.jsであれば`<Head>`コンポーネントを使うと簡単に実装できるので、SEO対策のためにも試してみると良いかもですね。