【Yoast SEO】 Twitterカード トップページ用サムネイルの設定方法

記事公開後、Twitterで告知することってありますよね。
ブログ開設初期は検索流入も少ないので、数少ないPRポイントです。

この記事をご覧いただいている方も、多くはTwitterからではないかと思います。(ありがとうございます!)

そんな数少ないPRの場においてTwitterカードの有無は非常に重要で、本ブログもそれらの対策としてプラグイン「Yoast SEO」を使用しています。

Yoast SEOでは、各記事のアイキャッチが自動でTwitterカードに設定できたり、descriptionも個別編集可能になるなど、便利な機能が盛りだくさんです。

ただ、各記事のTwitterカード画像はアイキャッチから自動設定されるのですが、トップページをシェアした際の画像設定方法がないんですよね

トップページを紹介したいときって結構ありますよね。

ということで、今回はYoast SEOユーザー向けに「トップページにTwitterカードのサムネイルを設定する方法」を紹介します。

とても簡単なのですぐに設定可能です。

header.phpにmetaタグを追加する

各記事のmetaタグは「Yoast SEO」が勝手にやってくれてますので、トップページのみ反映させたい。
なのでis_homeを使ってhomeのみ出力されるよう記載します。

<?php if ( is_home()) : ?>
<!-- twitter -->
<meta name = "twitter:card" content="summary_large_image">
<meta name = "twitter:image" content="画像のパス">
<?php endif; ?>

画像サイズを設定する

content=”summary_large_image”はサムネイルの大きさ。
大小設定できますのでsummarysummary_large_imageお好きな方を。

私は大きいほうが好きなので、largeを選択しています。

画像のパスを指定

パスを指定します。
例えばテーマフォルダ直下、「img」フォルダに画像がある場合

themeフォルダ
└img
  └sns.png

テンプレートタグを使用して、このように指定します。

<meta name = "twitter:image" content="<?php echo get_template_directory_uri(); ?>/img/sns.png">

または、WordPress管理画面からメディアライブラリにアップロードし、URLを指定してもOKです。

Card validatorで確認する

設定完了し、諸々アップロードしたら確認してみましょう。

確認はCard validatorで行います。

左側のCard URLにトップページのURLを入力し、Twitterカードが表示されれば設定完了です!

そしてつぶやいてみる。

https://twitter.com/uiuidesign/status/1215105294520315905

以上で簡単でしたが、「トップページにTwitterカードのサムネイルを設定する方法」でした。

最新記事