8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

localhost環境でOGPを確認する Facebook, Xに未ログイン可

Posted at

はじめに

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」と出るので、そのままクリックしてください。
スクリーンショット 2023-12-19 21.44.11.png

URLが生成されるので、コピーしてください。
スクリーンショット 2023-12-19 21.44.21.png

一括で確認

使用するサイト

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

  • ラッコツールズ

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

実践

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

スクリーンショット 2023-12-19 21.54.40.png

スクリーンショット 2023-12-19 21.52.25.png

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

最後に

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

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?