「All in One SEO Pack」を外してOGP設定などを行った際の流れや参考にしたサイト

ブログ開設時から長いこと使用してきた「All in One SEO Pack」。SEO対策としておすすめされることの多いWordPressプラグインですね。

しかし、それ自体が重いなんて話もあるようですし、僕は多岐にわたる機能を使いこなせていたわけでもないので、必要な分は自分で設定し、それでも足りないところを別のプラグインで補うことにしました。

この記事では、その際に参考したサイトの紹介などをしていきたいと思います。ちなみに、投稿時のワードプレス本体のバージョンは4.7.4となっています。

*記事内にはphpファイルの編集に関する記述もありますが、エラーが発生すると画面が真っ白になったりログインできなくなったりする可能性があります。

  1. 「All in One SEO Pack」で使用していた機能
  2. canonicalの設定
  3. descriptionの設定
  4. 個別の投稿・固定ページ以外のページにおけるnoindexの設定
  5. OGPの設定
  6. おわりに

「All in One SEO Pack」で使用していた機能

「All in One SEO Pack」(ver2.3.12.2.1)で有効化していた機能は次の通りです。

  • Canonical URLs
  • 「Display Settings」
  • 「Noindex Settings」
  • 詳細を自動生成する
  • 「Social Meta」
  • 「robots.txt」
  • 「XMLサイトマップ」

robots.txtは内容をコピペするだけでしたし、XMLサイトマップの設定と送信については「Google XML Sitemaps」を利用することにしたため、それ以外をプラグインなしで設定することにしました。

つまり、<link rel=”canonical” href=”〇〇”><meta name=”description” content=”〇〇”><meta name=”robots” content=”noindex,follow”>、Facebook・TwitterのOGPタグを<head>~</head>内に出力させるようにしたというわけです。

詳しくは以下で。

canonicalの設定

「URLの正規化」を図ります。canonicalについては、canonicalとは〜URLの正規化でSEOのマイナス評価を避けよう|ferret [フェレット]が詳しくて参考になりました。

使用しているワードプレステーマによっては、<link rel=”canonical” href=”〇〇”>が最適化されたうえで表示されるよう設定されているものもあるかと思いますが、当ブログのテーマにはその機能がありません。

そのため、以下の2つのサイトの記事に載っていたコードを参考に、canonical.phpを作成し、head要素内で呼び出すことにしました。

「Web Shufu」さんのコードをベースに「ウェビメモ」さんのコードを加えた感じになっています。まんまコピペに近いので、コード内容については上記記事を参考にしてください。

なお、ワードプレスではデフォルトで<link rel=”canonical” href=”〇〇”>を吐き出しますが、自分で設定したように吐き出させたいので、今回は以下の記述を<functions.php>に記述しています。

// link rel="canonical" を自動出力させない
remove_action('wp_head', 'rel_canonical');

descriptionの設定

続いてメタディスクリプションの出力です。プラグイン利用時は、投稿ごとに個別でディスクリプションを設定・出力させることができ、設定しない場合でも自動で本文の先頭〇〇文字が<meta name=”description” content=”本文の先頭〇〇文字”>として出力されていました。

これをプラグインなしでどうするか。特に、投稿ごとに個別に設定する点について、カスタムフィールドを使えばできそうだなと思いつつも、知識も技術もなく悩んでいました。

が、WordPressプラグインなしで記事毎にSEO対策をする方法。 – MORIAWASE(モリアワセ)という記事を見つけることができました。

書かれている内容が、求めていたものにドンピシャでした。この記事がなければ、僕は「All in One SEO Pack」を停止させることはできなかったことでしょう。

紹介されているコードをfunctions.phpにコピペするだけで、投稿画面に次の画像のような項目が登場します。

上からメタキーワード、メタディスクリプション、noindex、nofollowを指定することができ、それが<meta name=”description” content=”入力した文章”><meta name=”robots” content=”noindex,follow”>などとして出力されるのです。

仮に全て空白にした場合は、<meta name=”description” content=”本文の先頭120文字”>のみが出力されます。先頭何文字にするかはコード内の数字をいじれば変更可能です。

