カテゴリー

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

※ 当ページには【広告/PR】を含む場合があります。
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"カードがきちんと表示されるようになりました。
[AWS x SEO対応] S3 & CloudFrontで静的ホスティングしたウェブサイトのドメイン移管 ~ 301リダイレクトを仕込む
Google Adsenseで勝手にCSSスタイルに注入されてしまう「height: auto !important」をMutationObserverで抑える

その他のリンク記事

関連記事
合同会社タコスキングダム｜蛸壺の技術ブログ

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

2021/03/14
ID#:86
AWS Lambda@Edge SEO ウェブサイト運営

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

AWS S3とCloudFrontを用いたCDN方式のウェブサイトは通常のレンタルサーバーとは仕組みが違うので、定石である.htaccessファイルを使って301リダイレクトが出来ません。今回はAWS S3ウェブサイトのお引越しの際特有の301リダイレクト方法に関して考察してみます。

クリックするとリンク先へ飛びます
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

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

カテゴリー