HTML5のセマンティック要素は本当にSEO に効果があるの?
すべての HTML5 ガイドラインに準拠しコーディングしたサイトやランディング ページを持つことはあなたのサイトがランキングを上げるために後押しになるかもしれません。HTML5 に関する一般的な知識を持っていることが役に立ちます。
HTML5 はハイパーテキスト マークアップ言語の最新バージョンで、検索エンジンに向けてページのコンテンツをより良く定義するために使用できる新しい HTML 要素が追加されています。
SEO のための HTML5 の意味
標準的なHTMLタグ(例:title、h1など)はページ上のSEOの基礎を形成しています。検索エンジンはこれらのタグを使用してページが何についてのものかをよりよく理解します。これらの要素を最適化することは検索結果での順位を向上させるための基本的なSEOの実践です。HTML5 ではページを最適化する際に考慮すべき新しいセマンティック要素がいくつか提供されています。
セマンティック要素とは?
セマンティック要素とは、特定の意味を持つ HTML 要素を指します。例えば<h1>はセマンティック要素です。これは、タグ内のコンテンツが HTML ドキュメントに含まれる最も重要なヘッダーであることを Google ボットに伝えます。一方<div> は、HTML ドキュメント内の分割を示すだけでタグの前、後、またはタグ内で何が行われているかについての情報を提供しないため非セマンティック要素となります。
HTML5 の新しいセマンティックタグ一覧
HTML5のリリースにより検索エンジンにさらに豊富な情報を提供するいくつかの新しいセマンティックタグが導入されました。ここではいくつかの HTML5 要素の概要とそれらが SEO にとってどのような意味を持つのかを紹介します。
<main>: <main>タグは、<article>タグとサポートする<section>タグのようなページの中心テーマを拡張するすべての記事コンテンツと他の関連セクションを含むブログなどのコンテンツを囲みます。
<article>: <article>タグはブログ記事をマークアップすることが目的のタグです。検索エンジンはこのタグに入ってるコンテンツに多くの重みを置くことができます。また<div>タグの使用を減らすことでHTMLコードをクリーンアップするのに役立ちます。
<section>: ブログ記事は通常ユーザーが探しているものを見つけやすくするために異なるセクションに分割されています。<section>タグはコンテンツのサブセクションを指定するために使用でき、それぞれが独立したHTMLの見出しを持てるようになります。
<header>: <header>タグはページのヘッダーを指定するために使われるという点で<h1>タグに似ています。しかし、ページのヘッダー部分を示すために使用する事が目的でありナビゲーションリンクやその他の関連テキストを含むこともできます。
<footer>: <header>タグほど有用ではありませんが<footer>タグは会社情報やその他の有用なリンクなどウェブサイトのフッターセクションのコンテンツを指定するために使用することができるため、SEO上の利点があります。各ページは独自のフッターセクションを持つこともできます。
<nav>: ナビゲーションは間違いなくサイトの最も重要な側面の一つです。<nav> タグは、メインサイトのナビゲーションやページ分割などのページ上のリンクを指定するために使用できます。
<video>: <video> タグはFlash を使用せずに動画を表示するためのクロスブラウザ互換性を可能にするため最も有用なタグの 1 つです。HTML5 では、キャプションや字幕などの動画に関する追加情報を含めることも可能です。
<aside>: <aside> タグはセクションタグのようなものですがサイドバーなどの二次的なコンテンツに焦点を当てたものや、ポスト記事のアクションによって表示されるコンテンツに対して <aside> タグを使用するのに適した場所かもしれません。
<figure>: <figure>はビデオ、写真、イラストなど、自己完結型の独立したコンテンツを定義します。
<figcaption>: <figcaption>は図のキャプションを識別するのに役立つ要素です。
<hgroup>: <hgroup>はヘッダータグのグループを識別するための補助としての要素です。
<time>: <time>は記事の投稿日や更新日を記述してボットに対して正しい情報を伝える役目が出来る要素です。
HTML5は本当にSEOで役立つの?
といった疑問が出てくることもあります。2017年になっても、セマンティックにHTML5に準拠したウェブサイトを持つことで、順位が上がったり、一般検索からの露出度が上がったりするというケーススタディの発表や、Googleが公式に認めているものはほとんどありません。
しかし、意味的な詳細をボットに提供すればするほど検索エンジンはあなたのコンテンツを理解し制作者側の意図を汲んだインデックスを作成することができるようになることは間違い無いでしょう。HTML5の要素を使用することで損をすることはありません。
検索エンジン最適化(SEO)は、しばらく前から存在しておりオンラインの世界における技術トレンドの形成と進化を支える最大の原動力の一つであると言っても過言ではありません。
長年にわたりデジタルマーケッターやウェブ開発者は検索エンジンに瞬時に認識されるウェブサイトを作成しサイト所有者と訪問者の両方に価値をもたらすように最善を尽くしてきました。
この探求の間に彼らは、コンテンツの最適化、リンク構築、インデックス可能性などにソーシャルメディアのプラットフォームを活用することから、さまざまなガジェットやツールの負荷を考え出してきました。
しかし時にはSEOの専門家は最適化はリンクやコンテンツだけではないことを忘れがちです。優れたSEOはウェブサイトのあらゆる側面に触れるべきでありサイトのコードも例外ではありません。
SEOを意識しコード化されたページは一般的にはインデックス可能性とより正確なインデックスを向上させることができます。
検索エンジンは最初の頃から常にHTMLに夢中になっていました。主にHTMLはページのコアを形成するよく構造化されたセマンティックなコンテンツのために設計されていたからです。
そのためスタイルシート、スクリプト、画像、ビデオ、その他ページやコンテンツの多くのセクションがどこにあるのかを検索エンジンが見つけるのに非常に役立ちます。
最大の問題はページ上のさまざまなセクションを定義する際に開発者が独自の方法を使用することが多く(ダメ、絶対)検索エンジンがウェブサイト上の目的のコンテンツを特定することがほとんど不可能になってしまうことでした。
HTML5 の導入によりウェブページの理解を向上させるために(開発者とブラウザの両方にとって)新しいセマンティック要素が追加され<div>や<span>のようなセマンティックでない要素に取って代わられた経緯があります。
当初HTML5 は開発者から「複雑すぎる」との評価を受けていましたが時が経ちセマンティック要素やその他の機能がウェブサイトやSEO対策に大きく貢献しブラウザとユーザーの両方に求めているものを与えてくれることが明らかになりました。
まとめ
今更HTML5の記事かよって思いの方もいらっしゃると思いますが、SEOのお仕事をしていると他の人が書いたHTMLに触れる機会がたくさんあります。
その中で目にしてきたHTMLはHTML5ではほとんどないのです。2020年12月ですよ?もうほとんど普及したと思っていたのですが、どうやら世の中はそうでは無いようです。
特に記事周りはHTML5で記述した方がSEO的にもメリットがありますので古いままでのHTML記述でしたら今すぐにでもHTML5に書き直した方が良いかもしれません。