オープングラフのメタタグとは?
オープングラフのメタタグは、ソーシャルメディア上で共有されたときにウェブページがどのように表示されるかを制御するコードのスニペットです。これらのタグは、Facebookによって開発されたOpen Graphプロトコルの一部ですが、Twitter、Pinterest、LinkedInなどの他のソーシャルネットワークでも使用することができます。
フェイスブックは2010年、自社のプラットフォームと他のウェブサイトとの統合を強化するため、オープングラフ・プロトコルを導入した。その目的は、ソーシャル・プラットフォーム上でのウェブサイトのURL共有を簡素化し、ウェブ・プロパティをリッチでグラフィカルなオブジェクトに変換することだった。
オープングラフのメタタグはその後、TwitterやLinkedIn、WhatsAppのような人気のメッセージングアプリなど、さまざまなプラットフォームで採用されている。
必須オープングラフ・メタ・タグ
Facebookのドキュメントには、さまざまなOpen Graphメタタグの概要が記載されていますが、以下の5つは、あらゆるタイプのコンテンツに不可欠です:
- og:title:共有するページのタイトル。
- og:type:コンテンツのタイプ(例:記事、本、ビデオ)。
- og:url:共有するページの正規URL。
- og:image:誰かがウェブページを共有したときに表示される画像のURL。
- og:description:タイトルの下に表示される、コンテンツの短い説明、通常2〜4文の長さ。
なぜオープングラフのメタタグが重要なのか?
オープングラフのメタタグは、ウェブマスターがソーシャルメディアネットワークで共有されたときに、ページのタイトル、説明文、サイト名、画像がどのように表示されるかを制御できるようにするため、非常に重要です。OGタグがないと、Facebookなどのソーシャルプラットフォームは、ページのURL、タイトル、メタディスクリプションに基づいてプレビューを自動的に生成します。その結果、プレビューが長すぎたり、低品質の画像が使用されたりする可能性があります。
ソーシャルメディアネットワークは、ウェブサイトのトラフィックとコンバージョンの重要な原動力です。最適化されたOGタグは、共有リンクの外観を向上させ、より魅力的でクリックを集めやすいものにします。
オープングラフのメタタグを追加するには?
Open Graphメタタグの設定方法は、使用しているウェブサイトのプラットフォームによって異なります。ここでは、 最も人気のあるコンテンツ管理システムであるWordPressでOGタグを実装するための簡単なガイドを紹介します:
- Yoast SEOプラグインをインストールする:WordPressのダッシュボードにログインし、「プラグイン」に進み、Yoast SEOプラグインがまだインストールされていなければインストールする。
- ページエディタを開く:ページエディターまたは投稿エディターに移動します。
- Yoast SEOセクションに移動します:Yoast SEOセクション内の "Social "タブを選択します。
- オープングラフメタデータを入力します:Facebook」を選択し、そのページに必要なOpen Graphメタデータ(タイトル、説明、画像)を入力します。Yoastが自動的にURLを設定します。
ページのHTMLコードにOpen Graphメタタグを手動で実装することもできます。以下にコードの例を示します:
<meta property="og:title" content="ページのタイトルはこちら" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://yourwebsite.com/page-url/" /> <meta property="og:image" content="https://yourwebsite.com/image-url.jpg" /> <meta property="og:description" content="ページ内容の簡単な説明。" />
オープングラフのメタタグを検証する
OGメタタグを設定したら、Facebookの共有デバッガーを使って、期待通りに動作しているかチェックできる。チェックしたいURLを貼り付け、「デバッグ」を選択すると、エラーとOGタグの候補がスキャンされます。また、タイトル、画像、説明を含 むOGプロパティの概要も表示されます。
結論
オープングラフのメタタグは、ウェブページがソーシャルメディアプラットフォームで効果的に共有されるための強力なツールです。明確で簡潔、かつ視覚的に魅力的なプレビューを提供することで、エンゲージメントを高め、サイトへのトラフィックを増やすことができます。