Twitter card の画像が表示されなかった

at 2020-11-13 01:17 (UTC)

SEO blog

ながらく Twitter Card でこの blog の画像が表示されていなかった

コードはこうなっていた

<!-- Jekyll -->
<meta property="twitter:image:src" content="{{ '/assets/img/blog-image.png' | relative_url }}">
<!-- HTML -->
<meta property="twitter:image:src" content="/assets/img/blog-image.png">

こういう SEO 関連は疎いので Google 先生片手にしらべてみた

とりあえず property ではなく name だということがわかった

というわけでこのように修正した

<!-- Jekyll -->
<meta name="twitter:image:src" content="{{ '/assets/img/blog-image.png' | relative_url }}">
<!-- HTML -->
<meta name="twitter:image:src" content="/assets/img/blog-image.png">

しかしこれでも表示されない

うーん、タグに間違いはなさそうなんだが・・・としたときにふと思った

「ひょっとして URL の解決なんてやってないのか？完全な URL を出力してみるか」

<!-- Jekyll -->
<meta name="twitter:image:src" content="{{ '/assets/img/blog-image.png' | absolute_url }}">
<!-- HTML -->
<meta name="twitter:image:src" content="https://pinzolo.github.io/assets/img/blog-image.png">

どうやら正しかったようで Card Validator | Twitter Developers で試してみると正常に表示された

めでたし、めでたし

Next Prev