データサイエンティストハトリのブログ

PythonとインテリジェントクラウドとAIが好きな学生エンジニア。データ分析、スクレイピング、就職活動などについて書いていきます。

twitterカードが表示されない!?wordpressでtwitter投稿した時にアイキャッチ画像が表示されるように設定!

f:id:hatorihatorihatorik:20180911205246p:plain

Twitterカードとは

wordpressを使ってwebサイトを作っている人はTwitterにも投稿したいと思ったことはあるでしょう。

Twitterで投稿した時に、一緒に画像が表示されているとかっこいいですよね。実際に画像がある方がクリック率が高いというデータもあるみたいです。

 

現代ではサイト運営をしていく上で必須機能と言えるのではないでしょうか。今回はこの Twitterカードの設定の時につまづいたことを書きました。

 

header.phpに設定を記述

カードの設定はheader.phpに記述していきます。

<head>

....

 

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo $meta->title; ?>">
<meta name="twitter:description" content="<?php echo $meta->description; ?>">
<meta name="twitter:image:src" content="<?php echo $meta->ogp_image ?>">
<meta property="og:url" content="<?php echo $meta->canonical ?>">

 

....

</head>

 

別でheader_meta.phpというファイルを作り、これのファイルから$metaを設定していきます。

 

function ~~~

  $image_id  = get_post_thumbnail_id();
  $image_url = wp_get_attachment_image_src($image_id, $size = 'thumbnail', true);

  $ogp_image_path = $image_url[0];

end

 

原因はわからないが直接サムネイルidを取得したら解決した

$image_url = get_the_post_thumbnail_url( $post->ID, 'full' );

 

としたところすぐに解決しました!少し遠回りなやり方をしてしまいました。サムネイルのurlを取得するget_the_post_thumbnail_urlは覚えておこうと思います。

 

デバックはprintかvar_dump

なぜこの問題が解決できたか解説しましょう。1つづデバックを行なっていきました。

気になる箇所にprint($image_url)やvar_dump($image_url)などと記述することで値がどこに入っていてどこに入っていないのか完璧に可視化することができます。

Twitterカードが表示されるか確認するのに便利なツールがあった

Twitterカードを確認するために毎回投稿して、削除して、っていうのを繰り返しているとかなりめんどくさいですよね?

こんな人のためにTwitterにはTwitterカードを事前に確認するツールが用意されていました。

cards-dev.twitter.com

 

開くとこんな感じの画面が出てきます。

「Card URL」の部分に表示させたい自分のサイトのURLを入力すると右側に表示されます。

f:id:hatorihatorihatorik:20180911204129p:plain