1. TOP
  2. wordpressテーマ作成
  3. 7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する

7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する

|

検索エンジンのクローラーやSNSでの拡散時にサイトの情報を伝えるためには、metaデータを<head>内に記述しておく必要があります。

metaデータできちんとサイトの情報をコントロールすることで、SEO的にもSNS拡散にも大きな効果が期待できます。サイトの質を高めることができるので、テーマを作成する際は必ず記述しておきましょう。

今回は、WordPressの<head>内に記述しておきたいmetaデータについてご紹介します。

noindexの設定を行う

noindexとは、Googleなどの検索エンジンに対して「このページは登録しなくても大丈夫です」と伝えることができる設定です。検索エンジンに登録されないだけで、クローラーの巡回は通常通り行われます。

WordPressなどのCMSを使ってサイトを作成した場合、トップページやカテゴリページ・タグページ・アーカイブページ・検索ページなどのページが生成されます。(主にindex.phpによって生成されるページです。)

Googleからは、WordPressなどのCMSによる自動生成コンテンツは適切に処理するとアナウンスされてはいますが、万が一を考え自動生成ページが重複コンテンツとして扱われ、サイトの評価を防ぐために『noindex』の設定を適切に行っておきましょう。

今回は、『タグページ』『アーカイブページ』『検索結果ページ』『404ページ』の4つのページをnoindexとして処理してます。カテゴリページに関しては賛否両論ありますが、noindexにせずそのままにしておきます。

header.phpのheadタグ内に記述
<?php if(is_tag() || is_date() || is_search() || is_404()) : ?>
  <meta name="robots" content="noindex"/>
<?php endif; ?>

上記の記述は『if(is_tag() || is_archive())』というように『 || 』でまとめて、各一覧ページの条件分岐をしていしています。

phpで『||』は、「または(or)」という意味です。

上記の書き方ではなく、『if』『elseif』を使って条件分岐をしても問題ありません。

また、各ページごとの条件分岐は『is_〇〇』の部分を下のように書き換えることで対応できます。

  • TOPページ → is_home
  • 記事 → is_single
  • 固定ページ → is_page
  • カテゴリ一覧 → is_category
  • タグ → is_tag
  • 年,月,日,時間 → is_date
  • 検索結果 → is_search
  • 404 → is_404

noindexと一緒にnofollow()も追加して『<meta name="robots" content="noindex,nofollow"/>』とすると、リンクをクローラーが巡回しないようにすることもできます。ページ内のリンクも巡回しなくなってしまうので今回は設定していませんが、状況に応じて変更使い分けましょう。

メタデータを記述する

noindexの設定が終わったら次は、各ページごとに最適化されたmetaデータを記述します。metaデータは、検索エンジンにサイトの適切な情報を伝えるのに重要な役割果たしますので必ず追加しておきましょう。

メタデータの基本形は、『<meta name="設定する情報" content="出力する内容">』と言う形で記述します。WordPressの場合は、ページによって出力する内容が変わるので、『投稿+固定ページ』とそれ以外のページ(TOPページや記事一覧ページなど)でphpで出力する内容を分岐しています。

※場所は、headタグ内ならどこでも問題ありません。

投稿・固定ページ用のメタデータ

headタグ内に記述
<!--個別ページ用のmetaデータ-->
<?php if( is_single() || is_page() ): ?>
<meta name="description" content="<?php echo strip_tags( get_the_excerpt() ); ?>" />
<?php if ( has_tag() ): ?>
<?php $tags = get_the_tags();
$kwds = array();
foreach($tags as $tag){
  $kwds[] = $tag->name;
}	?>
<meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">
<?php endif; ?>
<?php else: ?>/*個別ページ以外のメタデータに続く*/

上記の『個別ページのメタデータ』の後に、必ず下記の『それ以外のメタデータ』を追加してください。追加しない場合は、上記のソースコードの最後の『<?php else: ?>』を『<?php endif ?>』に書き換えてください。

投稿ページや固定ページ等の個別ページでは、『 get_the_excerpt() 』でdescriptionに抜粋欄に記述した文字列を呼び出します。

抜粋欄に何も記述していない場合に、本文から110文字を自動で出力する場合は、『<meta name="description" content="<?php echo strip_tags( get_the_excerpt() ); ?>" />』の上に一行付け加えることで出力することができます。

<?php setup_postdata($post) ?>
<meta name="description" content="<?php echo strip_tags( get_the_excerpt() ); ?>"/>

また、記事から自動で文字列を抜き出したときにhtmlタグも一緒に出力しないように『strip_tags』を指定し、文字列だけを抜き出すようにしておきましょう。