僕は文字数に関しては変えていませんが、コード最後の部分に少し記述を追加しています。

// 元のコード
echo '<meta name="description" content="'.description().'">';
// 変更後のコード
echo '<meta name="description" content="'.esc_html( description() ).'">';

これは、タイトル内でダブルクォーテーションを強調のために使用した記事が過去にあったため、そのダブルクォーテーションをエスケープするための対処です。

そうそう、元記事内にも記載されていますが、出力の際は、出力したい場所に次のコードを記述します。

<?php custom_seo_meta(); ?>

僕はheader.phpのhead要素内に記述しています。

なお、「All in One SEO Pack」では投稿画面で<Social Settings>というツイッターやフェイスブック上での記事タイトルやディスクリプションを設定できましたが、僕はほとんど使っていなかったのでこのコードで事足りています。

コードを公開されているご本人が言うように「かなり使い勝手が良いコード」だと思いますので、気になる方は上のリンクからチェックしてみてください。

*作業の際はプラグインを有効化したままの方が過去のディスクリプションをコピペできるので楽かもしれません。僕は動作確認もしたかったので、作業が終わるまで「is_user_logged_in()」関数を用いて出力していました。

個別の投稿・固定ページ以外のページにおけるnoindexの設定

上の項目のコードにより、個別の投稿や固定ページでnoindexやnofollowを設定できるようになりました。次は、それ以外のアーカイブページなどでの設定についてです。

どのページをnoindexにするかは人それぞれの判断だと思いますが、当ブログではこんな感じのコードを書いています。(投稿日時点)

if ( is_archive() && !is_category(array('hige', 'blog', 'selective-mutism')) ||
     is_search() ||
     is_paged() ||
     is_attachment() 
   ) {
        echo '<meta name="robots" content="noindex,follow" />';
     }

「特定の3つのカテゴリーを除くアーカイブ系ページ」か「検索結果ページ」か「2ページ目以降のページ」か「添付ファイルページ」のどれかに当てはまれば<meta name=”robots” content=”noindex,follow” />を出力するようにしています。

プラグインを使っていた時は全カテゴリをnoindexにしていたのですが、今回「ヒゲ脱毛・ブログ運営・場面緘黙」に限ってはindexさせてみました。特に強いこだわりがあるわけではないので、いつかnoindexにするかもしれません。

OGPの設定

最後にOGPに関するタグの設定です。その出力について、個別の投稿や固定ページ以外のURL取得をどうすればいいのか悩んだのですが、WordPressでの og:url 取得方法 改良版メモ – Qiitaのコードを使うことにしました。

「description」の項で紹介したリンク先のコードのコピペで出力できるディスクリプションと合わせ、こんな感じのogp.phpを作り、head要素内で呼びだしてます。完全に当ブログ仕様のうえ、試行錯誤のうえ自分が理解しやすいように書いたのでコードも汚いですが。

<?php

// アイキャッチ画像の有無で指定する画像を変える
function get_og_thumbnail() {
    if( has_post_thumbnail() ) { // あるときはアイキャッチ画像を
    $og_thumbnail = wp_get_attachment_url( get_post_thumbnail_id() );
}  else { // ないときは特定の画像を
    $og_thumbnail = get_template_directory_uri()."/images/2017obolog-eyecatch.png";
}
    return $og_thumbnail;
};

// 現在表示中のページURLを取得
// 参考:http://qiita.com/devmgn/items/b83feb194c1f04931851
function get_og_url() {
  $protocol = is_ssl() ? 'https://' : 'http://';
  $og_url   = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
  return $og_url;
};

// OGPタグの出力
// 注意:URLやapp_idなどは適宜変更してください
if( is_singular() ) { 
   echo '
    <meta property="og:type" content="article" />
    <meta property="og:title" content="'.wp_get_document_title().'" />
    <meta property="og:url" content="'.get_the_permalink().'" />
    <meta property="og:image" content="'.get_og_thumbnail().'" />';
} else { 
    if ( (is_home() || is_front_page()) && !is_paged() ) {
     echo '
      <meta property="og:type" content="website" />
      <meta property="og:title" content="'.wp_get_document_title().'" />' ;
     }
    else {
     echo '
      <meta property="og:type" content="article" />
      <meta property="og:title" content="'.wp_get_document_title().'" /> ';
     }
   echo '
    <meta property="og:url" content="'.get_og_url().'" />
    <meta property="og:image" content="'.get_template_directory_uri().'/images/2017obolog-eyecatch.png" />';
  }
