目には見えないけど重要な“マークアップ”について

2021/09/02

コーディング

まるこ

Webサイト制作では、デザインをブラウザ上で表示できるように、「コーディング」というソースコードを記述する作業を行います。HTML・CSS・JavaScriptなど、色々なコンピューター言語を使用して行うコーディングの中で、HTMLでWebページを構成することを「マークアップ」と言います。

Webサイト制作の流れをご存知の方は、「マークアップ」という言葉を聞いたことがあるかもしれませんが、マークアップはWebサイトを作る上で重要な作業のひとつです。

本記事では、「マークアップってなんだろう？」「マークアップはSEOに影響するって聞いたけど…」などの疑問をお持ちの方に向けて、マークアップの意味や役割、SEOとの関係性についても簡単に解説します。

マークアップとは
マークアップとSEOの関係
まとめ

マークアップとは

マークアップは「コンピューターが文書構造を理解できる言語を使って、文書を構成する作業」です。
また、マークアップを行うために使用されるコンピューター言語を“HTML”と言います。

マークアップをする前の文書は、「どこが見出し」で「どこが画像なのか」など、コンピューター側では各部分の役割を判断できません。そこで、「文書がどのような構造／構成になっているか」をコンピューターに正しく伝えるために、HTMLを使用してマークアップを行います。

HTMLとは？Webページの土台であるHTMLについて簡単解説

「マークアップ」という用語は、英語圏で伝統的な出版の作業過程である原稿の「マーキング・アップ」という作業から派生した。「marking up」とは、原稿用紙の余白に印刷に関する指示の記号を書き加えることである。（中略）英語のmarkupに対応する印刷用語は、組版指定であり、書体・文字サイズ・行数・行間・字数・字送りなど，組体裁を定めるうえで必要となる情報を指定することである。英語では、電子組版、コンピュータ上での組版へと移行してもmarkupが用語としてそのまま使われている。
出典元：Wikipedia｜マークアップ言語_語源

HTMLを記述することがマークアップではない

HTMLコーディングでは、Webページの文書構造／構成を踏まえ、適切なHTML要素（どのような意味や役割を持っているか）を使用します。

以下の例をご覧ください。

①「マークアップ」されていない文書	②「マークアップ」された文書
<div class=”header”> <div>大見出しです</div> <span>説明文が入ります</span> </div>	<header class=”header”> <h1>大見出しです</h1> <p>説明文が入ります</p> </header>

どちらの文書もHTMLを使用してコーディングをしています。しかし、①は単体では意味を持たないHTML要素（div／span）を使用しており、構造／構成を明確にできていないため、「マークアップされた文書」とは言えません。

div：単体で意味（見出し・段落など）を持たない。複数のHTML要素をまとめてグループを作る・一部分だけ装飾を変えたい・他のHTML要素に該当しないときなどに使用。高さ・幅の指定ができる。
span：特徴・使用方法はdivとほぼ同じだが、高さ・幅を指定はできない。

2014年にHTML5（改定第5版）が発表されるまでは、例文のようにdivやspanなどのHTML要素を多く使用して、Webサイトを作成していました。文書構造を明確にできるHTML要素があまり多く存在していなかったので、仕方ありません。

また、マークアップされていない文書でも、ブラウザ上の表示はマークアップされた文書と同じにできるため、パッと見た限り問題はないでしょう。

それなら「マークアップ」なんて難しいこと考えなくていいんじゃない？？

こんな風に思う方もいらっしゃるのではないでしょうか。たしかに、Webページを見るのが視覚で閲覧できる人だけであれば、情報を得る上であまり大きな問題はないと思います。
しかしWebページから情報を得ているのは、人だけではありません。音声読み上げソフトや検索エンジンのようなシステムも、Webページの情報を取得しています。

前述したとおり、マークアップは「文書がどのような構造／構成になっているか」をコンピューターに伝える役割を持っています。
つまりマークアップは、人だけに向けた作業ではなく、コンピューターが正しい処理を行うために必要であり、「HTMLを記述する」のと「マークアップする」のは、同じ意味ではないのです。

セマンティック・マークアップ

HTML5から、「セマンティクス」という概念が強くなりました。

