WordPressでSEOを意識したhead内の書き方とは？
WordPressを使ってブログを書いているとSEO対策は常に考えてしまうもの。特にhead内はtitle(タイトル)やdescription(説明文)のほかにもSEOに重要な情報が詰まっています。今回はSEO対策ができたhead内の書き方を説明していきます。
※すぐにコピペで利用したい人は以下の順序で設定してください。この設定にはAdvanced Custom Fieldsの設定が必須です。
WordPressでSEO対策ができたhead内の書き方
それではさっそくhead内をどのように書けばいいのか見ていきましょう。下のコードをhead内にコピペしてください。
<!-- schema.orgで構造化マークアップ -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<!-- 文字エンコーディング情報を出力 -->
<meta charset="<?php bloginfo( 'charset' ); ?>">
<!-- 電話番号やメールアドレスを認識させない -->
<meta name="format-detection" content="telephone=no,address=no,email=no">
<!-- レスポンシブ対応 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- IEでも常に標準モードで表示 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEOの設定テンプレート -->
<?php get_template_part('seo-header'); ?>
<!-- OGPの設定テンプレート -->
<?php get_template_part('ogp'); ?>
<!-- スタイルシートURLを出力 -->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<!-- wp_headはテーマの</head>タグ直前に必ず挿入します -->
<?php wp_head(); ?>
</head>
1-1 schema.orgで構造化マークアップ
schema.orgとはサイトの構造をより詳しく検索エンジンに伝える記述法のこと。head内に書けばいいというわけではなく、headerやfooter、コンテンツとなる場所、サイドバーなどに書くことで検索エンジンに細かく内容を伝えることができます。
詳しく知りたい方はこちらの記事が分かりやすかったです。
・schema.orgとは?
1-2 文字エンコーディング情報を出力
wordpressでは独自の関数がたくさん用意されています。今回のように書くことで出力されたときには、以下のように表示されます。
<meta charset="UTF-8">
1-3 電話番号やメールアドレス、住所を認識させない
電話番号やメールアドレス、住所を入力したときに自動でリンクとして認識されてしまう場合があります。それを防ぐために書いておきます。
1-4 レスポンシブ対応
スマートフォンやタブレットなど機種や画面の大きさによってレスポンシブ対応させるために必要になります。
1-5 IEでも常に標準モードで表示
IEでは過去のバージョンで見せる機能がついていますが、常に標準モードで見せるために書いておきます。
ここまでは割と一般的な書き方だと思います。SEOを意識するのであれば次に説明するSEOの設定テンプレート、OGPの設定テンプレートが重要になります。それではまずSEOの設定テンプレートについて説明していきます。
※OGP設定テンプレート(twitterカード込み)はこちらの記事にまとめました。
・SNSで効果的に記事を広めるための正しいOGP設定とは？ | 夢みるゴリラ
1-6 SEO設定のテンプレート
今回はseo-header.phpがある前提で説明していくので、先にseo-header.phpというファイルを作っておきましょう。メモ帳でもいいので、名前を「seo-header」にして拡張子をphpにして保存してください。
こんな感じですね。
seo-header.phpを作成したら下のコードをコピペしてください。ちなみにピンク色のコードがAdvanced Custom Fieldsを使っている箇所です。
それでは上から順に説明していきます。
<?php
<!--functionsに記載している定義にnoindexをつける-->
if( is_noindex_page() ): ?>
<meta name="robots" content="noindex,follow">
<?php endif; ?>
<!--（１）トップページ-->
<?php if(is_home() || is_front_page()): ?>
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<!--（２）single.php-->
<?php elseif(is_single()): ?>
<?php if(get_field("originalTitle")): ?>
<title><?php echo the_field('originalTitle'); ?></title>
<?php else: ?>
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<?php endif; ?>
<?php if(get_field("originalDescription")): ?>
<meta name="description" content="<?php echo the_field('originalDescription'); ?>" />
<?php $customfield = get_post_meta($post->ID, 'originalDescription', true); ?>
<?php elseif(empty($customfield) && has_excerpt( $post->ID )): ?>
<meta name="description" content="<?php echo original_description(); ?>">
<?php else: ?>
<meta name="description" content="<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<?php
$des = get_the_content();
$des = strip_tags($des);
$des = str_replace(' ', " ", $des);//改行を除去
$des = str_replace(array("\r\n","\r","\n"), '', $des);//余計な文字列を除去
$desp = mb_substr($des, 0, 120, "UTF-8");
echo $desp;
?>
<?php endwhile; ?>
<?php endif; ?>" />
<?php endif; ?>
<!--（３）category.php-->
<?php elseif(is_category()): ?>
<?php if(!is_paged()): ?>
<?php
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
?>
<title><?php single_cat_title( '', true ); ?> | <?php bloginfo('name'); ?></title>
<meta name="description" content="<?php
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
$text = category_description();
$text = strip_tags($text);
$text = mb_substr($text, 0, 120, "UTF-8");
echo $text;
?>" />
<?php else: ?>
<title><?php show_page_number(''); ?>ページ目 <?php single_cat_title( '', true ); ?> | <?php bloginfo('name'); ?></title>
<?php endif; ?>
<!--（４）固定ページ-->
<?php elseif(is_page()): ?>
<?php if(get_field("originalTitle")): ?>
<title><?php echo the_field('originalTitle'); ?></title>
<?php else: ?>
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<?php endif; ?>
<?php if(get_field("originalDescription")): ?>
<meta name="description" content="<?php echo the_field('originalDescription'); ?>" />
<?php else: ?>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php endif; ?>
<!--（５）検索結果ページ-->
<?php elseif(is_search()): ?>
<title>検索結果 | <?php bloginfo('name'); ?></title>
<!--（６）404ページ-->
<?php elseif(is_404()): ?>
<title>お探しのページはございません | <?php bloginfo('name'); ?></title>
<!--（７）その他-->
<?php else: ?>
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php endif; ?>
<?php
<!--canonicalタグの設定-->
<!--// 404ページと検索ページでなければ表示-->
if(!is_404() && !is_search()){
echo '<link rel="canonical" href="https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'].'">';
}?>
1-6-1 functionsに記載している定義にnoindexをつける
SEOの効果を高めるためには検索エンジンが訪問するページを絞る必要があります。あまり見られていないページに何度も検索エンジンが訪れるなら、その分の労力を見られているページに回したほうがSEOの効果が高まります。上のコードをseo-header.phpにコピペしたら、次はfunctions.phpを開いて、以下のように書いてください。
if ( !function_exists( 'is_noindex_page' ) ):
function is_noindex_page(){
return ( is_month()) || //月のアーカイブページはインデックスに含めない
is_date() || //日のアーカイブはインデックスに含めない
is_tag() || //タグページをインデックスしたい場合はこの行を削除
is_search() || //検索結果ページはインデックスに含めない
is_404() || //404ページはインデックスに含めない
is_attachment(); //添付ファイルページも含めない
}
endif;
これであまり重要ではないページがインデックスされなくなります。
1-6-2 （１）トップページ
トップページは管理画面の設定で入力した内容がそのまま反映されます。これは特に説明することがないでしょう。ぼくのページだとトップページは下で書いたとおりhead内に反映されています。
1-6-2 （２）single.php
投稿ページはここで書かれたことがhead内に反映されることになります。いろいろ書いてありますが、まとめると以下のようになります。
カスタムフィールドの書いてあることが一番優先されます。description(説明文)では、①カスタムフィールド②抜粋欄③本文の順で反映するようになっています。
ピンク色のコードのところにカスタムフィールドが使われています。titleのフィールド名を「originalTitle」、descriptionのフィールド名を「originalDescription」としてAdvanced Custom Fieldsで設定していないと反映されないので注意してください。
Advanced Custom Fieldsの設定方法がわからない方はこちらの記事をどうぞ。
・Advanced Custom Fieldsの使い方
また抜粋欄に書いたことをdescriptionに反映させるため、functions.phpを開いて下のコードを加えてください。
function original_description() {
if(get_the_excerpt()) {
$description = get_the_excerpt();
}
return $description;
}
1-6-3 （３）category.php
必要かどうかは分かりませんがカテゴリーページが表示されたときは、titleにはカテゴリ名が反映され、descriptionにはカテゴリーの説明文が反映されるようになっています。
カテゴリページの２ページ以降はページ数とカテゴリー名、それからタイトルが表示されるようにしています。ページ数を表示させるために以下のコードをfunctions.phpに加えてください。このコードを加えてないとカテゴリーページの２ページ目を見たときに画面が真っ白になってしまうので必ず書いてください。
function show_page_number() {
global $wp_query;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$max_page = $wp_query->max_num_pages;
echo $paged;
}
1-6-4 （４）固定ページ
固定ページの設定は、ほとんど投稿ページの設定と同じです。一部違うところはdescriptionのところ。①カスタムフィールド②管理画面の説明文の順で反映されます。投稿ページと違って、抜粋欄や記事本文からdescriptionに反映させていません。
1-6-5 残りのページについて
検索結果ページや404ページは管理画面で設定したtitleとdescritionが反映されるように設定してますが、noindex設定をしているためあまり重要ではありません。それ以外のページは管理画面で設定したtitleとdescriptionが反映されるようになっています。
canonicalタグの設定
canonicalタグは、同じ記事が複数存在するときに検索エンジンからページ評価を１つの記事に集中させる役割があります。例えばパソコンとスマホで同じ記事でもurlが分かれてしまう場合に使えます。SEO効果だけではなく、ペナルティを受けないためにも必要な設定です。
このコードを使う場合はwordpressが自動で出力するcanonicalタグを止める必要があります。functions.phpを開いて以下のコードを加えてください。
remove_action('wp_head', 'rel_canonical');
ここまでのまとめ
以下の手順にそって設定漏れがないか確認してみましょう。
1.head内にここのコードをコピペ
2.seo-header.phpを作って、ここのコードをコピペ
3.Advanced Custom Fieldsでフィールド名を設定
4.function.phpに1-6-1と1-6-2、1-6-3、1-6-5のコードを追加
まだOGP設定をしていないのでうまく動作はしません。OGP設定をしないで動かしたいのであればhead内から下のコードを削除してください。そうすれば正常に動きます。
<!-- OGPの設定テンプレート -->
<?php get_template_part('ogp'); ?>
記事が長くなってしまったのでOGP設定テンプレート(twitterカード込み)は次の記事で説明しています。
ちなみに似たような設定はAll in One SEO Packプラグインを使えば簡単にできます。もちろんOGP設定もtwitterカードの設定もできるので多少重くても手軽にSEO対策をしたいならAll in One SEO Packで十分でしょう。
プラグインに頼らず、軽量かつ自分用にhead内をカスタマイズしたい人は今回を参考にしてみてください。
