タグ別アーカイブ: SEO

W3CのHTML5.1勧告でsection直下h1の見出しレベル自動解釈が無効に?

一応結論だけ先に書いておくと、WEB制作上の影響はほぼ無いのでは?という話。

HTML5と見出しレベルの解釈

HTML5が世に放たれた際に、それまでのHTML4.01ないしXHTML1.0の宣言を行ったページでは不可能であったアウトラインの作り方として、セクション毎にh1を頂点とした独立した見出し階層を作り上げても、ページ全体で自動的に適切な見出しレベルに調整して解釈してくれるというものがあった。
たとえば、下のようなコード。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/base.css" type="text/css">
<meta name="description" content="サンプル株式会社の商品一覧ページです。">
<meta name="keywords" content="サンプル株式会社,ネットショップ">
<title>当社商品の一覧 | サンプル株式会社</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>サンプル株式会社</h1>
</header>
<div id="main">
<article>
<h1>サンプル株式会社の商品一覧</h1>
<p>当社が取り扱う商品の一覧です。</p>
<ul id="itemlist">
<li>
<article>
<h1>商品A</h1>
<p>さわやかなミントの香りの牛車です(牛は食べられません)</p>
<p>100,000円</p>
<p><a href="http://xxxxxxxx.xxx/item.php?id=1" title="商品Aの商品詳細">>>商品詳細へ</a></p>
</article>
</li><li>
<section>
<h1>商品B</h1>
<p>官位です。これがあれば思いのまま(返品不可)</p>
<p>3,000円</p>
<p><a href="http://xxxxxxxx.xxx/item.php?id=2" title="商品Bの商品詳細">>>商品詳細へ</a></p>
</section>
</li><li>
<section>
<h1>商品C</h1>
<p>古今和歌集です。新版が出たので在庫一掃セールです</p>
<p>16,000円</p>
<p><a href="http://xxxxxxxx.xxx/item.php?id=10" title="商品Cの商品詳細">>>商品詳細へ</a></p>
</section>
</li><li>
<section>
<h1>商品D</h1>
<p>商品説明</p>
<p>100円</p>
<p><a href="http://xxxxxxxx.xxx/item.php?id=15" title="商品Dの商品詳細">>>商品詳細へ</a></p>
</section>
</li></ul>
</article>
<article>
<h1>当社のモットー</h1>
<p>適当な仕事。深刻な社会的被害。</p>
</article>
</div>
<footer>
<p>サンプル株式会社 2012-2017 all rights reserved.</p>
</footer>
</div>
</body>
</html>

このコードを、htmlコードを入力すると自動的に見出しの階層構造を抽出してくれるWEBサービスHTML 5 Outlinerに与えると次のような結果が帰ってくる。

3階層のアウトライン

3階層のアウトライン

つまり各所で指定した見出しレベル(h1)以外にも、sectionタグやarticleタグなどのセクショニング・コンテンツを示すタグを参考に見出し階層を推測してくれているのだ。これが大体のブラウザや検索エンジンの解釈となる。
一方、従来的なhtmlのように、明示的に見出しレベルを指定(h1,h2,h3)しても同様の結果が帰ってくる。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/base.css" type="text/css">
<meta name="description" content="サンプル株式会社の商品一覧ページです。">
<meta name="keywords" content="サンプル株式会社,ネットショップ">
<title>当社商品の一覧 | サンプル株式会社</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>サンプル株式会社</h1>
</header>
<div id="main">
<article>
<h2>サンプル株式会社の商品一覧</h2>
<p>当社が取り扱う商品の一覧です。</p>
<ul id="itemlist">
<li>
<article>
<h3>商品A</h3>
<p>さわやかなミントの香りの牛車です(牛は食べられません)</p>
<p>100,000円</p>
<p><a href="http://xxxxxxxx.xxx/item.php?id=1" title="商品Aの商品詳細">>>商品詳細へ</a></p>
</article>
</li><li>
<section>
<h3>商品B</h3>
<p>官位です。これがあれば思いのまま(返品不可)</p>
<p>3,000円</p>
<p><a href="http://xxxxxxxx.xxx/item.php?id=2" title="商品Bの商品詳細">>>商品詳細へ</a></p>
</section>
</li><li>
<section>
<h3>商品C</h3>
<p>古今和歌集です。新版が出たので在庫一掃セールです</p>
<p>16,000円</p>
<p><a href="http://xxxxxxxx.xxx/item.php?id=10" title="商品Cの商品詳細">>>商品詳細へ</a></p>
</section>
</li><li>
<section>
<h3>商品D</h3>
<p>商品説明</p>
<p>100円</p>
<p><a href="http://xxxxxxxx.xxx/item.php?id=15" title="商品Dの商品詳細">>>商品詳細へ</a></p>
</section>
</li></ul>
</article>
<article>
<h2>当社のモットー</h2>
<p>適当な仕事。深刻な社会的被害。</p>
</article>
</div>
<footer>
<p>サンプル株式会社 2012-2017 all rights reserved.</p>
</footer>
</div>
</body>
</html>
やはり3階層のアウトライン

