ウェブサイト検索

WordPress に Open Graph と Twitter カードをセットアップする方法

優れたコンテンツはウェブサイトに関連性の高い視聴者を惹きつけるため、そうしたユーザーの中にはソーシャル メディアでコンテンツを共有したいと考える人もいる可能性が高くなります。ただし、共有コンテンツがソーシャル ストリーム上で適切に表示されない場合に問題が発生することがあります。この場合、Open Graph タグを使用すると役立ちます。

Open Graph を使用すると、ソーシャル チャネル経由で共有するときのコンテンツのタイトル、画像、説明などの外観を制御できます。おそらく、タイトル タグや説明タグなどの一般的なメタ タグについてはすでにご存知かと思います。しかし、多くのブロガーは、Google+、Facebook、Twitter、Pinterest などのソーシャル ネットワーキング サイトに固有のメタ タグが他にもあることを知りません。これらのソーシャル ネットワーキング サイトがメタデータを使用し始めた理由は、関連する画像、説明、リンクとともにコンテンツを適切に表示するためです。これらのメタ タグを定義すると、コンテンツをソーシャル メディアで共有しやすく、一目で理解できるようになります。

各ソーシャル ネットワーク サイトには異なる好みがあります。 Pinterest と Google+ は Schema タグを優先しますが、Facebook、Google+、Pinterest が優先する Open Graph Protocol タグもサポートしています。

Open Graph タグは、Web ページの <head></head> セクションの間に配置されます。最も一般的に使用されるタグは次のとおりです。

    

  • og:title
    • 

  • og:description
    • 

  • og:url
    • 

  • og:site_name
    • 

  • og:image
    • 

  • og:type
    •

これらはおそらくあまり意味をなさないので、Open Graph タグが明確にラベル付けされたソーシャル共有の図をいくつか示します。

Pinterest リッチピンの例

Google+1 共有の例

Facebook オープン グラフの例

Twitter カードの例

さらに、Twitter は Twitter カードとして知られる独自のカスタム タグを定義しています。これらのタグを使用すると、ツイートされるたびにリンクで詳細情報を表示できるようになります。 Open Graph タグと同様に、Twitter カード タグも Web ページの <head></head> セクションの間に配置されます。最も一般的に使用される Twitter タグは次のとおりです。

  • ツイッター:カード
  • ツイッター:サイト
  • ツイッター：クリエイター

Open Graph タグと Twitter Card タグを手動で追加することもできますが、初心者ユーザーでも WordPress の投稿やページにタグを簡単に追加できるプラグインが WordPress.org で多数提供されています。私たちのお気に入りのいくつかは次のとおりです。

  1. YoastによるSEO
  2. Facebook、Google+、Twitter カード タグのオープン グラフ
  3. SEO フレームワーク
  4. JM Twitterカード（Twitterカードのみ）
  5. Open Graph プロトコル フレームワーク (Open Graph タグのみ、開発者に推奨)

このチュートリアルでは、Yoast SEO プラグインの組み込みオプションを使用して特別なメタ タグを定義し、投稿をリッチメディア対応にします。

注: 同様の機能を持つプラグインは 1 つだけ使用してください。 Yoast の WordPress SEO がすでにインストールされている場合は、Open Graph for Facebook、Google+、Twitter Card Tags プラグインもインストールするよりも、そのプラグインを設定する方が良いでしょう。

ステップ 1: 最新バージョンの Yoast SEO をインストールする

最新バージョンの Yoast SEO をインストールすることをお勧めします。これを行う最も簡単な方法は、WordPress 管理者ダッシュボードのプラグイン > 新規追加から「Yoast SEO」を検索することです。

次に、プラグインをインストールして有効化します (ボタンをクリックするだけです)。

有効にすると、WordPress 管理ダッシュボードに新しい「SEO」タブが表示されます。 Yoast SEO には素晴らしい機能 (パンくずリスト、リダイレクトなど) がたくさんありますが、今日私たちが興味があるのはソーシャル タブです。

ステップ 2: ソーシャル設定を構成する

Open Graph カードと Twitter カードを設定するには、WordPress 管理者ダッシュボードからSEO > ソーシャルに移動します。まず、ここにソーシャル プロフィール リンクを追加して、検索エンジンが実際にサイトに接続していることを検証できるようにします。次に、さまざまなソーシャル タブに進みます。

