マークアップとは？メリットや作成方法も紹介

マークアップはWEBページの内容について記した記述のことです。これを行うことで、検索結果に表示させやすくなります。ただ、初心者の方にとっては、どんな風に活用すればいいのかわからないのではないでしょうか。

そこでこの記事では、

• マークアップとは何か
• マークアップ言語の種類
• 実行するメリット
• 具体的な作成方法

について解説していきます。

この記事を読むことでマークアップについて理解できるので、自社サイトの運営に役立てることができます。初心者の方にも読みやすく解説しているので、ぜひ最後までお読みください。

マークアップとは

マークアップとは、WEBページの内容について記した記述のことです。この記述により、WEBページにどんなコンテンツが記載されているのかがより分かりやすくなります。

例えば、コンテンツの中で強調したい部分がある場合、太字が用いられているのを見たことがないでしょうか？また、内容によっては、箇条書きが用いられていることもあります。こうした装飾はマークアップによって実装されています。

マークアップを行う際に用いる言語のことを、「マークアップ言語」と言います。

マークダウンとの違い

マークダウンとは、WEBページ上のテキストを装飾したり構造を明確化したりする手法です。使用シーンもかなりマークアップと似ているのですが、マークダウンはマークアップ言語を簡易化しているという点で異なっています。

両者の違いをまとめると以下のようになります。

例えば、マークダウンは以下のような記述ができます。

このように、マークダウンはマークアップに比べて覚えるのがとても簡単です。

プログラミング言語との違い

プログラミング言語との違いは大きく2つあります。

①役割の違い

どちらもWEB制作に必要な言語ですが、両者は役割が大きく異なります。

マークアップ言語は、基本的にテキストへの意味づけを行います。例えばある箇所のテキストを太字にしたり、あるテキストが人名であることを記載したりします。

一方、プログラミング言語はWEBページの形成から、システム構築などに用いられます。そのため、テキストの表示だけでなく、計算処理など高度な動きも可能です。

プログラミング言語でできることの例は以下の通りです。

②難易度の違い

さらに、マークアップ言語とプログラミング言語は難易度が異なります。上記でもふれたように、プログラミング言語はシステム構築に関わる言語であるため、マークアップ言語よりも難易度が高いです。

難易度の観点からも、両者は全く異なる言語であると言えます。

マークアップ言語の種類

マークアップ言語には、「HTML」「XML」「SGML」「XHTML」などいくつかの種類があります。今回は、知名度の高いHTML、XMLについて解説していきます。

HTMLとXMLの違いは以下の通りです。

HTML

HTMLとは、WEBページの記述に必要な言語で、普段WEBページを閲覧できるのはHTMLで記述されているからです。HTMLで記載された情報はブラウザが読み込み、WEBページとして表示されます。

HTMLはタグを用いることで、太字や箇条書きなど、様々な装飾を行えることが特徴です。す。マークアップ言語の中でもHTMLがもっとも簡単で、以下のように簡単に装飾を行えます。

HTMLタグの例

XML

XMLとは、WEBページに記載しているテキストの構造を示していくものです。XMLもHTMLのようにタグを用いて記述していきますが、名前を自由に設定できるという点が異なっています。

また、HTMLが直接テキストの記述を表示する役割があるのに対し、XMLには検索エンジンに対してテキストの意味を理解させるという役割があります。

例えば「東京」というテキストを見ると、ユーザーは地名であると判断できます。しかし、検索エンジンはユーザーとは違い、「東京」というテキストを見込んでも地名なのか、名前なのか、それとも会社名なのか判断できず、単にテキストとして扱ってしまうのです。

こうした特徴から、検索エンジンにテキスト内容を理解してもらうためにもXMLタグが用いられるのです。XMLは英語でも日本語でも記述ができます。

XMLタグの例

マークアップを行うメリット

マークアップを行うことで、3つのメリットを得られます。

メリットを理解することで、自社サイトのパフォーマンスを最大化することができるでしょう。ここからは、それぞれのメリットについて解説していきます。

ユーザーに親切なサイト設計になる

アークアップによって、ユーザビリティの高いサイトになります。例えば、複数の情報を並列して書くよりも、箇条書きで書く方が分かりやすいです。また、見出しを用いて情報を整理すれば、目次を見ることで書かれている内容を簡単に理解できます。

もしこのような工夫がなければ、ユーザーは離脱してしまうでしょう。より多くのユーザーに閲覧してもらうためにも、ユーザビリティの向上は大切です。

検索結果に表示されやすくなる

マークアップによって検索結果に表示されやすくなるというメリットもあります。これは、マークアップによって検索エンジンがWEBページの内容を理解できるようになるからです。