やはり3階層のアウトライン

この場合sectionやarticleなどのセクショニング・コンテンツを示すタグは、見出し階層の推測において無視されている。
HTML5では、このようにセクションを表すタグを使って見出しレベルを推測させることもできるし、従来のhtmlのようにあくまで明示された見出し階層のみを推測の根拠とさせることもできる。

W3CのHTML5.1勧告で自動解釈は撤回

そのような状況であったのだが、2016年11月1日に公開されたW3CのHTML5.1勧告で、様々なタグや属性の追加とともにある1つの仕様の削除について言及されていた。

The use of nested section elements each with an h1 to create an outline.

これはつまり、sectionやarticleのようなセクショニング・コンテンツを示すタグは、ページ内の最上階層で使われるもの以外、h1を頂点とした見出しレベルを構成してはいけなくなったということである。
問題をより簡潔に表現するならば、ページ内でh1は1回しか使うなということ。HTML5の登場以前からコーディングを行っている人間には常識のことであるし、登場以降もh1の濫用には何かペナルティがあるのではないかという認識の人間も多かったろう。彼らの時代が再びやって来たのだ。さあ新人コーダをいじめよう!

W3C勧告が当面のWEB制作上影響が無い理由

W3Cと言えば、WEB業界で使われる技術の標準化を行う団体で、HTML5が世に出たての頃など、ドキュメントも少ないので何か分からないタグの使用方法などあったらとにかくW3Cのページを見に行ったものである。そのW3Cのお墨付きがあるのだから、これからブラウザや検索エンジンの解釈も今回の勧告を基準にしたものに変わるのではないかということで、HTML5の登場とともにh1濫用型のコーディングに切り替えた私自身もビックリした(もう納品しちゃってるし…)。
ただ今回の経緯などを調べるうちに分かってきたのだが、確かにHTML5登場当時にW3CはWEB標準化の最前線と言ってほぼ間違いない団体であったが、それは次世代標準の提唱に頓挫してWHATWGという別の団体が提唱していたHTML5を全面的に受け容れることにした経緯によるもので、以降WHATWGとW3Cは協調路線を取っておらず、主要ブラウザなどの実装はWHATWGの提唱するHTML Living Standardのみを基準にしているようなのである(まあ実際、WHATWGの正体がブラウザベンダーの寄り合いのようなものなので当たり前である)。
ではW3C勧告が何の意味を持っているのかというと、実質何の意味も持たない。WHATWG側からHTML Living Standardの剽窃だとか欠陥フォークだとか、現在進行形で厳しい評価を受け続けている。

ということで、ページのアウトラインの形成においてHTML5.1勧告が世に出た後も依然2通りのやり方が使えるのは間違いない。一応、見出しレベルをタグの数字で明示するやり方だとW3Cの要求も満たすことが出来るということが両者の違い。セクション毎にh1を置くやり方はコンテンツの追加時に見出しレベルを気にせず追加できるというメリットがあるし、タグの数字で明示するやり方はソースコードを人間が見て一目で階層が分かり易い(ただし実際にどう解釈されているかを反映していない)というメリットがある。お好きな方でこれからも大丈夫。


WordPressのスパムコメント対策 Spammer Blocker

WordPressのブログを長く運営していると、投稿に対して無関係なスパムコメントが大量につくようになる。その数たるや、当ブログのような零細ブログであっても1日に数十件、多い時は100件を超える程になる。
これらのスパムコメントを、コメント欄に無条件に表示するようにしてしまっていては、ブログの訪問者に管理されていないサイトであるとの印象を与えるし、また検索エンジンからもスパムリンクを放置しているサイトということで、低い評価をもらってしまう。つまりSEO的にもかなり問題がある。
そこで、コメントはまず承認制にして、スパムコメントでないコメントを管理者のチェックにより表示させるようにしなければならない。でも、日に100件のコメントをいちいちチェックするのは面倒極まりない。

標準でついてくるAkismetプラグイン

WordPressの配布元もスパムコメントの問題については把握しており、いちいち人間の目を通してスパムチェックを行わなくても良いように、自動判別してくれるプラグインが付属している。それがAkismetで、ダッシュボードのプラグイン>インストール済みプラグインから勝手にインストールされていることが確認できる。
Akismetを有効にするには、インストール済みプラグインから有効化を選ぶだけでは不十分だ。Akismet API keyというものを、リンクから飛んで取得しないと行けない。そして(一応申告制なのでごまかせるのかもしれないが)ビジネスユースの場合には有料でキーを取得しなければならない。ということで、運営ブログがビジネスユースなのかそうでないのか判別がつきにくいケースなどでは、有料プランにするべきか不明瞭なこともあり、どうも導入に消極的になってしまう。

