さよならAll in One SEO Pack!トップページOGPも正しくしたいから

トップページのOGPだって大切だ!条件分岐ogpタグで解決!

All in One SEO Packといえば・・・、

  • SEOには必須のメタキーワードや、メタディスクリプションなどのmetaタグ、
  • 拡散の為の、ソーシャルメディアのFacebookやTwitterなどのOGP設定、
  • そのOGP設定を投稿毎に設定できるように投稿画面に設定画面まで出てきてくれる

などなど、WordPressの初心者にとって、とてもありがたい、それこそ神的な高機能プラグインですよね。

それを否定するつもりはありません。
でも、人間の欲というものには限りがないんですね~^^;

実はこちらのサイトでは、最初からヘッダーに直書きしていたのですが、All in One SEO Packをとても良く使っていらっしゃる方が多いようなので、トップサイトの方で、試しにAll in One SEO Packをしばらく使ってみました。

しかし、生成されるOGPを眺めていて、いろいろと突っ込みどころがありまして・・やはり、この際気になるならやめよう、という結論になったわけです。

何がそんなに気になったのか?

1.トップページがブログ一覧の時、そのサイト全体のOGPディスクリプションではなく、最新記事のものになっている

WordPressはもともとブログサイト用のプログラムですから、トップページを特に作らなくても、サイトのトップとか、HOMEとか言われるページは自動的にブログ一覧で表示され、そのまま使用している方も多いと思います。

投稿ページはちゃんとしたOGPが生成されるのですが、上の場合のトップページのOGPは一覧の最新投稿のものが生成されてしまっています。

もし、ブログ記事を読んで下さって、他にどんな記事書いてるんだろう?と訪問者さんがトップページにも足を運んで下さり、おお、このサイト役に立ちそう♪とトップページからシェアをしてくれた場合・・・

おっとぉ、

URLはサイトのものなのに、ディスクリプションは最新投稿』のシェア投稿になっちゃう

のであります^^;
これは、Facebookだろうと、Twitterだろうと、同じことが起こります!

だいじょうぶ!
だって、トップページにシェアボタン置いてないから!?(笑)

いや、昨今ではスマートフォンであれば、全くボタンのないサイトでもシェアできちゃいますし、PCからだって記事URLをコピペとか、Chromeの拡張機能とか、油断はできません(笑)

先日もどこかの奇特な方が、トップサイトの拙いブログのトップページを、なんとはてブして下さったのですが、その時の「ちゃんとしとくべきだった感」たら半端ありませんでしたOTL

そう、そのはてブを見に行くと、サイトのURLのブックマークにも関わらず、ブックマークされているサイトの「ディスクリプション」は最新投稿の内容(下図)・・どんだけピンポイント内容のサイト?って感じになっちゃってる・・・(°∀°;)

ブックマークはサイトURL、ディスクリプションは最新投稿ディスクリプション

シェアしていただけるのはホント有難いのですけど・・^^;
こりゃ何とかしなければならん、と痛感したのでございます^^;

2.og:typeがいまだblog

更に、トップページのog:type(シェアするURLがどのタイプかをうたうもの。必須事項)が既にFacebookでは使われなくなった、blog。
サイトに対するtypeは「website」のみになりました。
Facebook og:type、websiteの説明画面

いや、もちろん、websiteもあるんです、All in One・・の設定に。

ところが、設定でwebsiteに変更すると、何故か警告表示が出る・・・んですが、そのまま設定しちゃえ!っとやってみたところ・・あれ?今度はそのtypeの記述が出てこな~い!という現象が^^;。

つまり、type=”blog”で設定すると、ogタグは生成されるけれど間違っている。
type=”website”にしようとすると、生成されない・・・うむむむ^^;。

3.Twitterカード設定とFacebookのOGP設定をすると、header内がwitter:descriptionとFacebookのog:descriptionでいっぱいだ!

ディスクリプションて、大切ですよね?
なので、投稿毎に一生懸命書かれていると思います。

で、TwitterでもFacebookでも拡散したいから、All in・・で両方の設定をしますよね?

