[WordPress]ワードプレスサイトで日々の更新を楽にする「ヘッダ内最適化」をする方法。

ワードプレスサイトで日々の更新を楽にする「ヘッダ内最適化」をする方法。
プラグイン「All in One SEO Pack」などのプラグインを使わずにできるヘッダ内SEOのカスタム方法を紹介。


ワードプレスでSEOするなら必須といってもいい、プラグイン「All in One SEO Pack」
便利なのですが、僕は少しでも<head>内はスッキリキレイにしたいので、できるだけプラグインは使いたくないのです。(当サイトでは沢山使ってますが。。)

今回はその「All in One SEO Pack」などのプラグインを使わずに自分でワードプレスをカスタムしてできる、ヘッダ内の最適化を説明していきたいと思います。
題して「ワードプレスでヘッダ内最適化」 大げさなタイトルですが。。。
「All in One SEO Pack」などを使っての更新さえ面倒だという方にオススメです。

「ワードプレスでヘッダ内最適化」概要

  • タイトルは記事タイトルのみを表示。(SEO的に意味をなさないサイト名の場合ははずしてもいいかも。当サイト名のDEVOELNなどもそうです。。)必要な場合は表示させておいて下さい。
  • デスクリプションはカテゴリ名と記事抜粋を表示します。(もしくはタイトルでもいいかと思います。)
  • キーワードには選択したタグやカテゴリが入るようにします。
    複数選択した場合も複数表示します。
    英語表記も取得(タグやカテゴリのスラッグも取得するのですが、スラッグを日本語にしている場合は文字化けするので注意。スラッグを英語表記にしている場合に有効かと思います)。

今回手順には入れていませんが、他にも追加したい場合はカスタムフィールドを活用するといいですね。

これで記事を書く更新頻度の高い場合は、更新が少し楽になるかと思います。

「ワードプレスでヘッダ内最適化」ビフォーアフター

まずはじめに、このちょっとしたカスタムをする前のデフォルト状態の<head>とカスタム後の<head>内を見比べてみましょう。

何もしない状態ですと以下のようになっています。

ちなみにワードプレスのバージョンは3.0.3でテーマはデフォルトの「twentyten」を使っての説明になります。

<head>
<meta charset="UTF-8" />
<title>記事タイトルが入ります。 | サイト名が入ります。</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://example.com/wordpress/wp-content/themes/twentyten/style.css" />
<link rel="pingback" href="http://example.com/wordpress/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="サイト名が入ります。 &raquo; フィード" href="http://example.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="サイト名が入ります。 &raquo; コメントフィード" href="http://example.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="サイト名が入ります。 &raquo; タイトルが入ります。 のコメントのフィード" href="http://example.com/example/2/feed/" />
<script type='text/javascript' src='http://example.com/wordpress/wp-includes/js/comment-reply.js?ver=20090102'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wordpress/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='サイト名が入ります。' href='http://example.com/' />
<link rel='start' title='最初に書いた記事のタイトルが入ります。' href='http://example.com/webtool/1/' />
<link rel='prev' title='前に書いた記事のタイトルが入ります。' href='http://example.com/example/1/' />
<link rel='next' title='次に書いた記事のタイトルが入ります。' href='http://example.com/example/2/' />
<meta name="generator" content="WordPress 3.0.3" />
<link rel='canonical' href='http://example.com/example/2/' />
<link rel='shortlink' href='http://example.com/?p=2' />
</head>

これがヘッダ内最適化をすると以下のようになります。

<head>
<meta charset="UTF-8" />
<meta http-equiv="content-Script-Type" content="text/javascript" />
<meta http-equiv="content-Style-Type" content="text/css" />
<title>記事タイトルが入ります。</title>
<meta name="description" content="【カテゴリ名が入ります。】抜粋に書いたテキストが入ります。" />
<meta name="keywords" content="選択したカテゴリ名,選択したタグ名,選択したカテゴリスラッグ,選択したタグスラッグ," />
<link rel="stylesheet" type="text/css" media="all" href="http://example.com/wordpress/wp-content/themes/twentyten/style.css" />
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed/" title="サイト名が入ります。 RSS フィード" />
<link rel="pingback" href="http://example.com/wordpress/xmlrpc.php" />
<link rel='prev' title='前に書いた記事のタイトルが入ります。' href='http://example.com/example/1/' />
<link rel='next' title='次に書いた記事のタイトルが入ります。' href='http://example.com/example/2/' />>
<link rel='canonical' href='http://example.com/example/2/' />
<link rel='shortlink' href='http://example.com/?p=2' />
</head>

というようになります。必要なものは追加されたし、かなりスッキリしたんじゃないでしょうか?
ではその手順を順番に説明していきます。

「ワードプレスでヘッダ内最適化」項目

ヘッダ内の書き換え

少し面倒かもしれませんが、まずはヘッダ内を少し触ります。
head.phpでもよいのですが、今回はシングル(単一)記事のみに有効とするように説明していきます。

head.phpをコピーしてhead-single.phpを作成します。
このhead-single.phpを読み込むにはsingle.phpを開いてincludeしてあげます。

以下のような、single.phpの先頭の行の

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

を以下のように書き換えます。

