調査・研究レポートReport

Googleはウェブ上のあらゆるものが意味を持っている「セマンティックWeb」を目指していると言われていますが、実際にセマンティックなウェブサイトを制作する上で何を注意すればいいかについて今日はまとめてみようと思います。僕が普段マークアップエンジニアとして、ウェブサイトのコーディングを担当しているときに意識しているSEOノウハウをある程度盛り込んだ記事にしようと思って書き始めましたので、コーダー・マークアップエンジニアの初心者の方にとって価値のあるページに仕上げたいと考えています。

また、ベテランにとっては「そんなもん当たり前」と思うことが多いと思うので読む価値はないと思います。

構造化タグで文書構造を定義する

Google検索エンジンなどのロボットが意味を理解できるように意識してマークアップを行うことをセマンティックマークアップを言います。セマンティックマークアップを行うためには、HTML5の時代以前からHTMLが持っている各要素の意味を理解し、適切な個所に適切な要素を配置することが求められます。その中でも特にSEOで重要と言われている要素をいくつか見ていきたいと思います。

構造化要素（セクショニング要素）

構造化要素（セクショニング要素）とは文書構造のアウトラインを形作るために使用するためのHTML要素のことを指しており、主に次のような要素がそれらに当たります。

• section
• article
• main
• aside
• nav
• header
• footer

上記の要素を利用することによって、ここからここまでが1つのセクション、ここからここまでが文章のヘッダー、ここからここまでが文章のフッター、という感じで1ページの文章全体の枠組みを定義することが可能になっています。

見出し要素（heading）

上記で全体のセクショニングを行った後には、各セクション毎に見出し要素（heading）を文書構造に従って準備し、文章のアウトラインを完成させる必要があります。

例えば一例としてセクショニング要素と見出し要素の使い方を示すと以下のようになります。

各ページのタイトルはh1要素

各ページのタイトルに関してはh1要素でマークアップするのが鉄則となっています。サイトロゴではないところに注意してください。ちなみにコーポレートサイトや採用サイトなど、法人向けのサイトの場合には、トップページのサイトロゴのみh1でマークアップしても問題はありませんが、下層ページは上記で書いた通りサイトロゴをh1ではマークアップしないことが注意事項です。基本的にはページタイトルをh1でマークアップする必要があります。したがって、WordPressのヘッダーテンプレートなどにおいては、トップページと下層で条件分岐を入れてトップはh1、下層はp（段落）といった使い分けが必要になります。

それから、各セクショニング要素をh1で開始しても問題ないという考え方もありますが、h1が複数存在するとサイト全体における文書構造がわかりにくくなってしまいますのでh1を複数用いる方法はあまりお勧めしません。h1はあくまでもページタイトルのみに利用する方法が私の中でのスタンダードです。

下層ページ各セクション内の見出し

見出し要素は一般的にはページのタイトルをh1を用いて表現し、大見出しをh2、中見出しをh3、小見出しをh4といった形で表現する場合がこれまでの経験上多いと感じています。SEOメディアや広告メディアなど、一般的なアフィリエイトサイトなどにしても 概ねこの見出しの構成を維持しているサイトが多いように思います。なので、知識のないコーダーさんなどが、ブログの個別投稿ページのスタイルを作る場合などは、概ね個別投稿のコンテンツをラッピングしている要素内にあるh2、h3、h4の各要素に対してスタイルを当てるのが正解だと思います。

その他の要素

その他の要素についても、HTML5で規定されているものに関しては、その意味に従って適切にマークアップすることを心がけてください。主要なものとしては次のようなものがあります。

• 段落
• 番号なしリスト
• 番号付きリスト
• 引用（ブロック／インライン）
• 表
• リンク
• 強調

上記が全てではなく、かなりの数の要素が存在するので、一度はリファレンスに近い形の教本などを読まれた方が良いと思います。これはプログラミングスクールや専門学校などでウェブの制作を習った方についても同様のことが言えます。概ねスクールで習うものは現実的に実務でよく使うであろう要素の抜粋であることが多く、カリキュラム的にも全てをカバーしていると時間がいくらあっても足りないため全体を把握できるものではない場合が多いです。そのため、プロとしてコーダー・マークアップエンジニアとしてお金をいただく仕事をするのであればタグリファレンスに目を通すことは必須と言えるでしょう。お勧めのリファレンスはこのページの一番最後に何冊かご紹介しますのでそちらをご参照ください。

時代と共に学ぶべきものが増えていく現実を追いかける必要がある

HTML5も年月を経るにつれて徐々にアップデートを重ねており、新たな要素などが徐々に追加されていきます。プロのマークアップエンジニアの仕事としては、常に最新情報をキャッチアップすることも必要ですので、常に最新の情報をキャッチアップしていく必要があると言えそうです。個人的な目線にはなりますが、最新の情報をキャッチアップする上でオススメのサイトをいくつか挙げておきますのでご参照下さい。

コリス（coliss）
https://coliss.com/

Webクリエイターボックス
https://www.webcreatorbox.com/

