ブログのアクセスがなかなか上がらないので、同じようなジャンルのブロガーさんのサイトをいろいろ研究してみました。
記事の数だったり、記事のボリュームだったり、よくこれだけの量を書く時間があるなと感心してしまうほどです。
そこで気づいたのは、みなさん似たようなテーマを使っていること。
SEOに強いwordpressテーマと銘打たれたものをみなさん使ってるんですね。
テーマを侮ってはいけないと思い、いろいろ調べてみました。
SEOに強いテーマ
「wordpress テーマ SEO」などで調べてみると、だいたい3つのテーマに絞られました。
- STINGER
- Sinplecity
- Xeory
もう一つ「賢威」というテーマがあったのですが、有料なので今回はスルーしました。
その中でも圧倒的に使われているのが「Sinplecity」というテーマでした。
そこで、「Sinplecity」を大解剖してみました。
その前に自分のテーマの説明をしておきますと、基本は「TwentyThirteen」をいじくりまわしてものを使っています。
テーマのアップデートに左右されないように、ほぼオリジナルのテーマといってもいいほどです。
さて、「Sinplecity」と何が違うのか?
見出しやmeta周りなどは、特に違いがみられませんでしたが、大きな違いが一つ。
それは「HTML Microdata」。
HTML Microdataって?
Googleなどクローラーに効率よく情報を渡すためのものらしいのです。
例えば、
<article>
<h1>タイトル</h1>
<p>著者</p>
<p>本文・・・・・・・・・・・・・・・・・</p>
</article>
を
<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">タイトル</h1>
<p itemprop="author">著者</p>
<p itemprop="articleBody">本文・・・・・・・・・・・・・・・・・</p>
</article>
とすることで、ここはタイトルですよ、同じ<p>タグだけどここは著者(author)ですよ、ここは本文(articleBody)ですよ、というようにコンピュータでも文章の構成を読み取れるようにするのです。
その中で、Microdataを使用できるプロパティを策定している団体というものがありまして、それが主に以下の3つ。
- microformats.org
- data-vocabulary.org
- schema.org
詳しく書いてあるところもいっぱいありますので、詳しく知りたい方はご自分で調べてみてください。
個人の見解としては、
- パンくずのマークアップには「data-vocabulary.org」を使う。
- その他は「microformats.org」「schema.org」のどちらかで
- 「schema.org」の方がメジャー
「Sinplecity」は「schema.org」に従って、マークアップされてましたが、wordpressの最新テーマ「TwentySixteen」を見てみると、「microformats.org」に従っています。
…
…
迷いましたが、「microformats.org」にします。
理由は、ライバルが「Sinplecity(schema.org)」を使っているから、違うことをしてみようと思っただけです。
microformats.org hAtomに改良
さぁ改良するぞと意気込んでみましたが、意外と簡単に終わっちゃいました。
なぜなら、テーマは古くてもwordpress本体は最新のものだから、「Microdata」に対応してくれているんですね。
昔、邪魔だなと思って外した「<?php post_class( );?>」などの関数をつけていくだけ…。
「<?php post_class( );?>」の中でclassとかが自動で割り振られるんですが、構造化データに必要な「hentry」とかもその中にいるんですよ。
独自のclassが付けられないから外しちゃったんですけど、どうしよう、「hentry」を手動で付けていこうか…。
いい方法を見つけました。
「<?php post_class( ‘clearfix’); ?>」とか「<?php post_class( array(‘clearfix’,’hoge’));?>」とかで好きなクラスを付け足せるんですね。
この方法で対応しました。
SearchConsoleでエラーがでるよ( ;∀;)
改良後、数日してから「SearchConsle」の「構造化データ」を確認するとエラーがいっぱい。
エラーの内容は、「authorがありません。」「updatedがありません」の2種類。
ソースには書いているのですが、表に出したくなかったので、「display:none;」で消してたんです。
この方法だとソース上にもなくなってしまうのか、記載されてないことになってしまうことがエラーの原因。
「構造化テストツール」でチェックしたんだけどな
「TwentySixteen」をもう一度よく見てみると、classに「screen-reader-text」ってのありました。
CSSを調べてみると、こんな感じ。
.screen-reader-text{
clip:rect(1px,1px,1px,1px);
height:1px;
overflow:hidden;
position:absolute !important;
width:1px;
/* many screen reader and browser combinations announce broken words as they would appear visually */
word-wrap: normal!important;
}
この方法だと、大丈夫みたいです。
無事、エラーは出なくなりましたが、アクセス数は増えるのでしょうか?
ボクの師匠が言っていました「神は細部に宿る」と。