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

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()): ?>
<meta name="robots" content="noindex"/>
<?php elseif(is_date()): ?>
<meta name="robots" content="noindex"/>
<?php elseif(is_search()): ?>
<meta name="robots" content="noindex"/>
<?php elseif(is_404()): ?>
<meta name="robots" content="noindex"/>
<?php endif; ?>

上記の記述は『if(is_tag() || is_archive())』とまとめて記述しても良いのですが、管理しやすいように分けて記述しています。

最初の記述は、if関数で条件分岐を行い2つ目からは『elseif』で追加していき最後に『endif』で条件分岐を終わらせましょう。

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

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

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 endif; ?>

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

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

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

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

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

topページ用のメタデータ

headタグ内に記述

<!--TOPページ用metaデータ-->
<?php if( is_home() ): ?>
<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; ?>

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

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

※TOPページだけでなく、カテゴリページやタグページなどの一覧ページにも出力したい場合は、上記のソースコードの『<?php if( is_home() ): ?>』を下記のコードにすることで置き換えることができます。

<?php if( !is_single() || !is_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 endif; ?>』のphpの中に記述していきましょう。

<?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部分の書き方は同じです。

TOPページ用のOGPタグを記述する

TOPページ用のOGPタグも、通常のメタタグを条件分岐した『<?php if( is_home() ): ?>~<?php endif; ?>』の中に記述しましょう。

<?php if( is_home() ): ?>の中に記述

<meta property="og:type" content="website">
<meta property="og:title" content="<?php bloginfo( 'name' ); ?>">
<meta property="og:url" content="<?php home_url( '/' ); ?>">
<meta property="og:description" content="<?php bloginfo( 'description' ) ?>">
<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/add/title.png">

TOPページは、記事ではないので『<meta property=”og:type” content=”website”>』でサイトとして出力しています。

また、URLは『<?php home_url( ‘/’ ); ?>』でトップページのURLを呼び出し、残りの設定は、通常のメタデータと同じようにcontentsを記述しましょう。

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

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

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

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

メタデータサンプル
ダウンロード
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のテーマで表示を条件分岐させるためのテンプレートの作成方法についてご紹介します。