takkaaaaaの日記aikoファン日記や、艦これ(艦隊これくしょん)の攻略を中心に、日常の雑記など色々と書いているブログです。ホーム艦これaiko写真グルメIT全記事一覧ホーム>IT>ブログ運営・カスタマイズ>【SEO】パンくずリスト、構造化データマークアップ、HTML5でブログのSEO向上2014-04-27カテゴリ:ブログ運営・カスタマイズタグ:ブログHTML5SEO2連続でブログカスタマイズの記事になってしまってすみません。土日でブログを色々いじっていたのですが、やりだすとハマってしまいますね。今回、対応したのは以下の内容になります。SEO的にも効果あるかもしれませんよ。構造化データマークアップGoogle先生に聞いてもSEO的にすぐ効果があるかわからないようですが、検索エンジンが解釈しやすいように構造化データのマークアップをしました。将来的に効果があるかもしれません。マークアップ支援ツール」がありますよ。Analyticsに書かれている項目は、少なからずSEOに関係していると思っています。パンくずリスト(http://data-vocabulary.org/Breadcrumb)Googleで検索した時に、URL欄にカテゴリが表示されているサイトがありますよね。リッチスニペットというそうです。実現するための方法がmicrodataによるタグ付けです。説明の都合上、あまり関係のない項目は省略してますが、以下のようなHTMLになります。itemprop="title">ブログ</span></a></div>></div>修正項目は以下になります。パンくずリストの各項目に、「itemscope」と「itemtype="http://data-vocabulary.org/Breadcrumb"」属性を指定したdivタグで囲む。各パンくずのリンクのaタグの属性に「itemprop="url"」を付ける。各パンくずの項目名を、itemprop="title"属性を付けたspanタグで囲む。上記だけだと、パンくずリストの途中で改行されてしまったので、全体をdivタグで囲み(例では、class="breadcrumb")、cssの方に「display:block;」を書いて改行しないようにする。当ブログはFC2ブログなので、URLやカテゴリ名はテンプレートの変数から取得しています。全ての記事を手で修正するということはしていません。これで、構造化データテストツールで、検索結果にリッチスニペットのパンくずリストが以下のように表示されることを確認しました(オレンジで囲んだ部分)。パンくずリストはユーザの目から見えるものなので、検索結果からのアクセスが少し増えることが期待できますね。マークアップ支援ツールを使ってみたら、Articleでタグ付けされたのでArticleにしました。itemfefはitemscopeで囲んでいる部分の外側を参照するのに使います。itemtype="http://schema.org/Person">プロフィール欄</div>色々と項目はあるのですが、上記以外にもFC2ブログで適用できそうなものを適用しました。headlineとname・・・ブログの場合、記事のタイトルが見出し(headline)=名前(name)なので、タイトル部分に2つとも付けましたurl・・・記事のエントリページのURLdatePublished・・・記事の公開日articleBody・・・記事の本文を大きく囲みましたauthor、copyrightHolder、editor・・・著者などはブログ右側のプロフィール欄にタグ付けしましたcopyrightYear・・・著作権の開始年はフッター部分をタグ付けしましたブログトップページ(http://schema.org/Blog)ブログトップページ用にBlogのタグも付けてみました。Articleと重複していない項目は下記です。name・・・ブログ名。当ブログでは一番上をロゴ画像にしているので、フッターの「このサイトについて」の文を参照してタグ付けしました。文字でブログ名を書いている場合は、一番上のヘッダー部分で良いと思います。alternativeHeadline・・・ブログの副題。見えるところには書いていないので、空のspanタグにcontent属性で設定しました。description・・・ブログの概要。当ブログの場合はロゴの下の文です。HTML5への移行HTML5への移行もしました。動くような修正はしていませんが(そんな技術力無いですし・・・)、HTML5による構造化をしてみました。構造化データマークアップと同様に、すぐにSEOにプラスになるかはわかりませんが、将来的なSEOの効果を見据えてます。自分の勉強がてらというのもあります。検索エンジンにブログの構造を教えるのに役に立つので、マイナスにはならないと思っています。Google様の技術力だったら、すでに構造を読み取ってくれているのかも知れませんね。ちなみに、このサイトを参考にしました。HTML5による構造化がよくわかります。ドキュメントのセクションとアウトライン以下のように、header、nav、article、time、aside、footerのタグを使って構造化してみました。HTML5の場合、h1タグを複数使っても良いそうですが、今までのHTMLではSEO的に良くないので、無難にh1タグは1つのみにしています。sectionタグは記事ページでは使いませんでした。・<footer>Copyright部分</footer></body>また、下記サイトを参考にしましたが、FacebookのOGPについて、HTML5の場合は修正したほうが良いようです。今まではhtmlタグの属性に書いていましたが、headタグのprefix属性を使って書くようにしました。HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要ちなみに、以下のサイトでHTML5の文法をチェックできます。ソーシャルボタンなどの外部の部品で減点されるところもあるので、どうしても点数は低くなりますが。Gatewayまとめ今回は構造化データのマークアップとHTML5について書いてみました。いかがだったでしょうか。パンくずリストは検索結果で見えるものなので、アクセスアップに(少し)効果がありそう。意外と対応していないサイトが多いですよ。microdataによる記事の構造化データマークアップと、HTML5による構造化は、SEO的に効果があるかわからないが、将来的にはどうなるのだろう?ところで、当ブログは古いIEでどう見えているのでしょうか?ブログの構造が崩れてないといいけど。IE11の開発者ツールで見たところでは、IE7までは大丈夫そう。IE6だとどうなのかなぁ。XPのサポートも切れたことだし、できるだけモダンなブラウザを使ってほしいところですが、企業などでは社内システムの関係もあって、なかなかIEのバージョンを上げられないですよね。今回の記事はいかがだったでしょうか。Twitterなどで感想を書いてくれると参考になります。ツイートブログ運営・カスタマイズカテゴリの記事IEのバージョンとスマホ比率~Googleアナリティクスで見る最新のアクセス傾向~(05/21)検索上位に表示されるためにはブログとGoogle+の連携が必須になる?(05/14)scssは凄いcss?~scssでブログのメンテをしやすくしよう~(05/11)ブログをフラットデザインにしてみたよ。Highlighter)(04/27)ブログ100記事達成!アクセス数を増やす4つの方法(04/18)IFTTTでブログの更新を自動的に画像付きツイート。Highlighter)お知らせ2014年7月ブログ引っ越ししました。移転先の方もよろしくお願いします。このFC2ブログで書いた記事も移動しました。移転先のtakkaaaaaの日記サイト内検索このブログを書いてる人Author:takkaaaaa横浜在住。とあるSIerに勤務してシステム開発をやっております。最近の趣味は音楽、写真、艦これです。好きな歌手はaikoです。Peenats)の会員で、ライブにも行きますよ。艦これはブルネイ鯖で提督をやってます。F600EXR)を使っています。ミラーレスとかほしいなー。すためにとりあえず記事追加しました。(11/22)ブログをFC2からWordPressに引っ越して4ヶ月。(10/19)新ブログのアクセスが少ない理由がわかった。(08/03)ブログ引っ越し完了しました。今までありがとうございました。(07/06)ブログの引っ越し計画実行中。FC2からロリポップへ移転します。(06/28)aikoの魅力が分からないという記事を見た感想。(06/25)aikoのLLP17ツアーグッズやっと全部発表されたー。(06/23)6/21のSONGSにaiko出演。(06/21)aikoのライブツアーLLP17のグッズが発表されました。ついてなど)や、日常の雑記などを書いています。2013年11月スタートで書き始めたのですが、2014年7月にお引っ越しをしました。移転先の方もよろしくお願いします。