<?php include( TEMPLATEPATH . '/header-single.php' ); //single.php用のヘッダーを読み込む ?>

これでシングル(単一)記事のみにhead-single.phpの内容が読み込まれます。

そのファイル(head-single.php)を開いて、1行目から</head>までを以下のように書き換えます。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />

<title><?php the_title() ?></title>

<meta name="description" content="【<? //選択したカテゴリ名を取得 php $category = get_the_category(); echo $category[0]->cat_name; ?>】<? //抜粋を取得 php the_excerpt(); ?>" />
<meta name="keywords" content="<? //選択したカテゴリ名 php
$postcategory = get_the_category();
if ($postcategory) {
foreach($postcategory as $category) {
echo $category->name . ','; 
}
}
?>
<? //選択したタグ名 php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo $tag->name . ','; 
}
}
?>
<? //選択したカテゴリスラッグ php
$postcategory = get_the_category();
if ($postcategory) {
foreach($postcategory as $category) {
echo $category->slug . ','; 
}
}
?>
<? //選択したタグスラッグ php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo $tag->slug . ','; 
}
}
?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url') ?>" title="<?php printf( __( '%s RSS フィード' ), wp_specialchars( get_bloginfo('name'), 1 ) ) ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head();?>
</head>

不必要であろうlinkタグやジェネレータタグなどを消します。

次にlinkタグやなどを削除します。
「twentyten」フォルダ内のfunctions.phpを開いて1行目に以下を記述します。

<?php 
remove_action('wp_head', 'index_rel_link'); //link rel='index' タグを削除
remove_action('wp_head', 'parent_post_rel_link', 10);
remove_action('wp_head', 'start_post_rel_link', 10); //link rel='start' タグを削除
remove_action('wp_head', 'adjacent_posts_rel_link', 10); // Post Relational Links
remove_action('wp_head', 'rsd_link'); //Really Simple Discovery
remove_action('wp_head', 'wlwmanifest_link'); //Windows Live Writer
remove_action('wp_head', 'wp_generator'); //WordPress Generator
remove_action('wp_head', 'feed_links_extra',3,0); //comment feed
?>

これで不必要であろうタグがなくなります。
いやいや、このタグは必要でしょ!という場合は上記に書きましたphpより、表示したい1列を削除してください。

続いて同functions.phpをの84行目あたりを以下のようにコメントアウトします。

// add_theme_support( 'automatic-feed-links' );

これでコメントのフィードが消えます。

しかしこれだと通常のRSSフィードも消えてしますので、上記<head>内の書き換えでは以下を追加してあげています。

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url') ?>" title="<?php printf( __( '%s RSS フィード' ), wp_specialchars( get_bloginfo('name'), 1 ) ) ?>" />

これでhttp://example.com/feed/というフィードのみが生成されます。

他のカテゴリのフィードも消えてしまいますので、必要な場合はコメントのフィードも表示されてしまいますが、上記function.phpの
【remove_action(‘wp_head’, ‘feed_links_extra’,3,0);】の記述と【add_theme_support( ‘automatic-feed-links’ );】のコメントアウトはしないでください。

メタタグ、デスクリプションを抜粋内の内容を取得して表示

続いてdescriptionですが、これは上記<head>内の書き換えで記述している抜粋を取得するようにしています。

抜粋とは以下画像のワードプレス記事投稿画面、記事本文下の抜粋のことです。

この抜粋内に記述した内容を

<? php the_excerpt(); ?>

で取得し表示するようにしています。
ただこのphpテンプレートタグを書くだけでは<p>タグも取得してしまいます。
さらに「twentyten」テーマを使用していると、自動的に続きを読むリンクも取得するようです。
なのでこれらを解除します。

まず抜粋の<p>タグを表示しないように、
wp-includes/default-filters.php内の127行目あたりにある add_filter(‘the_excerpt’, ‘wpautop’); を以下のようにコメントアウト。

// add_filter( 'the_excerpt',     'wpautop'          );

これで<p>タグは出てこなくなります。

続いて「twentyten」テーマを使用していると、自動的に続きを読むリンクを取得するのを解除します。

「twentyten」フォルダ内のfunctions.phpを開いて273行目あたりの
add_filter( ‘get_the_excerpt’, ‘twentyten_custom_excerpt_more’ ); を以下のようにコメントアウトします。

// add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );

これで続きを読むリンクが自動的には出てこなくなります。

※この二つは全てに適用されますので、the_excerpt を使用した場合、<p>タグも、続きを読むリンクも自分でカスタムしない限り、自動的には表示されなくなります。

長くなりましたが以上です。
説明では長くなりましたがそんなに難しくないと思うのでよければ試してみてください。
簡単な感じなんでもっとこだわりたい方は色々試してみてはどうでしょう。

WordPress レッスンブック 3.x対応

著者/訳者:エビスコム

出版社:ソシム( 2010-09-08 )

定価:¥ 2,940

Amazon価格:¥ 2,940

WordPress 3 サイト構築スタイルブック

著者/訳者:エ・ビスコム・テック・ラボ

出版社:毎日コミュニケーションズ( 2010-09-11 )

定価:¥ 2,940

Amazon価格:¥ 2,940