皿ノート

ひとりごと

トップ > PHP > WEBサイトのツイッターカードが表示されなかったけど解決した話

WEBサイトのツイッターカードが表示されなかったけど解決した話

PHP

（作ったWEBサイトにツイッターカードをつけたいな！）

っと思いました。

ツイッターカードのタグを設置

ググって見つけた記事をもとに、変更が必要なcontent内部だけ書き換えて、<head></head>内にぺたぺた。

<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@omanjusara" />
<meta name="twitter:title" content="hello!bloject" />
<meta name="twitter:description" content="hello!projectメンバーの新着ブログを一覧にしました。グループ・メンバー別にソートできます。" />
<meta name="twitter:image" content="https://www.hellobloject.com/card.png" />

 

ツイッターカードが反映しているかチェック

そして、ツイッターカードが反映しているかを調べます。

Card Validatorという、確認させてくれる公式サイトがあります。

cards-dev.twitter.com

 

URLを入力してPreview cardボタンを押しても一向に画像が表示されません。

右下のログ文章も赤字はなく、エラーらしいエラーは見られない。

なんで？

エラー出るならまだしもエラーすら出てないんだけど？？

 

対処法を探そうにも検索の仕方が悪いのか、出てくるものはwordpressでのツイッターカードの設定の仕方やエラー解決法ばかり。

次点で多いのが、

robot.txtの設定で画像のクローリングを拒否していたら表示されませんよ～～。

という記事だったものの、そもそもrobot.txtは設置していないし……。

 

Card Validatorの公式ページ、読むしかないのか……。

developer.twitter.com

 

英語が特異なノナえもん（モーニング娘。'19の野中美希ちゃん）が家にいたら泣きつけるのにな～～。

ゲスな気持ちをひっこめて、恐る恐る目を通したら……ん？ん？

 

公式サイトに掲載されているサンプルコード

The example below uses a mix of Twitter and Open Graph tags to define a summary card:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

Getting started with cards — Twitter Developersより

 

タグ違うやん！！！

 

タグを修正して再チャレンジ

<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@omanjusara" />
<meta property="og:url" content="https://www.hellobloject.com/" />
<meta property="og:title" content="hello!bloject" />
<meta property="og:description" content="hello!projectメンバーの新着ブログを一覧にしました。グループ・メンバー別にソートできます。" />
<meta property="og:image" content="https://www.hellobloject.com/card.png" />

変更点

  1. 3行目にurlのメタタグを挿入
  2. title、descriptionのnameをpropertyに変更
  3. twitter:をog:に変更

そして、Card Validatorを再トライ。

 

できた～！！！ 

 

f:id:omanjusara:20190114162606p:plain

 

ということで、無事に表示できました。