はじめに

Open Graph Protocol（OGP）は、ウェブページがソーシャルメディアで共有される際にどのように表示されるかを定義する技術です。このプロトコルを活用することで、共有リンクのタイトル、説明、画像などを自在にコントロールできます。
これにより、ソーシャルメディア上でのクリック率やエンゲージメントを大幅に向上させることが可能です。

背景

通常、OGPの確認はウェブサイトが公開された後に行われます。
しかし、開発中のlocalhost環境では外部からアクセスできず、OGPの確認が困難です。
この問題を解決するために、開発中でもOGPを確認できる方法を紹介します。

ハンズオン

環境生成(React, Vue)

まず、ReactやVueなどのフロントエンドフレームワークを使用して、開発環境を構築します。
若干は記述しますが、「React OGP設定」や、「Vue OGP設定」と検索したほうがより詳しく設定できるかと思います。

React環境の例

プロジェクトの作成

npx create-react-app {なんでも}

OGPの設定

public/index.htmlに追記してください。

<meta property="og:title" content="サイトのタイトル" />
<meta property="og:description" content="サイトの説明" />
<meta property="og:image" content="画像のURL" />
<meta property="og:url" content="ウェブサイトのURL" />

実行

npm start

Vue環境の例

プロジェクトの作成

npm create vue@latest

OGPの設定

index.htmlに追記してください。(環境によって調整してください)

<meta property="og:title" content="サイトのタイトル" />
<meta property="og:description" content="サイトの説明" />
<meta property="og:image" content="画像のURL" />
<meta property="og:url" content="ウェブサイトのURL" />

実行

npm install
npm run dev

URL発行

使用する拡張機能

localhostではOGPを確認することはできないので、Googleの拡張機能を使い、疑似URLのようなものを生成します。

Localhost Open Graph Debugger

Localhost OGP チェッカーという有名なツールがあるのですが、生成してくれないことが多くあったので、Localhost Open Graph Debuggerというツールを使います。
各自でインストールしてください。

実践

サイト上で拡張機能を使用してください。

「Open debug page」と出るので、そのままクリックしてください。

URLが生成されるので、コピーしてください。

一括で確認

使用するサイト

X(旧Twitter)や、Facebookにてはデベロッパーツールがあり確認することができますが、ログインしていないと使うことができないので、一括で確認できるサイトを使用します。

ラッコツールズ

注意 : 開きっぱなしにしておくと確認できなくなるので、ページ更新をしてください。

実践

サイトにアクセスし、先程生成したURLを入力すると一括で確認することができます。

フリー画像がなくてXのアイコンを使っていますが、ローカルの画像でも確認できます。

最後に

OGPはソーシャルメディアでのウェブサイトの印象を大きく左右します。
開発中からこれらのタグを適切に管理し、テストすることで、公開時にスムーズなソーシャルメディア統合を実現できます。
今回紹介したツールと手順を活用して、効果的なOGP設定を行ってください。