「もっとSEO効果の高い、具体的な施策を知りたい」
「HTMLの書き方で順位が変わると聞いたので、自社サイトに実装したい」
SEO対策を行いたいと思うのはWEBサイト運営者であれば当然で、定期的に対策をアップデートし、できる限りのことを行いたいとステップアップを望まれる方も多いです。
近年は高品質なコンテンツをつくること、表示速度を高めることなどがSEOに関する話題の中心に上がることが多いですが、”HTMLを最適化して書いていく”ということも変わらず重要です。
ただ、昔はよく言われていた重要なキーワードはstrongタグで囲っていく、キーワードの出現率を高めるといったような方法は検索エンジンがあまり重要視しなくなったことから以前に言われていた対策の中にはそれほど効果がないものも出てきています。
では、今はどのようなことに気をつけていけばよいのか。
この記事ではその対策の一部分をピックアップしていきたいと思います。
今回の記事の中でポイントとなるのは、【構造化タグ】と呼ばれるコードです。
○構造化タグとは
簡単にいうと、検索エンジンが各WEBサイトから情報を拾っていくときに、「この情報はここにあります」と知らせる役割を持つコードです。
Googleには以下のように記載があります。
Google 検索では、ページのコンテンツを理解するための取り組みを日々続けています。ページの意図を伝える明示的な手がかりとして構造化データを提供してもらうと、Google はそのページをより正確に理解できるようになります。
引用：https://developers.google.com/search/docs/guides/search-gallery?hl=ja
タグの種類は様々あり、ページに合わせて書き込んでいきます。
この記事では、主要なタグを4つ、ピックアップします。
１．nav
２．article
３．section
４．aside
このようなタグをHTMLに書いていくことで、検索エンジンはWEBページ内に何が書いているかわかりやすくなります。
その結果、ページの評価が適正になる可能性が上がります。
また、今回ご紹介するタグより書き方が複雑なコードもあり、そのようなコードを駆使することにより検索エンジンの検索ページに固有の表示がされることもあります。
検索順位を上げるだけでなく、「検索結果ページでいかに注目を集めるか」も課題としたWEB制作をすることで、集客が成功しやすくなります。
また、検索結果ページの表示や、それに合わせたコードの書き方は日々新しくなっていきます。WEBサイトは一度つくったら終わりではなく、その状況に合わせて定期的にブラッシュアップすることも重要といえます。
それでは、各タグの果たす役割や効果についてまとめていきます。
１．ナビゲーションを示す「nav」
ナビゲーションメニュー、パンくずリストなどと呼ばれるリンクに使うコードが＜nav＞です。
訪問者さまが、ご自身の見ているページがWEBサイトのどこに位置するか把握するために付けられるものです。
このコードを付けることにより、「このリンクはナビゲーションです」とWEBサイトをチェックしにくるロボットに伝えることができます。
検索結果ページにもナビゲーションが表示されているので、検索エンジンも「ナビゲーションはどこか」探していることになります。わかりやすく表示することで検索エンジンの正しいWEBページ把握をサポートすることができます。
２．記事であることを示す「article」
ニュースやブログの個別エントリー、スポーツの結果ページなどが”記事”に分類されるWEBページです。Yahoo!ニュースなどはほとんどのページが記事ですね。
「article」コードを記載しておくと、検索エンジンが記事としてページを把握するため、検索結果にもさまざまな内容が反映されやすくなります。
記事の内容全体を「article」コードで囲みます。
検索結果ページには記事の画像や動画付きで大きく表示する機能や、検索キーワードによっては記事を優先的に表示させるなどの機能があるので、そのような場合にこのコードによってメリットがあることがあります。
「article」コードに加えて、著者名を示したり、公開日時を表示させたりするコードを追加すると、さらに詳細に検索エンジンが記事内容を把握してくれます。
コードの書き方やその項目についてはGoogleが公式ページで公開しています。それにならって記載していきます。
https://developers.google.com/search/docs/data-types/article?hl=ja
３．文章のまとまりを示す「section」
WEBページに文章を載せる場合、【見出し＋段落】で1つのまとまりとし、そのまとまりをいくつも積み重ねてWEBページ全体が仕上がります。
“文章（コンテンツ）はここにあります”とロボットに伝えるコードが「section」です。
↑２でご紹介したコード「article」の中に、「section」がいくつも使われることがあります。
“記事＝article”は、”文章＝section”がいくつも積み重なってできるからです。
４．ページ内の補足情報（メインコンテンツではない）を示す「aside」
WEBページ内にはメインの内容と、サブの内容が混じっていることがあります。
例えば、スポーツの試合結果記事では、試合結果を報じる文章が主となります。その主の内容には、２の「article」が使われます。
コード「aside」は、サイドバーなどに載る広告など本文にはあまり関係のない部分や、チームの紹介など補足として載せる部分に使用します。
http://recipe.suntory.co.jp/recipe/006073
レシピサイトでは、レシピの部分が主となります。
サイドバーの会員登録の部分に「aside」が使われていました。
運営者としてはWEBページを読んだ人に会員登録していただきたいですから、新規会員登録の説明は大切な文章ですが、レシピサイトとして考えると会員登録に関する情報はメインとはいえません。そのため、この部分に「aside」が使われているのです。
つまり運営者は、ページ内の情報は、”主（メイン）”と”補足（サブ）”に分ける意識を持つことが大切ということです。レシピサイトであればレシピを紹介した部分、スポーツニュースであれば試合結果を報じる部分がメインのコンテンツであり、サイドバーや広告（宣伝）部分がサブになります。
ここまで紹介したタグを使っていくことの他に、h1、h2といった見出しタグをページ内で適切に使ったり、alt（画像の代替テキスト）をしっかり書いて埋めていったりと、SEO対策のためにできることはいろいろあります。コンテンツをつくることやページ表示スピードの向上などと合わせて、ブラッシュアップしていくことがオススメです。
【過去記事参考】
→見出しタグの重要性と持っている3つの役割
→画像の代替テキスト（alt属性）のスピーディーで最適な書き方と抜け漏れチェック方法
５．SEO対策には「表」と「裏」を見る2つの目が必要
今回ご紹介したHTMLの書き方、構造化タグの使い方などは、WEBページを普通に閲覧しているとわからない、隠れている部分の話です。
WEBサイトをつくるときに、デザインや文章（コンテンツ）を悩んだり、更新頻度や担当者の役割など運営面を計画されたりすることと同じように、ぜひ「裏側をどうするか（＝HTMLの書き方、タグの使い方、必要な項目）」もお考えになってみてください。
デザインや文章を抜いて、WEBページをパーツの積み重ね、寄せ集めであると考えるとイメージしやすくなります。紙やパワーポイントで内容（メインコンテンツ）、広告・宣伝（補足情報）、写真、見出し…と枠をつくっていくと想像しやすくなります。
WEBサイトの新規制作やリニューアル計画時に、制作してくださる方々とこういった話し合いを持つことも大切だと思います。
まとめ
繰り返しになりますが、検索エンジンは常に進化し、ユーザーファーストのための施策を続けています。皆さまがお持ちのWEBサイトも見た目（デザイン）はそのままで運用するとしても、裏側のアップデートは定期的に行うことが重要です。
Googleにはこのような裏側の施策についても、「このようにしてください」という指針を出してくれています。今回ご紹介したようなタグについても書き方や、そのチェック方法なども解説が書かれています。
また、検索結果ページでの特別な表示についても、「こんな種類があります」と見せてくれています。
https://developers.google.com/search/docs/guides/search-gallery
専門的なのですべてを理解するというのではなく、「こんなことができるのだな」と情報収集の一貫としてチェックしてみてください。