echo '
<meta property="og:description" content="'.esc_html( description() ).'" />
<meta property="og:site_name" content="'.get_bloginfo('name').'" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="681330601999811" />';

if( is_singular() ) {
   echo '
    <meta property="article:publisher" content="https://www.facebook.com/jimeishi.net" />
    <meta property="article:published_time" content="'.get_post_time('Y-m-d').'" />
    <meta property="article:modified_time" content="'.get_post_modified_time('Y-m-d').'" />
    <meta name="twitter:title" content="'.wp_get_document_title().'" />
    <meta name="twitter:url" content="'.get_the_permalink().'" />
    <meta name="twitter:image" content="'.get_og_thumbnail().'" />';
} else { 
   echo '
    <meta name="twitter:title" content="'.wp_get_document_title().'" />
    <meta name="twitter:url" content="'.get_og_url().'" />
    <meta name="twitter:image" content="'.get_template_directory_uri().'/images/2017obolog-eyecatch.png" />';
  }
echo '
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="'.esc_html( description() ).'" />
<meta name="twitter:site" content="@njimeishi" />
<meta name="twitter:domain" content="jimeishi.net" />
';

基本的に、個別の投稿か固定ページ(is_singular())のときはコレを出力、そうでないときはコレを出力、全てのページ共通でコレを出力、的な感じで書いています。

が、出力させるタグの順番に無駄にこだわった(恐らく無意味)ため大変見づらくなってしまいました。もっとまともな書き方はあるはずです(汗)get_the_permalink()get_og_url()に統一できそうですしね。

上でも書いたように、当記事「description」の項で紹介したディスクリプションの利用が前提です。それを使わない場合の記述方法は分かりません。すいません。「ワードプレス OGP プラグインなし」あたりで検索すると参考になるサイトが見つかるかと思います。

そうそう、コード内でページタイトルの取得にwp_get_document_title()を使っていますが、これはfunctions.phpadd_theme_support( ‘title-tag’ );の記述があることを前提にしています。最近のワードプレステーマならだいたい大丈夫……なのかな?

ただ、このwp_get_document_title()を使うとトップページでは「タイトル – サイトのディスクリプション」と出力されてしまうので、functions.phpにおいて以下のようにフィルターで対処しています。

function obolog_document_title_parts( $title ){
    unset( $title['tagline'] );
}
add_filter( 'document_title_parts', 'obolog_document_title_parts' );

また、記事ページなどにおいて「タイトル | サイト名」と区切り線を縦棒にするために、次のようにフィルターで対処しています。好みの問題です。

function obolog_title_separator( $sep ){
    $sep = '|';
    return $sep;
}
add_filter( 'document_title_separator', 'obolog_title_separator' );

このwp_get_document_title()のフィルターフックについては、以下の記事が分かりやすかったです。

忘れていましたが、OGPの設定に際してheader.phpでこんな記述もしています。

// 当ブログはHTML5なのでprefixで。ただ、サイトによって微妙に記述内容が違ったりでよく分からない。
<head prefix="og: http://ogp.me/ns# <?php if((is_home() || is_front_page()) && !is_paged() ){ echo 'fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"'; }else{ echo 'fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"'; } ?>>

おわりに

以上、「All in One SEO Pack」を外して諸々の項目を設定した流れや参考にしたサイトを紹介してきました。

ワードプレスは利用者が非常に多く、それに付随して情報量も多いので、僕のような素人でも当記事に書いてあるようなことを実践することができました。とても参考になる記事を公開してくださっていた方々には感謝しています。

最後に繰り返しとなりますが、phpファイルを下手にいじるとエラーが出てサイトが表示できなくなったりする可能性があるので、すぐ復旧できるようにしておくことが大切です。この記事に辿りつくような方は大丈夫だと思いますが。