キーワードには、各ページで設定しているタグが有る場合は、タグを呼び出すように指定しています。タグを複数指定している場合には、コンマ区切りで出力されるように『implode( ',',$kwds )』という形で記述します。

個別ページ以外のメタデータ

headタグ内の個別ページのメタデータ(上記のソース)の続きに追加

下記のタグは、必ず上記の個別ページのメタデータの直下に追加してください。直下以外の場所に設置した場合はエラーが発生してしまいます。

<?php else: ?><!--個別ページ以外のメタデータ(TOPページ・記事一覧ページなど)-->
  <meta name="description" content="<?php bloginfo( 'description' ); ?>">
  <?php $allcats = get_categories();
  $kwds = array();
  foreach($allcats as $allcat) {
    $kwds[] = $allcat->name;
  } ?>
  <meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">
<?php endif; ?>

記事や固定ページ以外のページには抜粋欄がないため、WordPressの管理画面の『設定』→『一般』→『キャッチフレーズ』で設定されている内容がdescriptionに出力されるように設定しています。

また、キーワードではタグではなく、登録しているカテゴリ名を呼び出しています。設定しているタグを呼び出す場合は、個別記事で設定している物をコピーすればOKですし、直接カテゴリを記述しても問題ありません。

TOPページを固定ページに設定している場合

WordPressの管理画面からTOPページの設定を『固定ページ』もしくは『投稿ページ』にしている場合は、『home.php』や『front-page.php』で出力される場合と異なり『個別ページ用のmetaデータ(<?php if( is_single() || is_page() ): ?>)』で設定しているmetaタグに分岐されます。

TOPページを『固定ページ』・『投稿ページ』にしている場合も、『個別ページ以外のメタデータ(<?php else: ?>)』に記述しているmetaタグを出力したい場合は、下記の記述に変更してください。

<?php if( is_single() || is_page() ): ?>

↓下記に変更

<?php if( is_single() && !is_home() || is_page() && !is_front_page()  ): ?>

SNS用のメタデータを設定する

ブログを運営する上で、SNSとの連携は欠かせないものとなっています。SNSでシェアされたときに適切な情報が出力されるように、SNS用のメタデータも一緒に記述しましょう。

SNS用のメタデータは、主要なSNSがほとんど対応しているOGP規格に準じて記述をします。OGPタグは、『<meta property="og:指定する情報" content="出力する内容">』という形で記述していきます。

指定する情報は下記の通りです。

  • og:site_name → サイトの名前
  • og:locale → サイトの地域と言語
  • og:type → サイトやコンテンツの種類
  • og:title → 記事のタイトル
  • og:url → 記事のパーマリンク
  • og:description → 記事のディスクリプション
  • og:image → 記事の画像

以上のタグをそれぞれ設定していきます。上記のタグは、通常のメタデータと同じように投稿・固定ページとTOPページに分けて設定しましょう。

prefixを設定する

OGPタグを記述する前に、まずはprefixを設定を記述する必要があります。無くても大丈夫らしいのですが、念のために記述しておきましょう。prefixは、headタグの開始タグに組み込みます。

header.phpの<head>に追記
<head prefix="og: http://ogp.me/ns#">

共通のogpタグを記述する

prefixの設定が終わったら、次はtopページと個別ページに共通のogpタグを記述しましょう。

headタグ内に記述
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">
<meta property="og:locale" content="ja_JP">

サイトの名前(og:site_name)とサイトの地域(og:locale)は、共通の設定なので条件分岐をせずにそのままheadタグ内に記述します。場所はどこでも問題ありませんが、わかりやすいように先程記述した通常のメタデータの条件分岐の上あたりに記述しておきましょう。

共通のOGPタグの記述が終わったらTOPページ用と投稿・固定ページ用に分けて記述していきます。

投稿・固定ページ用のOGPタグを記述する

投稿・固定ページ用のOGPタグを記述するときは、通常のメタタグを記述する際に、個別ページ用のメタダグを記述した『<?php if( is_single() || is_page() ): ?>~<?php else: ?>』の中に記述してください。

<?php if( is_single() || is_page() ): ?>の中に記述
<meta property="og:type" content="article">
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:description" content="<?php echo strip_tags( get_the_excerpt() ); ?>">
<?php if( has_post_thumbnail() ): ?>
  <?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); ?>
  <meta property="og:image" content="<?php echo $postthumb[0]; ?>">
<?php endif; ?>

投稿・固定ページの場合は、記事として出力するため『meta property="og:type" content="article"』と設定し、『og:url』は『<?php the_permalink(); ?>』で各記事のURLを出力します。