セマンティクスとは、“意味論（言語が持つ意味や構造の研究）”という言語学の分野で用いられる言葉ですが、IT分野でのセマンティクスは、「データが持つ意味」を指します。

HTML5では、「セマンティック要素＝意味を持つ要素（header要素など）」が追加され、文書の構造／構成をより明確化できるようになりました。そして、セマンティック要素を使用してコーディングすることを、「セマンティック・マークアップ」と呼びます。

それでは、先ほど例にあげた文書をもう一度見てみましょう。

①「マークアップ」されていない文書	②「マークアップ」された文書
<div class=”header”> <h1>大見出しです</h1> <span>説明文が入ります</span> </div>	<header class=”header”> <h1>大見出しです</h1> <p>説明文が入ります</p> </header>

②はheaderというHTML要素で全体が囲まれています。①との違いは、Webページのヘッダー部分を明確に示しているところです。

このように、文書の各部分がどのような意味・役割を持っているかを明確にしながら、Webページを構成する作業がマークアップなのです。

header：文書のヘッダーを指す。主にWebサイトのタイトル・ロゴ・ナビゲーションなどが置かれる場所に、使用されている。

セマンティック・マークアップの利点

Webページの構造／構成を明確化できる
検索エンジンが、Webページの情報を収集／分析したり、検索キーワードに関連が高い結果を反映（表示）する際に役立つ
音声読み上げソフトを利用しているユーザー（目の不自由な方など）が、Webページを操作する際の補助となる

マークアップ前後の文書をくらべてみよう

それでは、文書がどのようにマークアップされるのか見てみましょう。例として、Webサイトに載せたい以下のような文書があるとします。

マークアップ前	新商品発売のお知らせ〇月〇日に新商品が発売になります。タオルマグカップ時計詳しくは商品一覧ページへ
マークアップ後	<article> <header> <h1>新商品発売のお知らせ</h1> </header> <p>〇月〇日に新商品が発売になります。</p> <ul> <li>タオル</li> <li>マグカップ</li> <li>時計</li> </ul> <p>詳しくは<a href=”https://www～(※リンク先)”>商品一覧</a>ページへ</p> </article>

2つの文書を見比べると、マークアップ後の方は、文章が何かに囲まれてますね。この文章を囲んでいるものを「タグ」と言い、HTML要素を構成する際に使用します。
マークアップ前の文書に以下の役割を持ったタグを付与し、コンピューターにWebページの構造／構成を認識させています。

<article>	独立したコンテンツをくくる（記事等に使用）
<header>	ヘッダー
<h1>	見出し
<p>	段落
<ul>	箇条書きリスト（外枠）
<li>	リストの中身
<a>	リンク先

HTML要素とは

HTML文書は、要素の集合体で構成されています。
ひとつの要素は、「開始タグ」「内容（テキストなど）」「終了タグ」でできています。（タグには終了タグが存在しないものもあります。）

HTML要素の具体例。開始タグと終了タグにテキスト（新商品発売のお知らせ）が囲まれています。

［余談］マークダウンとは

マークアップと似た言葉で、マークダウンというものがあります。
マークダウンは文書記法（書き方）で、「#」「-」「*」といった記号を使用して、文書構造を組み立てます。
マークアップよりも「手軽に文書構造を明示できる」「覚えやすい（タグを覚える必要がない）」などのメリットがあります。（出力される内容は、マークアップで記述したものと同じです。）
専用ツールを必要としない、オフラインでも扱えるなど、記法を覚えると、普段使用する議事録やメモも簡単に構造化できます。
【日本語Markdownユーザー会】Markdownとは

マークアップとSEOの関係

ここまで、マークアップの概要についてお話ししましたが、マークアップを調べると“SEO”というキーワードも、よく一緒に登場します。そこで、この章ではマークアップとSEOの関係について解説します。

SEO＝Webサイトの内容を検索エンジンが理解しやすいように最適化すること

SEOとは「Search Engine Optimization（サーチ・エンジン・オプティマイゼーション）」の頭文字をとった略称です。日本語では「検索エンジン最適化」と言います。