Webクリエイターボックスの中の人であるManaさんは2018年12月現在でオンラインプログラミングスクールの TechAcademy のメンターなども担当されておりました。
TechAcademyさんも初心者向けのオンラインプログラミングスクールとしては日本国内において非常に人気のあるサービスですので、予算と時間が割ける前提で、１～３か月間で集中的に学ぶ体制が整えられるなら非常にオススメなサービスです。WebクリエイターボックスのManaさんをはじめとしてプロのフリーランサーがメンターとして学習を支援してくれるので、業界知識など、知識だけでは測れない価値を見出すきっかけを得ることにもつながるでしょう。

構造化マークアップによるセマンティックウェブの実現

HTML5に規定されている要素をマークアップするだけでは検索エンジンなどのロボットに対して意味を理解させるには不十分な場合がありますので、それら不十分な情報を補完するための方法が構造化マークアップと呼ばれる手法となります。構造化マークアップは構造化データと呼ばれる規格をコードとして記述する必要があります。

構造化マークアップの3つの形式

構造化マークアップを行う方法として一般的には次の3つの方法があるとされています。

• Microdata
• RDFa Lite
• JSON-LD

Microdata

HTML5で追加され、schema.orgが最初に仕様統一を図った規格です。主にHTML要素にMicrodata専用の属性を付与することによって構造を表現していく手法になります。すべてがHTML要素に紐づく形でマークアップされるため目に見える部分に意味を表すコードも一緒になって保存していくことが可能なので、データとしてのまとまりがある扱いやすい手法と言えるでしょう。ただ、HTMLに属性がたくさん付与されるためある意味ではソースが見にくくなるといった状況もあるということだけ意識しておく必要がありそうです。

RDFa Lite

基本的な考え方はMicrodataと同じでHTML要素に属性を付与する形で構造化データを表現していく手法です。Googleの構造化マークアップ支援ツールが対応していない形式なので、個人的にはあまりお勧めしません。

JSON-LD

JSON-LDは上記2つとは違い、スクリプト要素の中にJSON形式で構造化データを記述することが可能な手法となっています。上記2つはHTML要素と紐づいているため目に見える部分に意味的なマークアップも存在する一貫性を担保できてましたが、JSON-LDの場合は意味を付与するためのコードをhead要素などに一か所にまとめて記述することが可能となります。個人的にも最もオススメなのがこちらのJSON-LDです。

構造化データとして表現できるもの

組織情報

組織として以下の分類を検索エンジンに伝えることができます。

• 航空会社
• 株式会社
• 教育組織
• 政府組織
• ローカルビジネス
• 医療組織
• 非政府組織
• パフォーマンスグループ
• スポーツ組織

上記の構造化データによって検索エンジンに正確に情報を伝えることによって、ナレッジパネルなどの検索エンジンUIへの表示を制御することなどが可能となります。ナレッジパネルに関する説明は以下のページに詳しくありますのでそちらを参照してみてください。

Googleマイビジネスのナレッジパネルとは？掲載できる内容や表示させるポイント。
https://hp-seed.jp/useful/311/

パンくずリスト

パンくずリストも構造化データで表現することが可能となっています。構造化データがなくともSEOには効果適面とされているパンくずですが、構造化データを行うことによってより正確に検索エンジンに情報を伝えることができますので、基本的には構造化マークアップまでが一通りの流れとして対応すると決めておくとよいと思います。パンくずリストに構造化マークアップを行わない制作会社もまだまだ多いと思いますが、プロのコーダー・マークアップエンジニア目線からすれば低品質と言わざるをえません。目に見えるものが全てではないということを認識することがSEOへの理解を深める視点として一つ重要な要素になるとは思います。

商品や口コミの情報

商品や口コミの情報を構造化マークアップすることによって検索エンジンに特別なスニペットでこれら商品などの情報が掲載される場合があるとされています。商品名や金額、評価などが一目瞭然の状態で検索エンジンに表示されることによってユーザーの反応は一般的には良くなるとされていますので、ECなどのネットショップの制作の際には、商品ページに対して構造化マークアップを忘れずに行うようにするべきかと思います。

サイト内検索

サイト内検索の構造化マークアップを行うことによって、検索エンジンに直接サイト内検索の検索ボックスを表示させることが可能になるようです。このあたりまでくると、どのようなケースで利用すべきなのかはいまいちイメージがまだつかめていませんが、そのような機能があるということだけ覚えておきましょう。

上記以外に構造化マークアップの対象となるもの

以下のようなものがあるとされていますので、必要に応じてマークアップすることによって、Googleなどの検索結果に普段と違った形式で表示させることなどが可能となります。検索順位で上位を狙える前提であれば、下記のような構造化マークアップを行って露出をさらに高めることによって、ユーザーへの吸引力を高めていくことが可能です。

• カルーセル
• SNSプロフィール
• レシピ
• 書籍情報
• イベント情報
• ローカルビジネス
• 音楽
• 製品情報
• 映画・TV番組
• 動画
• 求人転職

構造化マークアップ支援ツール

以下のURLから利用可能です。

https://www.google.com/webmasters/markup-helper/