画像は、facebookの推奨サイズが最低600px以上とされているため、サムネイル画像があるときにlargeサイズで出力するようにしてください。

残りの設定は、通常のメタタグ用のデータとcontent部分の書き方は同じです。

個別ページ以外に出力するOGPタグを記述する

個別ページ以外のOGPタグは、個別ページ以外のメタタグを記述している『<?php else: ?>~<endif; ?>』の中に追加してください。

<?php else: ?>~<endif; ?>の中に記述
<meta property="og:type" content="website">
<meta property="og:title" content="<?php bloginfo( 'name' ); ?>">
<?php
$http = is_ssl() ? 'https' . '://' : 'http' . '://';
$url = $http . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
?>
<meta property="og:url" content="<?php echo $url; ?>">
<meta property="og:description" content="<?php bloginfo( 'description' ) ?>">
<meta property="og:image" content="表示したい画像のパス">

※「meta property="og:image"」の箇所は、表示したい画像のパス(URL)を挿入してください。

投稿や固定ページ以外のページは、記事ではないので『<meta property="og:type" content="website">』でサイトとして出力しています。

URLは、カテゴリページやタグページなどのアーカイブページのものも取得するためPHPの『$_SERVER["〇〇"]』を使って出力しましょう。

OGP用のメタデータの記述が終わったら、facebookデバッカーできちんと反映されているか確認します。

facebookデバッカーに接続したら、ブログ内の適当なページのURLを入力してください。

上記の画像のように、OGPタグが反映されていたらSNS用のOGPタグの記述は終了です。

metaタグは、分かりづらい部分が多いので下記にサンプルソースをダウンロードできるようにしているので、必要な方はご利用ください。

メタタグサンプル

metaタグは、分かりづらい部分が多いので下記に今回追加したメタタグの設置サンプルを記述しておきますので、是非参考にしてください。

<head prefix="og: http://ogp.me/ns#"><!--ogp設定を追加する際は必須-->

<!--noindexの設定-->
<?php if(is_tag() || is_date() || is_search() || is_404()) : ?>
  <meta name="robots" content="noindex"/>
<?php endif; ?>

<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">
<meta property="og:locale" content="ja_JP">

<!--個別ページ用のmetaデータ-->
<?php if( is_single() || is_page() ): ?>
  <meta name="description" content="<?php echo strip_tags( get_the_excerpt() ); ?>" />
  <?php if ( has_tag() ): ?>
  <?php $tags = get_the_tags();
  $kwds = array();
  foreach($tags as $tag){
    $kwds[] = $tag->name;
  }	?>
  <meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">
  <?php endif; ?>
  <meta property="og:type" content="article">
  <meta property="og:title" content="<?php the_title(); ?>">
  <meta property="og:url" content="<?php the_permalink(); ?>">
  <meta property="og:description" content="<?php echo strip_tags( get_the_excerpt() ); ?>">
  <?php if( has_post_thumbnail() ): ?>
    <?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); ?>
    <meta property="og:image" content="<?php echo $postthumb[0]; ?>">
  <?php endif; ?>
<?php else: ?><!--個別ページ以外のメタデータ(TOPページ・記事一覧ページなど)-->
  <meta name="description" content="<?php bloginfo( 'description' ); ?>">
  <?php $allcats = get_categories();
  $kwds = array();
  foreach($allcats as $allcat) {
    $kwds[] = $allcat->name;
  } ?>
  <meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">
  <meta property="og:type" content="website">
  <meta property="og:title" content="<?php bloginfo( 'name' ); ?>">
  <?php
  $http = is_ssl() ? 'https' . '://' : 'http' . '://';
  $url = $http . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
  ?>
  <meta property="og:url" content="<?php echo $url; ?>">
  <meta property="og:description" content="<?php bloginfo( 'description' ) ?>">
  <!--<meta property="og:image" content="挿入したい画像へのパス"-->
<?php endif; ?>

<!-- 省略スタイルシートへのリンクなど -->

</head>

タイトルタグ『<title>』は、一番最初に『functions.php』に記述した『add_theme_support( 'title-tag' );』で自動で出力されるため、記述不要です。

TwitterカードのOGPタグの設定を行う

Twitterカードを使用するには、個別にOGPタグの設定をする必要があります。また、この設定はテーマ公開後に行い反映を確認する必要があります。絶対無くてはいけないというわけではないのですが、できるだけ設定しておきましょう。

基本的な情報はOGPからのデータを読み込みますが、Twitterカード専用の記述をしていきます。

