とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

食べログのPCサイトのSEO。h1タグの使いどころが工夫されている件

食べログのPCサイトのSEO。h1タグの使いどころが工夫されている件

Webサイト製作の勉強には

大手サイトのソースや設計、

つくりをみるのが勉強になる!

ということで、

今回は 食べログサイトの h1タグ の話。

 

食べログは古くからあるサイトなので、

PCサイトのデザインや設計は割と

古いところがあるかもしれませんが、

h1タグの配置が秀逸なので、ご紹介。

 

食べログのh1タグは、ヘッダ左上の

小さなテキストに設定されています。

ヘッダ左上の小さなテキストにh1が設定

ヘッダ左上の小さなテキストにh1が設定

 

「銀座・新橋・有楽町のグルメ・レストランガイド」がh1として設定されています。

これは地域で検索した結果の画面です。

では次にお店の詳細ページはどうなっているかというと。

 

ヘッダ左上テキストが動的に変更。店名+地域名がh1に設定される

ヘッダ左上テキストが動的に変更。店名+地域名がh1に設定される


「銀座 しのはら - 銀座一丁目(懐石・会席料理)」という具合に

店名ー地域・場所ー(ジャンル・カテゴリ名)という内容がh1タグになります。

 

SEOとしては地域名が入ると

強いとされている(都市伝説か?)ので、

この手法は効果アリだと思います。

ジャンル・カテゴリ名も表示させて

いるので、それも効果ありですね。

 

検索エンジン、クローラーはHTMLの

うえからソースを解析していくので、

bodyタグ直下にある文言やワードほど

重要視される傾向があります。

bodyタグのはじまりのほうに重要な

ワードを入れるとよいということですね。

 

食べログのヘッダにあるh1タグは、

ソース上、bodyタグに近い箇所にあり、

かつ動的にページ内容で適切に変更されていて、

地域名やジャンル・カテゴリ名といった

重要な要素もしっかり内包しています。

 

少し古い手法&デザインではありますが、

秀逸だなぁとおもいます。

 

ヘッダにサイトの概要(サマリー)を

入れているWebサイトがトレンド

になっていた時期があって、その名残

という感じもしますが、勉強になりますね。

 

ちなみに食べログのスマホはというと、

PCサイトと似たような構成になっています。

やはり地域名を含むテキストがh1に設定

されています。

スマホでも同様の構成。地域名を含むテキストはh1に設定されている

スマホでも同様の構成。地域名を含むテキストはh1に設定されている

 

このあたりはSEOの小手先の

テクニックであって、

SEOの本質は「良質なコンテンツ」なので、

結局のところ、コンテンツがよくないと

話にならないのですが、大手サイトの例で

こういう手法もあるぞ、というぐらいに知識

としてもっておくといいかなと思います。

 

SEOを意識して

ヘッダの領域をうまく使っているWebサイト

といえば、クックパッドとぐるなびも例に

上がります。

 

ぐるなびはh1タグではありませんが

店舗詳細ページでは、

ヘッダに左上に、地域名をリンクで

パンくずのように設置しています。

これもSEOには効果ありですね。

内部SEO対策として優秀。

(ちなみにスマホサイトでは構成が違って、店舗名がh1になっていました。)

ヘッダに地域名のパンくずを設置しているぐるなび

ヘッダに地域名のパンくずを設置しているぐるなび

 

 クックパッドは

トップページとサービス一覧への導線が

設置してあります。

トップページとサービス一覧への導線が設置

トップページとサービス一覧への導線が設置

サイト内を回遊しやすいように

ヘッダに重要なナビをシンプルに

配置してあります。

 

いまや世の中のWebサイトは

7割〜8割はスマホからの

アクセスなので、今回紹介した

大手サイトの事例は、実務に

生かす機会はないかもしれませんが、

 

大手サイトのSEOのTipsでした。