SEOの内部対策をしていきたいけどどうやったらいいんだろう？なんだか難しそうだけど・・・
本記事では上記のような疑問を解決します。
SEOで内部対策をするためには避けては通れないのが「構造化マークアップ」です。
その名の通りHTMLで使えるマークアップ手法の一つですが、実際どんな目的で、何をどのように書くのか分からないという方も多いのではないでしょうか。
今回の記事ではそんな方のために構造化マークアップが何なのか、またどのように書くべきかという事を掘り下げて解説したいと思います。
SEO内部対策とは？
一般的にSEO対策には、以下の3種類があります。
SEO対策の種類
・コンテンツSEO
・内部SEO
・外部SEO
コンテンツSEOや外部SEOについては別の記事に譲るとして、ここでは内部対策について深堀していきたいと思います。
内部SEOとは、WEBサイトや記事の構造に対して行う施策であり、検索エンジンから正当に評価してもらうための施策です。
そもそもサイトにはGooglebotと呼ばれるクローラーが定期的に巡回し、記事のチェックを行ってくれますが、この内部対策が上手く出来ていないとクローラーの巡回が上手くいかずせっかく良い記事を書いていても正当に評価されないということが起こりえます。
そのため、クローラーが巡回しやすいサイト構造を作るうえでSEO内部対策は必須と言えます。
主な内部対策
・タイトル
・h2などの見出し
・画像のalt属性
・メタディスクリプション
・内部リンク
・サイトマップ
・構造化マークアップ
構造化マークアップとは？
では早速ですが構造化マークアップとは何かについて見ていきましょう。
構造化マークアップとは、検索エンジンが各サイトを調べる時に使うクローラーと呼ばれるロボットに明確にサイトの情報や意味が伝わるようにコードを書く方法の事を指します。
別の言い方でセマンティック(意味のある)マークアップという言い方をする場合もあります。
構造化マークアップを行うことで、人にもクローラーにも、より詳しいサイトの情報や、文章の情報を伝えることが出来ることが構造化マークアップのメリットの一つです。
そして、構造化マークアップを行うためには構造化に適したタグを使う必要があります。
例えばですが、HTMLには<div>というタグがありますよね。
これはHTMLの要素を一つのブロック、一つの括りとして表現する際に使うタグですが、div自体には特に「意味」はありません。
CSSなどでデザインを指定する際に便宜上要素を囲う時に使用するタグが<div>タグだと思います。
そこで<div>タグではなく、構造化マークアップで使うタグを使えばその括りに意味を持たせる事が出来、Googleのクローラーに「この部分は記事なんだな、この部分は導入部分なんだな」と意味を持って伝えることができます。
サイトを構造化するためには、この構造化するためのタグと構造化マークアップを知ることが欠かせません。
以下でまずはタグについて見ていきましょう。
構造化マークアップのための代表的なタグ
構造化マークアップのための代表的なタグを以下の表にまとめました。
これらをサイト内で使用することでよりサイトの構造がGoogleクローラーに伝わりやすくなります。
| タグ | タグの意味 |
|---|---|
| header | 導入部分であることを指す。文章のヘッダ情報を表すタグとは違うため注意 |
| nav | グローバルナビゲーションメニューやパンくずリストなど、サイト内の主要なリンクに使用する |
| section | 見出しがつくテキストのまとまりであることを指す。見出し+文章で構成される |
| article | 記事であることを示すタグ |
| aside | 補足情報であることを示す。本文と関連しつつも、区別して掲載する補足情報。また、サイドバーとしても使用される |
| footer | フッターであることを示す。コンテンツの制作者や著作権を表すCopyrightを記述する |
HTMLを勉強している方であれば基本的なタグですので、ある程度馴染みがあるタグばかりではないでしょうか。
何気なくこれらのタグを使っている方もおられるかもしれませんが、これらのタグを使う事で構造化マークアップを行うことが出来ます。
<body>
<header>
ヘッダーの内容
</header>
<nav>
ナビゲーションの内容
</nav>
<section>
セクション
<article>
記事
</article>
<article>
記事
</article>
</section>
<aside>
サイドバー
</aside>
<footer>
フッターの内容
</footer>
</body>サイト設計をする上での注意点
では構造化するためのタグを知った上で、サイトを設計する際の注意点を見ていきましょう。
divタグを多用してしまう
先にも書きましたが、構造化マークアップの視点ではdivタグ自体には意味が無いため、divタグばかりを使うと構造化マークアップからは遠ざかってしまいます。
<div>タグはあくまで、CSSなどが及ぼす範囲を限定するために囲うためのものであり、文書構造を明示する役割は一切ありません。
そのため、<div>タグを多用せず、区切りでは<seciton>や<article>などのタグを使うようにするとよりGoogleのクローラーにサイトの設計が分かりやすく伝わることになります。
<section>タグの中に<h1>タグを多用する
同一記事に複数のh1タグを使用しても検索順位への悪影響は無いとされていますし、Googleのジョン・ミュラー氏もこのことを理由に検索順位を下げるアルゴリズムは無いと以下のようにX(旧Twitter)で公言しています。
質問の和訳
見出しタグの使用について。1つのウェブページでは、いくつのh1タグを使うべきでしょうか？1つだけですか？
回答の和訳
お好きなだけどうぞ
ただ、<section>タグの中で<h1>タグを多用してしまうと、人の目から見ても文章の構造が分かりにくくなってしまうというデメリットがあります。
構造化タグを書いたからといって直接検索エンジンに影響は無いのですが、<seciton>で区切ることでよりGoogleのクローラーが適切に文書構造を認識するサポートをすることができます。
また、結果的に読者も読みやすく、可読性が高くなるため理解しやすい内容を届けることが出来るようになります。
ではここからは構造化マークアップの手法について掘り下げます。
構造化マークアップの手法
構造化マークアップの手法は主に２つあります。
まず１つ目の書き方であるMicrodataについて見ていきます。
Microdata
MicroDataはHTML5から導入されました。
通常、MicrodataはHTMLの中に文書の中にメタデータを埋め込むために使用されます。Microdataを使うことでタグに意味を持たせることができます。
現在では多くのWEBサイトで導入され、広く普及している書き方です。
Microdataの記述例
<div itemscope>
<p>僕の名前は<span itemprop="name">しの</span>です</p>Microdataで用いる属性
| 属性 | 属性の意味 |
|---|---|
| itemscope | 検索エンジンに送る情報を記載することを宣言します |
| itemprop | name、description、imageなどのラベルをプロパティに意味づけするものです |
| itemtype | 情報の種類をURLで明記します |
Microdataを使ったところで見た目に何か変化があるわけではありません。
しかし、Microdataを使う事でHTMLタグに意味を持たせてGoogleクローラーに伝えることが出来ます。
上記の例では、「しのという文字列はnameである」ということを伝える事ができる、というわけです。
Microdataのメリット
・構造化データと実際のHTMLが一致しやすい
・多くのWEBサイトで使用されているためサンプルが多い
逆にデメリットとしては、HTMLのタグに直接書き込むため、コードが見にくくなることや、メンテナンスがしにくくなることなどが挙げられます。
JSON-LD
JSON-LDとは、「JSON Linked Data」の略称で、JSONに意味を持たせる機能を持たせたもののことを指します。
JSONとは「JavaScript Object Notation」の略で、「JavaScriptのオブジェクトの書き方を元にしたデータ定義方法」のことです。
引用元：TOSPIC
JSON-LDを使うことで、検索エンジンにより自サイトの情報を詳しく伝えることができます。
JSON-LDのメリットは以下です。
JSON-LDのメリット
・HTMLソースに影響を及ぼさない
・データを１箇所にまとめて記載するためコンピューターだけではなく人間も読みやすい
・データを記述する量が少なくて済む
直接HTMLタグに書き込むMicrotdataと違い、headタグに一括して書くため管理しやすく結果的に可読性も上がるためメンテナンスもしやすくなるところが一番のメリットだと感じます。
ちなみに、JSON-LDは「"key":"Value"」で表記します。
基本的にはHTML内のどこに記述しても良いですが、便宜上<head>内に書いておくと良いと思います。
JSON-LDで用いるキーの意味
| Keyの名前 | Keyの意味 |
|---|---|
| context | 使用する構造化マークアップの企画の定義をします |
| type | WebsiteやArticle、Itemなど |
| @がつかないKeyの名前 | 型のプロパティにラベル付けをします。 |
KeyとValueで１つの組み合わせとなり、初めて意味を成すことになります。
１つの組み合わせの後には、必ず「,」(カンマ)を入れるようにしましょう。
配列を使う場合は[](角カッコ)を使います。
実際の記述例
<head>
<script type="application/ld+json">
{
"@context" :"http://schema.org/",
"@type" : "Website",
"@name" : "shino's Blog",
"@description" : "WEB制作やSEO対策、WEBライティングなどの情報を発信しているブログです",
"url"："https://webstyle.work/",
"@key" ：[
"@key" ："value",
"@key" ："value",
"@key" ："value",
]
}
</script>
</head>JSON-LDは<head>タグの<script>タグの中にまとめて記載することができるため、Microdataと違い管理も楽ですし、スッキリ書くことができます。
まとめ
今回はSEOの内部対策である構造化マークアップについて見てきました。
最初は難しく感じてしまうかもしれませんが、書き方さえ覚えればサクッと書くことが出来るおと思うので、ぜひチャレンジしてみてください。
というわけで本日の記事は以上です( ͡° ͜ʖ ͡°)
また明日の記事でお会いしましょう。
おしまい。