‘HTML / CSS’ カテゴリーのアーカイブ

Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ

Slice of bread, crumbs and honey
photo by Horia Varlan

Googleが検索結果画面にパンくずリストを出すようになって随分立ちます。

当ブログの場合は結構前に出るようになっていたので、特に何もせずに放っておいたのですが、先日「SEOまとめ」片川氏(@seomatome)の記事「ul(リストタグ)とmicrodata構造化マークアップでパンくずリストにこだわりを」を読んでいて、やはり当ブログにも導入しておこうと思い導入してみました。

今まで当ブログでは「WordPressにプラグインなしでパンくずリストを表示させる方法」を元にしてパンくずリストを設置しており、それをカスタマイズしたかったのですが、親子のカテゴリーに上手くmicrodataの記述を行えなかったので断念し「Breadcrumb NavXT」を使うことにしました。もっと簡単な方法もあるかもしれませんが、以下では私なりの方法をご紹介します。

※マークアップに関しては「Breadcrumb NavXT」でも「schema.org」のものを採用しているようですが(「Using Schema.org’s Breadcrumb Microdata with Breadcrumb NavXT」参照)、Googleの指定している書き方とは異なります。ここではGoogleに合わせています。

※この記事を書いた時点での「Breadcrumb NavXT」のバージョンは「4.0.1」です。

»”Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ”の続きを読む

html5のtime要素をWordPressで利用する

html5で新たに追加された要素にtime要素があります。

当ブログでもせっかくhtml5を使用しているので、投稿日時にtime要素を利用したいと思って、調べてみましたので、メモ代わりに投稿します。

»”html5のtime要素をWordPressで利用する”の続きを読む

HTML5のheader要素とfooter要素はdiv要素の代わりではない

html5から新しく採用された要素にheader要素とfooter要素があります。

これら2つの要素は、しばしばウェブページ全体のヘッダーとフッターというこれまでdiv要素で区分してきた部分を置き換えるものだという話を聞きます。私自身もそう考えていたのですが、今回改めて仕様書を見てみたところ、どうもそういう単純な話ではないようです。

自分用のメモ、という意味も込めて、ここで改めてheader要素とfooter要素について、整理しておきたいと思います。

»”HTML5のheader要素とfooter要素はdiv要素の代わりではない”の続きを読む

SEOとWeb標準の関係

2009年9月16日にGoogle Webmaster Central Channelに投稿された「Why doesn’t google.com validate?(なぜgoogle.comはWeb標準に準拠していないか?)」という動画に関しては他のサイトでも取り上げられていたことから、実際に見ていなくても、間接的に知っている人は多いのではないかと思います。

実際にGoogle.comのソースを見てみればわかると思いますが、なるほど、おそらく多くの人には理解しがたいようなソースです。はっきりいって私にもイマイチよく分かりません。通常ならDiv要素を用いるところでSpan要素を使用していたり、ドキュメント宣言でhtml5のような書き方をしている一方で、今では使われているのを見たことがないNetscape Navigator独自使用のnobr要素を使っていたり…。私の勉強は足りないだけなのかも知れませんが、どう見ても凄まじい構造になっています。

この動画の中でMatt Cutts氏がGoogleはW3Cに準拠しているからといって順位を上げたりすることはしない、なぜなら多くのウェブサイトはWeb標準に準拠していないから、といっていることはとても印象的です。

では、多くのサイトがWeb標準に準拠すれば、Googleはそれを検索順位を決める要素にするのでしょうか。

»”SEOとWeb標準の関係”の続きを読む

HTML5をInternet Explorerでも使えるようにするGoogle Chrome Frame

GoogleからInternet ExplorerユーザーのためのGoogle Chrome Frameが公開されました。これは、IEユーザーがGoogleの機能を利用できるようにするもので、Windows Vista / XP SP2以上のOS+IE6/IE7/IE8で利用できます。

»”HTML5をInternet Explorerでも使えるようにするGoogle Chrome Frame”の続きを読む

Section要素を使うかどうか判断に迷った時の3つの条件

SEOモードは何気にHTML5で組んでいたりします。といってもかなり似非なのですが。色々なところから集めた情報を元に私なりに組んでみた、といった感じです。

手馴れた人はブラウザでソースコードを表示して確認したりするのでしょうけれど、色々悩んだ後が垣間見えるかも知れません。div要素の使い方だったり、htmlではなくxhtmlの書き方になっていたり。一番悩んだのはsection要素を使うかどうかでした。

結局、今回は使わなかったわけですが、同じようにsection要素の使い道で悩んでいる人は他にもいるらしく、私がいつも参考にしている”html5 Doctor”でもsection要素に関する話題が投稿されていました。

»”Section要素を使うかどうか判断に迷った時の3つの条件”の続きを読む