WordPressプラグイン「Yoast SEO」でトップページのTwitterカードを設定する方法 | 株式会社Esolab
logo

ARTICLE

記事ページ

記事ページ

WordPressプラグイン「Yoast SEO」でトップページのTwitterカードを設定する方法

TECH

ホームページを運営していく上でとても大切なのがSEO対策。

SEOに関する対策を講じる際に一番人気のプラグインがYoast SEOです。

Yoast SEOについての説明は他記事にて紹介されているのでそちらを参考にしてください。

Yoast SEOでは各記事のアイキャッチ画像を自動でTwitterカードにできるのですが、トップページなどのTwitterカードについては設定方法がありません。

サイトリニューアル時などにトップページのリンクをシェアしたいと思うことはかなりあると思います。

今回はそのようなYoast SEOでトップページのTwitterカードを設定する方法をご紹介したいと思います。

Yoast SEOでトップページのTwitterカードを設定する方法

header.phpのheadタグ内にmetaタグを追加

header.phpのheadタグ内に下記コードを追加します。

  <?php if ( is_home()) : ?>
  <meta name = "twitter:card" content="summary_large_image">
  <name = "twitter:image" content="Twitterカードにする画像のパス">
  <?php endif; ?>

各記事のmetaタグはYoast SEOにより自動で設定されるので条件分岐でis_homeの場合のみmetaタグが追加されるようにします。

そして次に

<meta name = "twitter:card" content="summary_large_image">

でサムネイルのサイズを指定します。

summaryもしくはsummary_large_imageを指定できますので、好みに合わせて設定していただければいいかと思います。

次に

<name = "twitter:image" content="Twitterカードにする画像のパス">

の部分ですが、ここで画像のパスを指定します。

パスがしっかりと通っているか確認はしておきましょう。

これだけで設定は完了しました。

では実際に反映されているかみてみましょう。

Twitter Card Validatorで結果を確認する

確認されているかの確認はTwitter Card Validatorで確認できます。

Twitter Card Validatorはこちら

今回はプログラミング講師検定サイトで行ってみようと思います。

設定できましたね!以上で完了です。

まとめ

いかがだったでしょうか?

今回は、Yoast SEOでトップページのTwitterカードを設定する方法を紹介しました。

条件分岐さえ変えればお好みのページにも設定できるので是非ご利用ください。

この記事を書いた人

田川烈

開発部 フロントエンジニア

アーカイブ

カテゴリー

  • TECH (35)
  • DESIGN (23)
  • OTHER (17)
  • MARKETING (6)
  • SEO (5)
  • お問い合わせ

    株式会社EsolabではWEBサイトやECサイトの運営など多岐にわたり事業を展開しています。
    ホームページや自社ECサイトをお求めの方は一度お問い合わせください。

    お問い合わせ