構造化データの記述形式はJSON-LDが基本となりますので、JSON-LDを標準的に利用するという考え方で私個人的には問題ないとそう感じています。最近流行りのGoogle for Jobs への掲載などを目的として構造化データを記述する場合などにもこちらでチェックが可能なので試してみるとよいと思います。

Search Console でエラーを監視する

検索エンジンに対して適切に情報を伝えることができていない場合などには、Seach Console 上にエラーとしてリストされてきますので、そちらを確認の上、適切に対処することが必要になります。適切な対処を行うことによって検索順位の向上など、SEO面での効果が期待できると言い切ってよいでしょう。

また、無意味なスパムライクな構造化マークアップを行った場合にもSearch Consoleでエラーが確認できるようなので、不自然なマークアップになっていないかどうかなども確認することができそうです。不必要に構造化データを記述する必要性は全くありませんので、ありのままを検索エンジンに伝える用途で構造化マークアップを利用するという意識が必要かもしれませんね。

まとめ

以上がコーダー・マークアップエンジニア目線での構造化マークアップにおけるSEO目線のお話でした。この領域まで詳細に教えてくれるプログラミングスクールはそこまで多くないと個人的には感じています。プログラミングスクールなどのIT教育の現場において、先生の裁量一つで追加的に教えてもらえるお得な知識みたいな位置づけになっていることも多いコーディングの品質を高めるうえで重要なSEOに対応したマークアップ実務のお話でしたが、この記事の内容に書いてある構造化データの領域まではプログラミングスクールのカリキュラムに含まれているケースは稀でしょう。

どちらかといえば、SEOなどを担当するマーケティング担当者の領域になってくることが多いと思いますが、SEO担当者がHTMLの構文を深く理解し、自らコードが書けるというケースも稀だと思います。コーダー目線としては、必要なコミュニケーションを取りながらSEOに対してどこまで要求されているかを確認したり提案できるようになれば一歩レベルが高い領域に到達できたと考えてよいと思います。

特にSEOなど集客面で成果を出していきたいサイトの場合には、構造化データのマークアップは重要な要素になる場合が考えられるため、SEOに関する要件をきちんと把握し、求められている品質を正確にアウトプットできるように心がければ完璧だと思います。

コーダー・マークアップエンジニアはプロフェッショナルな職種である

上記で挙げたようなSEOに対する素養を持ったコーダー・マークアップエンジニアは少数派です。制作会社のアートディレクターの立場にあるデザイナーさんもSEOについての知見がないということを理由にSEOに強いマークアップの品質担保を怠ることも多いかと思います。そんな時はコーダー・マークアップエンジニアから「SEOに強いマークアップとは何か」という視点で提案してあげられと最高ですよね。

マークアップの仕事は「簡単だ」とか「誰でもできるから価値がない」とか言ってる人がもしいたら、そのような低次元な方に合わせているとマークアップエンジニアとしての品格もどんどん低下していくでしょう。そうならないためにも、日々研鑽を続けてマークアップの品質を常に向上させていくための心意気やプロ意識みたいなものがとても重要だと思う今日この頃です。特に見た目の部分は見れば誰でもわかる部分かもしれませんが、目に見えない部分の品質はソースコードを書いたコーダー・マークアップエンジニアだけにしかわからない領域です。責任を感じてください。

この記事に書いた領域が評価されるためには周囲にいるアートディレクターやデザイナーのレベルも高くなくてはなりません。周囲が理解できないからと言って努力を怠ることは絶対に間違っていると思います。見る人が見ればわかるものなので、然るべき人がソースコードを読むその瞬間が来る時まで黙々と努力を継続できれば、その他のマークアップエンジニアとは圧倒的な差別化要因になると思います。

書籍のご紹介

プログラミングスクール卒業後も、独学も
コーダー・マークアップエンジニアはとりあえずこれ全部頭に入れる

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版
https://amzn.to/2NIiDa8

資格なんて実務上あってもなくても一緒。個人的にはいらないと思っています。でも、その資格を学ぶために作られた書籍には結構な価値があると感じています。上記の書籍はHTML5のタグリファレンス的な使い方をする分には非常に良くまとまっているのでとてもオススメです。「こんな要素があるのか！？」って発見が必ずあると思いますので、現場で実際に手を動かしている方も一度目を通しておくことをお勧めします。基礎の基礎なので、ちょっと嫌味になるかもしれませんがあえて言えばコーダーとしては知ってて当然のレベルです。

受験費用は結構高いのですが、余裕ができれば受験して受かってしまえば会社やお客様へのアピールにもなって一石二鳥。僕にとっての「資格」とはその程度の認識ですね。資格をうまく活用し知識の隙間を無駄なく漏れなく埋めていく。資格に振り回されないように上手に活用してください。

SEOの参考書籍

現場のプロから学ぶ SEO技術バイブル

https://amzn.to/2EzIXzb

非常に良くまとまっていて現代のSEOについて全体的にざっくり把握するためにはとても参考になる書籍です。ざっくりとは言いましたが、内容は非常に深いので満足感はかなりあります。また、非エンジニアの方など、技術に精通していない方にとっては少し荷が重い書籍になるかもしれませんのでその点だけご注意ください。素晴らしく参考になる良書です。