(Github pages×freenom)Twitter OGP画像が反映されない時の対応 

Web制作

Twitterのシェアボタンで、OGP(Open Graph Protocol)を使って画像を表示させようとしましたが、なぜか表示がされません。

少しハマってしまったので記します。

【前提】

・github pages にてサイト公開、https化し

・freenom で独自ドメインを利用しています
→ *****.github.io/プロジェクト名 でアクセスすると、freenomで作成したドメイン名に繋がるように設定されています

・シェア時に表示させたい画像(仮名:imagepic.png)はroot直下の/imagesにあるとします

【結論】

独自ドメインでパスを指定することで画像が表示されました。

OK

<meta name="twitter:image" content="https://{freenomで作ったドメイン名}/images/imagepic.png" />

twitterに関してのmetaタグは、全体ではこうなります。

<meta name="twitter:title" content="{ここにタイトルを記述}" />
<meta name="twitter:url" content="https://{freenomで作ったドメイン名}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://{freenomで作ったドメイン名}/images/imagepic.png" />

※Cardに関しては、画像を大きく表示させたかったのでsummary_large_imageに選択しました ここに関してはお好みで別のサイズを指定できると思います

うまく表示されるかは公式のCard validatorで確認するのが一番確実だと思います

Log in to Twitter / Twitter
Log in to Twitter to see the latest. Join the conversation, follow accounts, see your Home Timeline, and catch up on Tweets from the people you know.

こちらでサイトを確認すると・・・

うまく画像が表示されていると思います!

参考までに・・・うまくいかなかったのは、各種記事を参考にして

NG例1

<meta name="twitter:image" content="images/imagepic.png" />

NG例2

<meta name="twitter:image" content="*****.github.io/images/imagepic.png" />

にしていたためです。

なお、元々Facebookのシェアボタンでは、ogpの画像設定の所を

<meta property="og:image" content="images/imagepic.png"/>

でいけたので、なぜTwitterだけ上手くいかない?!となり、解決に時間を少し要してしまいました。

コメント

タイトルとURLをコピーしました