Googleなどの検索エンジンは、インターネット上にある膨大な情報（Webサイト、画像ファイルなど）を探すために使用されているシステムです。

検索エンジンは「ウェブクローラ」というソフトウェアを用いて、定期的にWebページの情報を収集しています。
ウェブクローラで収集した情報は、内容（Webページ内のコンテンツや画像など）の分析を行い、「インデックス」という巨大なデータベースに格納されます。
そして、ユーザーが検索したキーワードの内容に合った検索結果を、あらゆる面（所在地や言語など）を考慮し、インデックス内から探して表示します。

このように検索エンジンは、ユーザーが求める内容を見つける手助けをしています。
そのため、検索エンジンがWebサイトの内容を理解し、適切な検索結果を表示できるよう調整する必要があります。

この調整を「SEO＝検索エンジン最適化」と言います。

検索意図を把握する
ウェブページの関連性
コンテンツの品質
ユーザビリティ
文脈の考慮
出典元： Google 検索アルゴリズムの仕組み

GoogleのWebページ評価基準

まず大前提として、検索エンジンの有無に関わらず、制作するWebサイトが「ユーザーにとって、役に立つ・価値が高いものであるか」がとても重要です。その上で、SEOを行うのは「検索結果で上位表示させたい」というのが、もっとも大きな理由だと思います。では、どうすれば上位表示を実現できるのでしょうか。

Googleでは「検索品質評価ガイドライン」という資料を公開しており、Webページの評価基準を記載しています。

【Google 検索品質評価ガイドライン（PDF資料）】
https://static.googleusercontent.com/media/guidelines.raterhub.com/ja//searchqualityevaluatorguidelines.pdf

ガイドラインには、200項目以上の評価基準を設けてありますが、特に「ページの品質」及び「検索結果がユーザーのニーズを満たしているか」を重視して、評価を行っているとあります。

ページの品質

「E-A-T＝Expertise（専門性）／Authoritativeness（権威性）／Trustworthiness（信頼性）」という3つの要素を兼ね備えたページであること

検索結果がユーザーのニーズを満たしているか

キーワードからユーザーがページに辿り着いた際、そのページの内容や操作性（ページ遷移やアプリダウンロード）などが、ユーザーにとって満足できるものであるか
※モバイルユーザーを基準にしている

重要とされている2つの評価基準の一方を達成していても、高評価は得られません。「E-A-Tを兼ね備えた、ユーザーのニーズを満たしているページ」が、品質が高いページとして高評価を得ることになります。

マークアップと検索順位の関連性

マークアップの内容は検索順位に影響するのかなぁ？？

検索エンジンは日々進化しています。Googleのウェブクローラは、ブラウザ上で正しくWebページが表示されない場合（閉じタグ忘れなど）をのぞいて、HTMLの記述誤りは自動で補正する機能を備えており、情報収集や分析に大きな影響はありません。※ページ評価のペナルティも科されません。

また「h1（重要キーワード）は1ページに1つしか使用できない」など、HTMLの記述方法が、検索順位に影響を及ぼすといった情報も耳にしますが、これは誤りです。仕様上、h1はページ内で複数利用しても問題ありません。

このように、マークアップの内容そのものが、検索順位に直接影響を及ぼすことはないでしょう。
ただし、検索エンジンがWebページの内容を収集／分析し、ユーザーニーズを満たす検索結果を表示するためには、正しくマークアップ＝セマンティック・マークアップを行う必要があります。

そして、セマンティック・マークアップを意識して出来あがったWebサイトは、ユーザーが求めている内容と関連性が高い＝高品質でユーザーニーズを満たしているサイトになるでしょう。
その結果として、検索結果が上位に表示される可能性は、あると言えます。

1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
2. 1 つのことをとことん極めてうまくやるのが一番。
3. 遅いより速いほうがいい。
4. ウェブ上の民主主義は機能する。
5. 情報を探したくなるのはパソコンの前にいるときだけではない。
6. 悪事を働かなくてもお金は稼げる。
7. 世の中にはまだまだ情報があふれている。
8. 情報のニーズはすべての国境を越える。
9. スーツがなくても真剣に仕事はできる。
10. 「すばらしい」では足りない。
出典元：Googleが掲げる10の事実