フェイスブック

最初のステップは、Facebook 投稿の Open Graph メタデータを有効にすることです。有効 オプションをクリックするだけです。サイトに関連する Facebook ページを [アカウント] タブにすでに追加していると仮定すると、準備は完了です。必要に応じて、特集メディアのないページにデフォルトの画像を追加できますが、それはあなた次第です。

ツイッター

Facebook が終わったら、次は Twitter に取り組みましょう。 Twitter カードのメタデータが有効になっていることを確認してから、デフォルトのカード レイアウト (概要または大きな画像を含む概要) を選択してください。繰り返しますが、これは [アカウント] ページに追加した Twitter ハンドルに関連付けられます。

ピンタレスト

Pinterest は少し異なります。このプラットフォームではメタ タグ検証が使用されます。 Pinterest アカウントに移動し、ユーザー アイコンにカーソルを合わせて、[設定] タブをクリックします。 [Web サイトを申請] オプションをクリックし、[HTML タグを追加] オプションを選択します。

生成されたメタタグをコピーし、Yoast SEO パネルに貼り付けます。変更を保存し、Pinterest に戻って送信します。これにより、Pinterest はタグをチェックしてサイトを検証するように指示されます。 Pinterest については以上です。

Google+

設定する必要がある最後のソーシャル アカウントは Google+ です。これはあなたのビジネスの Google+ ページへのリンクにすぎません。それを貼り付ければ準備完了です。

デフォルトの設定

最後のステップは、デフォルトを作成することです。 Yoast はコンテンツのメタ ボックスを使用して Open Graph データを定義します。そのため、必ずSEO > 検索外観 > コンテンツ タイプでデフォルトを編集してください。 Yoast SEO の組み込みスニペット変数を使用して、投稿タイトル (og:title に使用) とメタ ディスクリプション (og:description に使用) の独自の動的なデフォルトを構築します。

カスタム画像、タイトル、説明

Yoast SEO には、Facebook や Twitter で使用される画像、タイトル、説明をカスタマイズするための個々の投稿のオプションも含まれています。投稿を編集するときは、Yoast SEO セクションまで下にスクロールし、共有アイコン（< 未満の記号のように見えます）をクリックするだけです。次に、必要に応じてカスタム画像をアップロードするか、タイトルと説明を編集します。

デバッグと検証

主要なソーシャル ネットワーキング サイトにはそれぞれ、ソーシャル メディアで共有されたときにリンクがどのように表示されるかをテストおよびプレビューするための独自のバリデーターまたはデバッガーがあります。

Google 構造化データ テスト ツール: このツールでは、Google+ で共有された投稿のプレビューは表示されませんが、どのメタデータが存在し、Google で読み取り可能であるかが表示されます。プロパティは RDFA ノードのプロパティの下に表示されます。

Facebook デバッグ: Open Graph タグを実装した後、タグを含むサイトの URL を貼り付けるだけです。オブジェクトのプロパティが表示されます。

Twitter 検証ツール: このリンクを使用すると、ソーシャル メディアで共有される前に投稿の Twitter カードをプレビューできます。

Pinterest リッチ ピン バリデータ: 最後の 2 つのバリデータと同様に、プレビューする Open Graph タグを含む URL を入力するだけで、コンテンツが正しく表示されていることを確認できます。チュートリアル全体に従った場合は、まったく問題ありません。

最後のメモ

これらの Open Graph メタ タグを使用すると、コンテンツのタイトル、画像、説明、その他の詳細がソーシャル メディア上で表示される方法を最適化できます。明確な情報を含むリンクはより多くのシェアと自然なリンクを獲得する傾向があるため、これはソーシャル サイトからのトラフィックの増加に役立ちます。また、ユーザーは、裸の URL や短い URL をクリックするよりも、より多くの情報が含まれるリンクを信頼する傾向があります（ソーシャル共有を自動化する技術を使用している場合にも役立ちます）。

私たちのガイドがサイトの Open Graph メタ タグと Twitter カードの設定に役立つことを願っていますが、ご質問がある場合はお気軽にお問い合わせください。できれば喜んでお手伝いさせていただきます！

これらのメタタグを実装するためにどの WordPress プラグインを使用しますか?他に追加するヒントやコツはありますか?以下のコメント欄にお気軽にご意見をお寄せください。