header.phpのheadタグ内に記述
<meta name="twitter:site" content="@Twitterのユーザー名">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@Twitterのユーザー名">

上記の2行をheadタグ内の条件分岐がない場所に記述します。『@Twitterのユーザー名』には、twitterのユーザー名を入力してください。

全体の共通設定が終わったら、他のOGPタグと同じように条件分岐の中にもmetaデータを追記します。

<?php if( is_single() || is_page() ): ?>の中に記述
<meta name="twitter:description" content="<?php echo strip_tags( get_the_excerpt() ); ?>">
<?php if( has_post_thumbnail() ): ?>
<?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); ?>
<meta name="twitter:image:src" content="<?php echo $postthumb[0]; ?>">
<?php endif; ?>
<?php if( is_home() ): ?>の中に記述
<meta name="twitter:description" content=<?php bloginfo( 'description' ) ?>">
<meta name="twitter:image:src" content="<?php echo get_template_directory_uri(); ?>/add/title.png">

Twitterカード用のmetaデータのcontentの値は、他のOGPタグのものと同じでname部分を変更したものを追加します。

headタグ内への記述が完了したら、Twitterカードを利用するためにサイト申請を行い承認を受ける必要があります。

上記のサイトにアクセスしたらURLの入力画面が表示されますので、Twitterカードの申請を行います。

どこかサイトの適当な投稿ページのURLを入力し『Preview card』をクリックして確認しましょう。無事に登録されれば、Twitterカードの設定は終了です。

サイトアイコンの設定を行う

アイコンの設定をすることでサイトが印象に残りやすくなり、サイトのブランド力や認知度の向上が期待できますので是非設定しておきましょう。今回は、下の画像のようなスマホ用のアイコンとブラウザ用のアイコンを設定していきます。

WordPressの管理画面からも設定できますが、一部しか反映されないようなのでheadタグに追加してサイト全体に反映されるように設定しましょう。

スマホ用のアイコンを作成する

まずは、スマホのホーム画面用のアイコン画像から作成・記述していきます。画像編集ソフトでサイトロゴの正方形の画像を作成してください。
※512×512ピクセルのpngファイルでの作成を推奨

画像が完成したら『webclipicon』という名前で保存しサイトの中にアップロードしましょう。

私は、WordPressテーマの中のタイトル画像やno-imageをアップロードする際に作成した『add』フォルダ内にFTPで直接アップロードしていますが、WordPressテーマフォルダの中か管理画面からアクセスした『メディア』の中であればどちらでも構いません。自分の管理し易い場所にアップロードしましょう。

画像のアップロードが完了したら、headタグ内にスマホのアイコン用の記述を行います。

header.phpのheadタグ内に記述
<link rel="apple-touch-icon" href="webclipicon.pngへのパス(URL)" />

headタグ内の記述が完了したら、スマホ用のアイコンの設定は終了です。

パソコンブラウザ用のアイコンを設定する

パソコンブラウザ用のアイコンは、スマホ用のアイコンをベースにアイコン画像( .ico)に変換して作成します。icoという拡張子に対応しているソフトは少ないため、今回はWebサイトを使って変換していきましょう。

アイコンコンバータにアクセスしたら、スマホ用に作成した『webclipicon.png』を選択し『変換』ボタンをクリックしてください。

変換が完了したら変換された画像が一覧で表示されますので、アイコン形式一覧の128×128の画像を『Download』ボタンより保存しましょう。

保存するときは、ファイルの名前を『favicon.ico』という名前に変更して保存してください。※後から変更でも可

『favicon.ico』のファイルが出来上がったら、スマホ用のアイコンのときと同じようにテーマフォルダ内か、管理画面のメディアに画像をアップロードしましょう。

画像のアップロードが完了したら、headタグ内にスマホのアイコン用の記述を行います。

header.phpのheadタグ内に記述
<link rel="shortcut icon" href="『favicon.icoへのパス(URL)』" />

headタグ内に記述したら、設定は完了です。ローカルもしくはテーマをアップしているサイトで画像がきちんと表示されているか確認しましょう。

以上で、header内の記述は全て完了です。今回記述したもの以外にも必要性に合わせてheadタグ内にデータを追加していき、ロボットに適切な情報を伝えることでサイトの上位表示に繋がりますよ。

これでWordPressのテーマとして基本的な機能は全て整いましたので、実際に運用することができます。

しかし、今の状態ではTOPページとカテゴリページの表示が同じだったり固定ページのデザインが全て統一されたりといった状態です。次回は、WordPressのテーマで表示を条件分岐させるためのテンプレートの作成方法についてご紹介します。

下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。

7.までで作成したテーマ ダウンロード