FacebookOpenGraphおよびTwitterCardメタタグをカスタマイズする方法
公開: 2017-06-13これを想像してみてください。あなたは完璧なブログ投稿とそれに合う人目を引く注目の画像を用意しています。 しかし、FacebookやTwitterで共有すると、画像が間違った場所でトリミングされてしまいます。 さらに悪いことに、画像がないか、画像が小さすぎてすぐにスクロールしやすいため、投稿が完全に欠落しています。 私たちのブログの旅のある時点で、私たちは皆そこにいました。
サイズの悪い画像は、フォロワーに伝えようとしているメッセージを薄めるだけでなく、投稿の共有性も低下させます。 あなたの最も熱心なファンでさえ、問題のプラットフォームに最適化された関連する注目の画像が添付されていない場合、あなたのコンテンツを共有することを躊躇します（それがどれほど有益であっても）。
写真は間違いなく千の言葉の価値がありますが、ソーシャルメディアの画像を積極的に管理しようとしないと、それらは間違った言葉であることが判明する可能性があります。 では、どうすればこの落とし穴を回避し、ブログ画像をソーシャル共有用に最適化できるでしょうか。
OpenGraphとTwitterCardのメタタグがこのソリューションです。
Open GraphおよびTwitterカードのメタタグとは何ですか？
2010年にFacebookによって導入されたOpenGraphタグは、コンテンツ発行者が共有時に表示される要素を制御できるようにすることで、Webページをソーシャルグラフのリッチオブジェクトにするために使用されるメタタグのセットです。 Facebookのページ。 導入以来、OpenGraphプロトコルはLinkedInやPinterestでも採用されています。 Twitterは、FacebookのOpenGraphと機能が似ているTwitterカードを使用するプロトコルを使用します。
Open GraphとTwitterカードが有効になっているサイトにアクセスし、コンテンツのソースを表示すると、メタタグは次の例のようになります（「コンテンツ」情報が適切に置き換えられています）。
含まれている場合、OpenGraphタグとTwitterCardタグは、ページのSEOに直接影響しませんが、ソーシャルプラットフォームでのページの表示方法に影響し、さらに重要なことに、ページが共有されるときに表示する要素をレベルで制御できるようになります。誰でもソーシャルメディア。
WordPressサイトにOpenGraphタグとTwitterカードタグを実装する方法
より多くのソーシャルトラフィックのためにTwitterWebサイトカードを有効にする方法
リンク付きのほとんどすべてのツイートは同じように見えます。 「見出し+リンク+@handle+#hashtag経由。」 そして、そのリンク？ 完全に最適化されていません。 つまらない。 ツイートをクリックしても何も起こりません。 すべての...
ここまでは順調ですね。 しかし、次に発生する問題は、OpenGraphとTwitterCardのメタタグを操作して、ソーシャルメディアへの投稿に最適な表示結果を得る方法です。 良いニュースは、これらのメタタグを実装するために選択できるプラグインがいくつかあることです。 この記事では、主にYoast SEOプラグインのプレミアムメタタグ機能に焦点を当てますが、それから、他のいくつかの方法について説明します。
WordPress用のYoastSEO
プレミアムバージョンのYoastSEOをWordPressサイトにまだインストールしていない場合は、それがブログ画像をソーシャル向けに最適化するための最初のステップです。 このプラグインを使用すると、FacebookOpenGraphとTwitterCardのメタタグを非常に簡単に追加できます。 YoastSEOプラグインを使用してソーシャルメタタグを有効にする方法のステップバイステップガイドは次のとおりです。
1.YoastSEOを設定します
WordPressサイトのダッシュボードからYoastSEOプラグインの[ソーシャル]タブに移動します。 [アカウント]タブで、サイトのソーシャルメディアプラットフォームに関連する詳細を入力します。
[Facebook]タブでOpenGraphメタデータを有効にし、ページで必要に応じてその他の関連する詳細を入力します。
「Twitter」タブでTwitterカードのメタデータを有効にし、必要に応じてページに関連情報を入力します。
注：画像が大きいツイートは、画像が小さい、または画像がないツイートよりもエンゲージメントが高くなるため、Twitterには「画像が大きい概要」を使用することをお勧めします。 すると、ツイートは次のようになります。
これらの手順を完了すると、FacebookOpenGraphとTwitterCardのメタタグがすべての投稿で有効になります。 （これは1回限りのセットアップです！）
ただし、これらのタグによってソーシャル共有用に選択される画像は、問題のプラットフォーム用に一意にカスタマイズされません。 そのためには、共有したい個々の投稿に対して追加の手順を実行する必要があります。 （これは、新しいブログ投稿ごとに繰り返す必要がある手順です）。
2.FacebookとTwitterで共有する特定の画像を選択します
新しく作成された投稿（または編集モードの投稿）のYoast SEOセクションまでスクロールダウンすると、YoastSEOセクションの2番目のタブでソーシャル共有の詳細を選択できます。 このタブを使用して、FacebookとTwitterの両方の画像、タイトル、説明などを編集できます。
以上です！ 覚えておくべきことがいくつかあります。
- Yoastは、Facebookの場合は1200px x 630px 、Twitterの場合は1024pxx512pxの注目画像サイズを提案しています。 試行錯誤の結果、幅と高さの比率が2：1で、幅が450pxを超える水平方向の画像は、FacebookとTwitterの両方で問題なく機能することがわかりました。 ソーシャルメディアのサイズの詳細については、Sprout Socialのこのガイドと、Bufferのこれらのガイドラインを確認してください。
- 投稿リンクを少なくとも1回共有した後で、Facebookの注目画像をさかのぼって変更する場合は、古いキャッシュ情報を更新して新しい情報を取得できるように、Facebook共有デバッガーを介してURLを実行する必要があります。それ以降の注目の画像。
ソーシャルメディア画像を最適化するための他のWordPressプラグイン
Yoast SEOプラグインを使用していない場合は、作業を完了するのに役立つ他のWordPressプラグインがあります。 好みやサイトの互換性に応じて選択できる他のプラグインオプションを次に示します。
- フェイスブック
- オールインワンSEOパック
- Facebook Open Graph、Google +、およびTwitterカードタグ
- グラフを開く
PHPを使用してOpenGraphとTwitterカードのメタデータをWordPressテーマに手動で追加する方法
最後に、プラグインの代わりに技術に精通したソリューションを探している場合は、テーマのfunction.phpファイルに必要なPHPコードを手動で含めることで、WordPressテーマにメタタグを直接追加することをいつでも選択できます。 ステップバイステップの手順でそれを行う方法に関するいくつかのリンクを次に示します。
- WordPressテーマにFacebookOpenGraphメタデータを追加する方法
- オープングラフメタタグをWordPressに追加する方法
- OpenGraphメタタグを含めるfunctions.phpコード
注意：特定のWebサイトのテーマのデザインに合わせて、上記の参照コードをカスタマイズする必要がある場合があります。
ソーシャルメディアの投稿をつなぎ合わせるメタタグを理解すると、すぐにWordPressサイトでそれらを稼働させることができます。 そしてROIは？ さて、あなたの投稿はソーシャルメディア上ではるかに優れたパフォーマンスを発揮し、それらがどのように表示され、何を伝えるかをはるかにうまく制御できるようになり、意味があり共有可能になります。