【SEO対応~ウェブサイト運用】ウェブサイトでTwitterのOGP対応を行う

以前の記事で、AWS S3 & CloudFrontでホストした静的ウェブサイトでの「Slack」のOGP対応として、以下のような記事を紹介していました。

[AWS x SEO対応] S3 & CloudFrontで静的ホスティングしたウェブサイトのドメイン移管 ~ 301リダイレクトを仕込む

AWS S3ウェブサイトのお引越しの際特有の301リダイレクト方法に関して考察してみます。

ここ最近大きな方針転換でネットニュースなどでも話題になっている

「Twitter」

も、今更ながら興味が出てきましたので、気が向いた際には投稿をしてみるようになりました。
いざ当サイトのブログ記事紹介を貼り付けてみると、以下のように表示されてしまいました。

つまるところ、現状で

「TwitterのbotがOGP(Open Graph Protocol)グラフを正しく読み込めない」

という問題が発生しているので、今回はTwitter botが正しくWebページのmetaタグを読み取れるようにしてみたいと思います。

TwitterのOGPフォーマットについて

TwitterのOGP構造は、基本的に以下のように

<head>

タグに埋め込むことでbotに正しく読み込んでもられるようになります。

開く/閉じる

            <head prefix="og: http://ogp.me/ns#">
...
<meta property="og:title" content="[WEBページのタイトル]" />
<meta property="og:type" content="[WEBページの種類(website か article)]" />
<meta property="og:url" content="[URL]" />
<meta property="og:image" content="[サムネイル画像のURL]" />

<!-- 以下省略可能 -->
<meta property="og:site_name" content="[サイト名]" />
<meta property="og:description" content="[WEBページの詳細説明]" />
<meta property="og:locale" content="[サポート言語](=“ja_JP”でOK)">

<!-- Twitterの設定 -->
<meta name="twitter:card" content="[カードの種類(summary か summary_large_image)]" />
...
</head>