そうすると、両方の設定でheader内が、それはもう”リッチー、たっぷりぃな”感じに。^^;

実は、Twitterカード設定とFacebookのOGP設定は兼用できるところが多くて、FacebookのOGP設定ができていたら、Twitterカードの方は2行ほど書き加えるだけでOK。

でも、All in・・で設定したら、両方の設定が生成されてしまう・・(°∀°;)

大昔からの「headerはできるだけ軽くすべし!」という教えが染み付いているからなのか、どうも同じ内容のタグを何度も書いていると思うとなんだかイラッとしてしまうわけで(笑)

というわけでAll in・・とさよならして、代わりにやったこと

プラグインMeta Managerを入れた

WordPressはデフォルトだと、メタキーワードと、メタディスクリプションが無く、SEO的に重要なこれらを簡単に設定し、生成してもらう為にMeta Managerを入れました。

プラグインAuto Post Thumbnailでアイキャッチ設定し忘れを防止。

まあ、これは前から入れていました^^;

アイキャッチ画像を設定しなくても、記事内の一番初めの画像か、それが小さすぎるといった場合は、他の画像をアイキャッチ画像として自動設定してくれるプラグインですね。

アイキャッチ画像設定し忘れ防止に入れてありましたが、All in one を外すなら、なおさら入れておくと便利です。

OGP設定はheader.phpに直接入力

こちらのサイトでは、直接入力で入れていたので、それを少しいじってトップサイトも子テーマのheader.phpに書き加える事にしました。

このOGPタグは以下のようになっています。
変更箇所は

  • og:image
  • アイキャッチ画像が万一無い場合のデフォルト画像
  • FacebookアプリケーションIDと、fb:admins
    ※アプリケーションID・fb:adminsはアプリケーションIDだけでOK、ですが一応。fb:adminsを入れたくない場合は行ごと削除して下さい
  • Twitterカードの種類はデフォルトのsummaryになっています。お好みのカードタイプに””内を変更して下さい。
  • カードタイプについては
    → Twitterカード
    → もしくは、詳細な説明がわかりやすい寝ログさんのページ♪
    ※ちなみにTwitterCardsプラグインで、ツイッターカードを作成する場合は、OGPにTwitter の記載は要りません。

インパクトのあるツイッターカードを作る方法(Twitter Cardsプラグイン設定)http://nelog.jp/twitter-cards-plugin

  • Twitterアカウントはご自分のアカウントに変更して下さい。
<?php if (is_home() || is_front_page()): ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo esc_url( home_url( '/' ) ); ?>" />
<meta property="og:image" content="<?php header_image(); ?>" height="" width="" alt="">//ヘッダーイメージを指定しています。違うものを指定したい場合は、""内を変更して下さい。
<meta property="og:description" content="<?php bloginfo('description'); ?>" />

<?php elseif (is_single()) || (is_page()): ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php $str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail() &amp;&amp; ! is_archive() &amp;&amp; ! is_front_page() &amp;&amp; ! is_home())
{//投稿にサムネイルがある場合の処理
 $image_id = get_post_thumbnail_id();
 $image = wp_get_attachment_image_src( $image_id, 'full');
 $ogimage=$image[0];
}
else if ( preg_match( $searchPattern, $str, $imgurl ) &amp;&amp;is_single())
{//投稿にサムネイルは無いが画像がある場合の処理
 $ogimage=$imgurl[2];
}
else
{//投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
 $ogimage="◆投稿に画像がない場合に表示させる画像のURL◆";
}
?>
<meta property="og:image" content="<?php echo $ogimage; ?>">
<?php
$excerpt =strip_tags(get_the_excerpt());
$excerpt = str_replace(array("..."), '', $excerpt);
?>
<meta property="og:description" content="<?php echo $excerpt; ?>">
<?php endif; ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="◆ご自分のapp-idを入力◆"/>
<meta property="fb:admins" content="◆ご自分のfb-adminsを入力◆"/>
<!-- Twitter Card -->
<meta name="twitter:card" content="◆summary_imageなど、イメージの種類◆">
<meta name="twitter:site" content="◆@アカウントを入力◆">
<!-- /Twitter Card -->