検索エンジンは、ユーザーが入力したキーワードに対し、よりニーズに沿っていると判断したサイトを検索結果の上位に表示します。その時、検索エンジンはHTMLファイルを読み込んで内容を判断するので、検索エンジン向けの記述がないと上位に表示されません。

マークアップを行うことで検索エンジンに内容を伝えられるので、検索結果の上位に表示されやすくなるのです。

リッチリザルトに表示されることがある

近年ではリッチリザルトに表示されるというメリットにも注目が集まっています。リッチリザルトとは、検索順位とは別で、ユーザーにとって有益な情報として特別な方法で表示される手法のことです。

例えばGoogleで「リッチリザルトとは」と検索すると、その問いに最も適していると判断されたWEBページの記述箇所が上位に表示されます。

リッチリザルトはいくつか種類がありますが、検索順位の1位よりも目立って表示されることがあるため、ユーザーにサイトの存在を知ってもらったり、アクセスしてもらったりできるというメリットがあります。

マークアップによってリッチリザルトに表示されやすくなるのは、キーワード検索によるユーザーニーズに合っていると認定されやすくなるからです。

例えば、都道府県別のアルバイトの最低賃金について検索すると、上記のように箇条書きで表示されます。このページではマークアップによって箇条書きが行われていて、検索エンジンは箇条書きで表示すればユーザーにとって読みやすいと判断したからです。

このように、マークアップによってリッチリザルトに表示され、より目立って表示されるというメリットを受けられます。

構造化データをマークアップする方法

構造化データをマークアップする方法はHTMLに直接書き込む方法と、ツールを使用する方法の2つがあります。

そもそも構造化データとは、WEBページの記述内容に意味を持たせて検索エンジンが理解しやすいようにXMLで記述することです。構造化データはSEO対策として実行されることが多く、最近では構造化データの重要性が注目されるようになりました。

以下では、それぞれの方法について解説していきます。

HTMLに直接書き込む

HTMLファイルに直接書き込んで構造化マークアップを行えます。記述の際は、フォーマットに従って書き込むことが必要です。Googleでは、「scema.org」を用いることを推奨しています。

ただし、初心者の方にはこの方法はおすすめしません。それは、記述を誤って表示が崩れる恐れがあるからです。また、関係のない箇所を誤って触ってしまい、バージョンが分からなくなって元に戻せなくなるというトラブルも発生します。

ツールを使用する

初心者の方には、ツールを用いた方法をおすすめします。ツールを活用すれば言語の知識がなくても簡単に操作できます。また、ファイルを上書きしてしまうトラブルも回避できるでしょう。

今回おすすめするのは、「マークアップ支援ツール」と「データハイライター」の2つです。

①マークアップ支援ツール

出典：マークアップ支援ツール

マークアップ支援ツールとは、Googleが提供しているツールです。XML言語などが分からない初心者の方でもマークアップができるように開発されました。

ツールの使用手順はとても簡単です。

はじめに、ページの情報を入力していきます。

続いて、意味付けを行いたい箇所を選択して、アイテムを選択します。例えば日付のテキストを選択して「公開日」というアイテムを選択すると、このテキストが公開日であることを意味付けできます。

完了したら「HTMLを生成」というボタンをクリックします。

最後に「ダウンロード」をクリックするとファイルを保存できます。

このように、ツールを用いれば言語の知識がなくてもファイルの生成ができます。

②データハイライター

データハイライターとは、Googleが提供しているツールです。このツールはマークアップを行えない場合に用いられるツールで、検索エンジンに直接WEBページの記述内容を知らせる役割を果たしています。

データハイライターを使用するにはGoogleサーチコンソールとの連携が必要です。もしGoogleサーチコンソールを使用していない方は、先に登録を行っておきましょう。

データハイライターを用いる際は、1点注意があります。それは、用意されているプロパティの中でしか情報を送信できないことです。通常、マークアップは自由にカテゴリを設定できるのですが、データハイライターの場合は用意されたカテゴリの中でしか設定できません。

もし不十分に思うようであれば、HTMLやXMLに詳しい人に依頼するといいでしょう。

まとめ

この記事では、マークアップについて解説していきました。マークアップを行うことで、ユーザーにとって読みやすいWEBページを制作できます。また、検索エンジンからの評価が高まり、検索結果に表示されやすくなります。

マークアップは直接HTMLファイルに書き込むことができますが、初心者の方はツールを使用することをおすすめします。ツールを用いればプログラミング言語の知識がなくても簡単に操作できます。

マークアップを書くには、流行の変化やクライアントの要求を満たす提案が行えるよう、常にスキルをアップデートしていくことが大切です。単純な記述だけではなく、SEOを意識したマークアップなどが必要でしたら、ぜひトモガラへご相談ください。