HTML5のマークアップにSEO観点をいれてみた
今回 AngularJS じゃなくって、 HTML5的なことを書いてみます。
ちょいちょいこんなのも書いてみようと思います。
先日この記事を見て、気にしていたことが少しわかった風なので、まとめつつ現状のマークアップの感覚として残しておくことにしてみた。
自分で書くときのテンプレ的なマークアップを修正というかSEO向けに意識を寄せてみた感じです。
※若干謎なところもあるけど、そのまま？にしちゃって一旦良しとして、あとで詳しい人に聞くことにします。現状そこまでは気にしないことにする！
最近SEO全然意識してなかったこともあり、すごい勉強になりました。
現状だとHTML5への過渡期ということで余計に意識しないといけないことがあるようなので、多くのWebサイトがHTML5だー！ってなるには、もう少し時間が必要な感じがしました。ある程度落ち着いてからの方がリスクが少ないと思いますし。
記事を読めばわかるんですけど、HTML5でSEOを意識するには、「正しいマークアップをすること」って書いてあるんですけど、たぶんこれが一番難しい。
SEO関係なく。
現状だとその上でHTML5への過渡期分のSEOも考慮しないとなのか、ん〜・・・。
参考
HTML5のSEO－マークアップで注意すべき３つのポイント
http://html5experts.jp/tsuj/2333/
以下は参考とした記事をマークアップでまとめてみた感じです。
※マークアップがセマンティックであるかどうかについては、まとめ書き程度なのであまり意識していません。ただ、間違ってたら教えてください。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページ名｜サイト名とか</title> </head> <body> <header> <h1>サイト名orページ名とかサイトロゴとか</h1> <nav> <h2>グローバルナビ</h2> <ul> <li><i>メニュー１</i></li> <li><i>メニュー２</i></li> <li><i>メニュー３</i></li> </ul> </nav> </header> <main> <section> <h2>FlashからHTML5へ。リッチな表現のSEO手法</h2> <section> <h2>別ページを用意する</h2> <p>検索エンジン用に別ページを作成する（よくあるヤツ）</p> </section> <section> <h2>代替テキストいれる方法</h2> <canvas> ここに代替テキストいれとく 2013年9月1日現在、Google、Bingの検索エンジンでは認識している 他のは不明、かつ今後の扱いは不透明 </canvas> </section> <section> <h2>CSS(+JavaScript)で切り替える方法</h2> <canvas style="display:none;"></canvas> <div style="display:block;">テキスト</div> <p> JavaScript を使って display の値を反転させる？ 検索エンジンが JavaScript を読めないのが前提？ </p> </section> <strong> <p>本来リッチな表現を検索させる上で、最も重要な事は技術的な要件ではありません。</p> <p>そもそもの話ですが、検索される必要がある情報をリッチコンテンツを中心として制作するのが誤りでしょう。</p> </strong> </section> <section> <h2>SEO効果があるh 要素の使い方</h2> <strong> <ul> <li><p>h1 を複数使用する場合は不利になる場合もあるし、ならない場合もある</p></li> <li><p>SEO的には h1 要素は1つで、h2 要素以後もうまく使って文書構造を示しておくのが安全。</p></li> </ul> </strong> </section> <section> <h2>HTML5 で追加・削除・復活した要素</h2> <p><strong>ページの情報を正しいHTML5でマークアップをしておくことが、唯一の対策となるでしょう。</strong></p> <section> <h2>HTML5で追加された要素</h2> <ul> <li> <p>nav や footer は現段階では div と同じ扱いを受けている模様。</p> <p>今後HTML5が普及した際には、様々な形で検索エンジンも活用し出すことが考えらる。</p> </li> </ul> </section> <section> <h2>これまでは推奨から外れていたものの復活した要素</h2> <ul> <li> <section> <h3>iframe 要素</h3> <p>取扱用注意！</p> <p>現段階では「iframe 要素内のコンテンツは、ページ内のコンテンツとして認識されることもあれば、されないこともある」</p> <p><strong>SEO を考える必要があるWebページでは使用しないことをお勧め</strong></p> </section> </li> <li> <section> <h3>b 要素・ i 要素</h3> <p>b 要素の多用は、HTML4の b要素と混同するため、現段階ではお勧めしない</p> <p>i 要素も同様で、両方ともCSSを用いたマークアップをすると良い</p> </section> </li> </ul> </section> </section> </main> <footer> <div><small>@can_i_do_web</small></div> </footer> </body> </html>