Twitterカードを設定したら、バリデーション・チェックが必要です。
下記のサイトがわかりやすかったので、引用します。かっぱさん、ありがとうございます。

Twitter Cards をプラグインなしで設定してみました:Twitter カードアナリティクスも使えるようになった!http://wp-kappa.com/twitter-cards/

子テーマはともかく、カスタマイズはまだ難しいですぅ、という方は、Jetpackの共有をON

Jetpackの「共有」を有効にするだけで、Facebookに必要なOGPが出力されるようになります。

設定方法はダッシュボートメニューのJetpack → 設定
Jetpack設定

機能の一覧から「共有」を有効化します。
Jetpack共有を有効化

Twitterとも連携させたい場合は、Twitterアカウントを設定します。

設定をクリック、共有設定画面を開きます。
Jetpack共有の設定

共有設定画面で、Twitterのアカウントを記入します。
Jetpack共有のTwitterアカウント設定

ちなみにJetpackのOGPがなんだか疎まれてる感がありますが、最近は結構いい感じになってきています。

以前は共有を有効にすると、OGP生成するプラグインが他に入っている場合、OGPがダブって出力されてしまう現象があり、JetpackのOGPをOFFにするコードをfunctions.phpに書き加えるなどの対策を施さなくてはならなかったのですが、

これが改善されて既に他のOGPが出力されている場合は表示されない仕様になりました。

Jetpackのトラブルシューティングの記載から抜粋・・原文ページ

Since Facebook will give an error if there are duplicate Open Graph tags, Jetpack automatically deactivates it’s Open Graph tag generation when it detects one of these conflicting plugins.

重複したOGPタグがある場合、Facebookはエラーが発生しますので、Jetpackは、これらの競合するプラグインのどれかを検出したとき、自動的にそのオープングラフタグの生成を非活性化します。

なので、後々別のもっと素敵な、OGPを出力してくれるプラグインが見つかってそちらに切り替えたり、header.phpを編集したりした時、共有をOFFにするのを忘れたとしても、OGPがダブって生成されることもなくなりました。

prefix

ついでに、気になっていたprefixも書き変えました。

prefixについては、サブサイトの設定のときに、こちらのページを参考にさせていただきました。
今回も、もう一度読ませていただきましたが、HTML5の方(今ではそうでない方のほうが少ないと思いますが)は、この設定をした方が良いと思います。

HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要http://dtp.jdash.info/archives/51947560.html

こちらもheader.phpの<head>タグを条件分岐phpに変更。
ページのタイプ別に

  • トップページ → website
  • 固定ページと投稿ページ → article

と表示されます。

<head prefix="og: http://ogp.me/ns# <?php if(is_home() || is_front_page()){ 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#"'; } ?>>

メタタグ “canonical”

そして、もうひとつ、メタタグ “canonical”については、プラグイン、Head Cleanerを既に使っていたので、任せました。

テーマによっては最初から設定されているものもあると思うのですが、canonicalはとても重要なので、設定されていない場合はプラグインか、直書きかでかならず設定して下さい。

直接header.phpとfunctions.phpに書き込んで設定する方法は、canonicalの重要性とともに、ウェブシュフさんが記事にして下さっているので、こちらの記事を参考になさると良いと思います。

canonical urlは完璧ですか?SEO friendlyなWordPressサイトには絶対必要です。http://webshufu.com/canonical-url/

Google アナリティクス

2015/5/24追記

All in・・では、やっていなかったので、すっかり忘れていましたが、Googleアナリティクスはどうするの?という質問が^^;

Googleアナリティクスに関しては、ユニバーサルアナリティクスの設定方法を別記事にいたしましたので、そちらを参考にして下さいませ<(_ _)>

ワードプレス子テーマへのユニバーサル・アナリティクスの設定方法>http://hublog.biz/bwpb/how-to-include-universal_analytics-in-wordpress/

ではでは、参考にしていただければ幸いです!

Published:2015/04/16

Written by

コメントを残す