WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
SEO measures! ? I also added an image tag to be displayed in mobile search results

SEO対策!?も兼ねてモバイル検索結果に表示させる画像タグを追加してみました

公開日: 制作備忘録

知れば知るほどSEO対策っていうのが広義だということが分かってきました。検索エンジンに好まれるようにソースの流れやタグを入れるなんて単純なことかと勝手に思っていましたが、どうやら広い意味でのSEO対策とは結果的にアクセス数が上がるようにするということになるのだとまたまた勝手に認識を変えました。

検索エンジン経由でのアクセス数のアップは検索結果の上位に来る(訪問されるきっかけを作る)ことですから、

  1. 検索エンジン側で「これは役に立つページだ」と認識されること
  2. 実際にそのページが検索結果からクリックされて訪問されること(これも「役に立つページだ」と認識されるきっかけ)

なのでしょう(本当に勝手な解釈です)

そして、このところいくつも記事をリリースしている「構造化データ」は検索結果に表示される内容を検索エンジンへ伝え、「なるべくこの通りに表示してちょ!」という、上の2つで言えば後者の対策ということになります。

今回はついでにモバイル環境でGoogle検索された時にアイキャッチ画像を表示できるようにお願いする方法を紹介します。

お願いする・・と書いたのは、この方法を用いたから絶対に検索結果に画像が表示されるというものではなく、あくまでも情報がありますよ!としておいてあとは検索エンジンさんが必要と判断すれば表示するというものだからです。したがって設定したのに全然表示されないじゃん!!などと言われても責任は持てませんので悪しからず。

多分マイナスになることはないとは思いますので、設置しておいて損はないかなと思います。

【ha-Basic】テーマ1.0でモバイル検索結果に表示させる画像タグを追加する方法

11行目付近にある

<?php custom_seo_meta();?>

の下に

<meta name="thumbnail" content="<?php echo the_post_thumbnail_url('thumbnail'); ?>" />

を、19行目付近にある

<meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">

の下に

<meta name="thumbnail" content="<?php echo get_template_directory_uri() ?>/images/webclipicon.png" />

をそれぞれ追加するだけです。

簡単に解説しておくと、上に挿入するコードは固定ページ、投稿ページなど個別ページの場合にはそれぞれに設定されているアイキャッチ画像を、下に挿入するコードは個別ページ以外ではサイト画像(「テーマフォルダ」→「images」に「webclipicon.png」というファイル名でアップロードされている画像)を出力するようにしています。

※個別のページにアイキャッチ画像がない場合はURLが出力されません

その他のテーマでモバイル検索結果に表示させる画像タグを追加する方法

上で紹介した

<meta name="thumbnail" content="<?php echo the_post_thumbnail_url('thumbnail'); ?>" />

は、WordPress共通の関数なのでどんなテーマでもほぼ100%使用可能です。

方法もほぼ同じ、テーマのheader.phpの</head>の手前にコードを加えるだけです。

※既にコード設置がされている場合があります。トップページや個別記事などのコードを確認、またはページ表示後にコード表示をして確認などの方法でこのタグが出力されていないか確認しましょう。

また、【ha-Basic】テーマのようにメタデータの出力を個別ページとその他ページで分けているようなテーマの場合には、コードをよく見て適切な方法で出力されるようにしましょう。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。