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


2022/12/22
【AWS x SEO対応】S3 & CloudFrontで静的ホスティングしたウェブサイトのドメイン移管 ~ 301リダイレクトを仕込む
Google Adsenseで勝手にCSSスタイルに注入されてしまう「height: auto !important」をMutationObserverで抑える
蛸壺の技術ブログ|【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>
        
metaタグを設置するだけですので、さほど難しいことではありません。

なお、分かりづらいオプションとして、
og:typeはウェブサイトのTOPページに「website」を選択し、それ以外のページは「article」と区別するようです。

また
twitter:cardは表示されるカードのスタイルを指定するオプションです。

参考|ツイートをカードで最適化する

指定できるカードタイプは、
summary / summary_large_image / app / playerですが、ブログ記事などをTwitterに貼り付けてつかう場合には、summary(最小表示画像サイズが144×144) か summary_large_image(最小表示画像サイズが600×314)のどちらかに設定するようです。


TwitterカードのOGP表示を検証する

過去にはOGPで設定したカードが表示されるかどうかは、以下のTwitter公式のツールで判定することができました。

Card validator|Twitter Developer

現在、このサイトツールは利用不可になっていて、OGP設定が正常なページでも以下のように、
「Unable to render Card preview」(表示できません)という判定結果になります。

合同会社タコスキングダム|蛸壺の技術ブログ

公式のサイトツールではありませんが、以下の外部サイトツールでチェックすることもできます。

参考|OGP確認ツール - Analyze OGP and Twitter Cards

合同会社タコスキングダム|蛸壺の技術ブログ

これでOGPがページのheadのmetaタグに上手く設定出来ているようであれば、TwitterにURLを貼り付けてみると、

合同会社タコスキングダム|蛸壺の技術ブログ

のように"summary_large_image"カードがきちんと表示されるようになりました。
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。