TwitterやFacebookで共有された時の表示をコントロールする

ホームページに訪れた人が気に入ってくれて、SNSでURLを貼り付けて投稿してくれた際に、画像付きでリンクが表示されると見栄えも良くて宣伝効果が高まります。その際に必要なTwitterカードやOpen Graphの設定について説明します。

TwitterやFacebookで投稿されても被リンクの効果はないのでSEO対策にはなりませんが、投稿を見た人がクリックしやすくなり、結果として流入を増やしたり、二次的に被リンクを獲得できる可能性もあります。

トップページや反響のあるページだけでも設定して損はないので、ぜひチャレンジしてみてください。

SEO導入コンサルティング
– 初歩的なSEOに関するご相談は無料
※別ウィンドウで開くので、あとで読めます。

HTMLの書き方

HEADタグ内に以下のようなMETAタグを追加します。ツイッターとフェイスブックでそれぞれ細かい違いがあるのですが、共通した部分をまとめ最小限のMETAタグだけで設定しています。

静的なサイトの場合シェアされる可能性が高いトップページだけでもOKです。WordPressならばプラグインで一括して設定したり、レンタルブログならば標準で対応していることもあります。

<meta property="fb:admins" content="XXXXXXXXXXXXXXX" />
<meta name="twitter:card" content="summary_large_image">
<meta name="og:title" content="投稿時に表示されるサイト名">
<meta name="og:description" content="投稿時に表示される説明文">
<meta property="og:image" content="画像のURLをフルパスで指定">

fb:admins

Facebookに反映させるにはIDの設定が必要です。個人のアカウントならプロフィールのURLか、FacebookページならばページのURLを下記のサイトに入力するとIDが表示されるので、それを設定します。

▽Find your Facebook ID
https://findmyfbid.com/

twitter:card

ツイッターはデフォルトだと小さい画像になるので、「summary_large_image」を設定します。

表示のテスト方法

設定がちゃんとできているかを確認するには以下のサイトからチェックします。

▽Twitterカードバリデーター
https://cards-dev.twitter.com/validator

画像を準備する

og:imageに使用する画像は「800×419」ピクセルの大きさで作ります。

画像を使いまわして正方形のサムネイルで表示されることを考えるならばロゴなどは中央に配置して、左右が切れても大丈夫なように調整します。

実際の表示はこんな感じ！

気が向いたらポチッとリツイートをお願いします！

経営者様とのタッグを組んだり、貴社の集客チームに参加して、圧倒的なスピード感で集客体制を構築します。「コンパクトな組織作り」「社外のプロフェッショナルを集めたチーム構成」「面白いことやらかしたい！」そんなイメージにピンときたら、お気軽にご相談ください。https://t.co/yUVycqh8z1

— Bassey (@basseyboost) May 22, 2020

SNSでの拡散はSEO効果があるか？

SEOをかじったことがある人なら気になるSNSの被リンク効果ですが、サーチコンソールの「サイトへのリンク」に反映されないことからも効果がないと言い切れます。
しかし、Twitterの場合は連携している他のサイトから間接的にリンクを得ることもできる可能性があるので、全く効果がないというわけでもありません。

---