特定IPからのコメントをスパム判定する

そこで、Akismetを導入しないでもスパムチェックの手間を省く方法を考える。一日に100件のスパムコメントの中には、似たような内容のものが多いということに気付くだろう。実際、コメント元のIPアドレスは100種類も無く、同一IPアドレスからのスパム投稿が多い。つまり、IPアドレスのブラックリストを作ってしまい、リストに当てはまる投稿者のコメントをスパムに振り分けるようにしてしまえば良いのである。

特定IPをブラックリストに放り込むには、ダッシュボードの設定>ディスカッションでディスカッション設定のページに移動、コメントブラックリストという入力フィールドにIPアドレスを列挙すれば良い。単語の一致でも指定できるので、スパムコメントにありがちなブランド名等でもフィルタリングが行える。

コメントブラックリスト

コメントブラックリスト

IPアドレスは、スパムコメントの下に書いてある、192.168.0.0のような数字である。ただ、これをいちいち控えて、ブラックリストに加えて…という作業は面倒臭い。

Spammer Blockerプラグインを使う

そこで、コメントの一覧からスパム認定を行ったコメントのIPを自動で記録し、次回以降そのIPからのコメントはブロックするという挙動のプラグイン、Spammer Blockerを使うと便利である。
インストールはダッシュボード>プラグイン>新規追加から行えばよい。
インストールして有効化すると、一度スパム認定を行ったIPからのコメントをブロックする。スパム認定を行うわけではなく、そもそも投稿自体をブロックするので、スパムコメントがデータベース上に増えていくこともない。

なお、このSpammer BlockerによってブロックされているIPは、前段で説明したコメントブラックリストに蓄積される訳ではなく、独自のデータベースに貯まっていくことになる。ダッシュボード>設定>Spammer Blockerから設定画面が見られるが、Banned IP addressというセクションに一覧があるので、スパム認定の解除や管理などはここで行えば良い。

このプラグインを導入してからというものの、スパムコメントが多くても1日5件くらいまでに抑えられるようになった。つまり、1日5件くらいまでは新しいアドレスからスパムが来ていたということになるのだが、完璧なブロックを志すなら、コメントブラックリストやAkismetと組み合わせて対処するしかないのだろう。


WordPressプラグイン WP Social Bookmarking Lightを導入 

今更ながら、世間で流行っているtwitter、Facebookのユーザにおいでおいでをするため、ツイートするボタンやいいね!ボタンをブログ記事につけられるプラグインを入れてみた。WP Social Bookmarking Liteという、日本では非常にポピュラーなプラグイン。

何故導入するに至ったかというと、数年前と比べてこのブログ(前身は2010年からですので、もう4年経ちましたか)に他ブログからリンクが貼られることが少なくなり、たまに貼られるリンクはtwitterやFacebookのものが多くなってきていたもので。おそらく、以前ネット上でどこか他のページのコンテンツを紹介する際に行われていた、URLコピー&ペーストという儀式が廃れ、全てSNSのボタンをクリック→紹介という手順に変わってしまったのだろうと思われる。最早、URLという存在があるということも意識されていないかもしれない。twitterのタイムラインだけ眺めて、自分ではネットサーフィンをしないという利用もあるかもしれない。

で、導入の手順は、wordpressのプラグインメニューで検索して、インストールするだけなのだが、設定が独特だったので、少し解説をしておきたいと思う。

WP Social Bookmarking Light設定

設定画面

まず一般設定のタブで、SNSボタンの表示位置や表示非表示を決める。表示するものは、ウィジェットの登録と同じようにドラッグ&ドロップで左の枠に投げ込む。

スタイルのタブは、CSSをいじる画面。その隣から先ほど登録したサービスごとの設定画面になるが、言語設定が選べるので、国粋主義者なら日本語を選ぼう。もし志賀直哉ならば、フランス語を選んでも良い。

以上で、記事中の決めた位置にボタンが出るようになる。まあ大抵のテーマならデフォルトの位置で大丈夫だろうけど、見栄えが悪いようだったらCSSでmarginなどをつめるとよい。何故か全てのボタンを囲む.wp_social_bookmarking_lightというクラスのdivは、高さが指定されておらず、ボタンがはみ出している状態で表示されているので、marginをつけるのならばまずheightを指定しておかないといけない。それ以外は特に気をつけることはないだろう。

あと数年もすれば、ボタンを押す手間もなく念ずるだけでリンクが出来るようになるはずなので、それまでこのプラグインには活躍してもらおう。