マークアップとSEOの関係性

SEOとは「検索エンジン最適化」という意味でGoogleやYahooなどの検索エンジンで表示順位が上位になり訪問者を増やすことを言います。SEO対策を売りにしている制作会社は多いですが、どのような対策をしているのかは不明確です。今回はGoogleやYahooなどの検索に有効なマークアップ手法についてご紹介いたします。

すぐに始められるSEO対策のマークアップ

どんなタグを利用しても見た目を変わらずに実装することは可能ですが、タグを最適化することによって検索エンジンに引っかかりやすいページにすることが可能です。スキルもそれほど必要なくすぐに始められるマークアップについてまとめました。

html5要素の整合性

html5からheader,nav,main,section,aside,footerのタグが追加されました。サイトのヘッダー部分はheader、グローバルナビはnavというように各コンテンツの役割を指定できます。正しいレイアウトは下記の図のようになっています。

HTML5文章構造化マークアップイメージ

HTML5文章構造化マークアップイメージ

見出しの整合性

見出しタグにはh1〜h5が存在します。h1からh5まで飛び石にならずに設定することが重要です。
下記のように設定するのがベターです。

パンくずリストはolタグ

パンくずリストは順番がつくolタグで実装するのがベストです。下記が設定のサンプルです。

画像の配置に関して

ページに画像を表示するときにCSSで設定する方法とimgタグで設定する方法があります。
SEOという観点で比較致しました。

imgタグとbackground-imageの違い

imgタグで設定した場合、Googleの画像検索に引っかかる可能性があります。ページの内容に関わりのある図や写真の画像はimgタグで設定し、あまり関わりの薄いあしらいやイメージはスタイルシートのbackground-imageで設定するのが良いでしょう。

altの設定方法

imgタグのaltはGoogle検索のキーワードに関わってきます。この部分を設定することで検索ワードから画像が引っかかりサイトの流入につながる可能性があります。

metaタグの設定

metaタグは検索システムにこのページが何のページかを説明するタグです.

title,description

title,descriptionは下記のようにGoogleの検索に直接関わる内容になりますので非常に重要です。

title,descriptionの検索表示イメージ

title,descriptionの検索表示イメージ

keywords

keywrodsで設定した内容は、検索されたときのキーワードとして設定されます。

最新トレンドマークアップ

以上の設定は基本的な設定でしたが最新のマークアップ技術ではSNSで共有された時の表示や検索された時にdescriptionの内容だけでなくページの内容を見やすく表示する設定をすることもできます。
今回は概要だけ紹介いたします。

OGPメタタグ

OGPメタタグではFacebookなどのSNSの共有イメージを設定することができます。先ほどのdescription,titleなどと同じように設定できたり、Wordpressを利用している方はプラグインなどで簡単に設定することもできますので比較的ハードルが低いと思います。

Facebookデバッガーツールを利用して表示確認することもできます。

構造化マークアップ

構造化マークアップを利用すると下記のように検索画面を表示できます。単純にWEBページの記述を変えただけでは表示されないため、Googleのマニュアルに沿って設定する必要があリます。

設定方法はこちら

構造化マークアップサンプルイメージ

構造化マークアップサンプルイメージ

こちらもGoogleの構造化データテストツールを利用して確認できます。

まとめ

ご紹介した内容をを意識して制作すると、SEO的に効果が上がるだけでなく、記事の内容も整理されるので一石二鳥だと思います。また、デザインを制作する上でもマークアップをイメージすることでクォリティの高いものができると思います。
これを完璧にすれば確実に検索で流入数が確保できる訳ではないですが、できていいない場合、検索で表示されることはなかなか難しいと思います。基本部分に関してはSEOという視点で見たWEBページのクォリティの目安になると思います。
ぜひ、SEOで集客したいという方はマークアップ手法を取り入れて内容に集中できるWEBページを作ってみてください。