MENU
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
あらゆるモノにHackする、探究者の読み物。
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
  1. ホーム
  2. ワードプレス
  3. ワードプレスのSEO対策に!Google検索結果にサムネイルをさせる方法

ワードプレスのSEO対策に!Google検索結果にサムネイルをさせる方法

2020 7/22
ワードプレス
2019-06-012020-07-22
Google検索結果にサムネイルをさせる方法

SEO対策というか、単純に検索結果でサムネイル表示されてると目を引きますよね。

主にサムネイルが表示されるのはスマホでの検索時ですが、やはり、目を引く分CTRのアップを狙えます。

今回はGoogleに効率的にサムネイルのありかを知らせる方法を紹介します。

目次

meta タグを使ってサムネイル画像をGoogleに指定する

metaタグって言うのは、htmlに慣れている人でもあまり積極的に使う事が少ないタグです。

そもそものmetaタグの役割としては、人間にわかるように表示するためのものではなく、機械(ブラウザやbot)に対して、WEBサイトのページの概要を示したり、著者を知らせたりするもので、読者やワードプレスのライトユーザーの目に触れる機会はほとんどありません。

基本的には、ワードプレスの場合、ほとんどのテーマテンプレートで必要最低限のmetaタグを出力するように組み込まれています。

次項で、ご自身のワードプレステーマが検索結果サムネイル用のmetaタグを出力しているのか調べる方法を紹介します。

自分のワードプレステーマがサムネイル用のmetaタグを出力しているか確認する方法

Google Chromeのデベロッパツールを使います。(別にchromeじゃなくてもOK)

①metaタグの有無を調べたいページで[F12]を押します。

②「Elements」タブの中で[Ctrl + F]を押して検索窓を起動

③検索窓に「<meta」と入力して右側の矢印で一個ずつ見ていきます。
※スペースを使った複合的な検索が出来ないので注意

④「<meta name=”thumbnail” ~」から始まるタグがあればOK。

サムネイル表示用のmetaタグがない場合の出力方法

header.phpを編集して、各記事でアイキャッチとして使われている画像を検索結果のサムネイル用画像として指定したmetaタグを出力します。

header.phpに記述するパターン

<!--検索結果サムネイル対策用-->
<?php if ( is_home() || is_front_page() || is_page() ) : ?>
	<meta name="thumbnail" content="https://あなたのドメイン.com/logo.png" />
	<?php elseif ( is_single() ): ?>
	<meta name="thumbnail" content="<?php the_post_thumbnail_url(‘medium’); ?>" />
	<?php endif; ?>
<!--ここまで-->

header.php の <head>~</head> に囲まれた位置に上記コードを貼り付けてください。

処理内容としては、ワードプレス上のページが「ホーム」「カスタムホーム」「固定ページ」の場合は「https://あなたのドメイン.com/logo.png」で指定されたURLの画像をサムネイルとして使います。

投稿ページに関しては、アイキャッチとして指定されている画像を検索結果用のサムネイルとして使います。

つまり、コード中「https://あなたのドメイン.com/logo.png」の位置はご自身のサイトロゴのURLなどに変更する必要がありますのでご注意ください。

functions.phpに記述するパターン

//---------------------------------------//
// 検索結果サムネイル用
//---------------------------------------//
function add_meta_to_head() {
  if ( is_home() || is_front_page() || is_page() ) {
    echo '<meta name="thumbnail" content="https://あなたのドメイン.com/logo.png" />';
  }else{
    echo '<meta name="thumbnail" content="' .wp_get_attachment_url( get_post_thumbnail_id() ). '" />';
  }
}
add_action( 'wp_head', 'add_meta_to_head' );

処理内容は同じですが、functions.phpに記載することもできます。

何れか使いやすいほうを選択してください。

検索結果のサムネイル表示にはばらつきがある。

当サイトでは、もちろん全記事ページにサムネイルの指定をしています。

が、実際に表示されるかどうかはGoogleの気分次第。

設定してからインデックス内容が変更されるまでの時間差があるのかもしれませんが、現状このサイトの検索結果はサムネイル表示されているページとそうでないページが存在します。

検索順位はもちろんですが、目を引いてクリックを促してサイトに訪れてもらうことも非常に大事です。(CTRを上げると言います)

ワードプレス初心者の方には少し難しいかもしれませんが、一度作業してしまえば永続的に効果がありますので、是非挑戦してみてください。

ワードプレス
Google サムネイル ワードプレス
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
人気記事
  • IQテストいくつか受けてみました
    ネット上で信憑性がありそうなIQテスト、5種類まとめて受けた結果…
  • hayate
    メルカリの商品を世界最速で購入するためだけのアラートツール
  • 【Python】BeautifulSoupの使い方・基本メソッド一覧|スクレイピング
  • Pythonファイルのexe化
    【悲報】PyInstallerさん、300MBのexeファイルを吐き出すようになる
  • Amazon Echo アレクサのコマンドまとめ
    AmazonEchoの使い方とできる事、アレクサへの指示コマンド一覧
最近の投稿
  • 正規表現処理の濁点でハマった話2024-12-12
  • 保護中: 疾風v2更新履歴2024-05-31
  • 【自営・経営者向け・税金も】クレジットカードガチ勢による最強クレカ解説2023-10-23
  • PyQt5 QListWidget の item削除でtextBoxのフォーカスが奪われる2023-03-05
  • WordPressからのメールが届かない時の調査と解決法2023-02-27
目次
目次