読者です 読者をやめる 読者になる 読者になる

わどぅー

記事については、中間出力の場合も多いので間違ってたらごめんなさい。twitter は waddlaw です。どうぞよろしく。

copsa じゃなくて cospa だよ! cospa のSEO対策がどうなっているか調査したよ。

業務の一環として SEO 対策、主に内部対策について色々と調査しているのですが、何が正しいのかイマイチわかってない・・・。

そこで、リブセンスが始めた cospa ではどんな感じでHTMLを記述しているのか調べてみた。内部対策が凄いといわれるジョブセンスの運営元なのできっと役に立つはず!
また、HTML5 で記述されているので、今後のサイト作りの参考になるのではないでしょうか。

ちなみに僕はSEOのプロとかそういうのではないのでご注意を。

既に先人たちが色々と調べているので参考にさせてもらいました。

対象のサイトはココ

0. キーワードと比率

トップページの文字数とキーワードの比率を SEO チェキで調べてみた。

キーワード 比率 キーワード 比率
cospa 4.04% コスパ 1.08%
価格 3.77% テレビ 1.08%
サイト 3.5% 商品 1.08%
最安値 3.5% 紹介 1.08%
比較 3.5% LP 0.81%
安い 1.89% ショップ 0.81%
価格差 1.62% パソコン 0.81%
カメラ 1.35% パーツ 0.81%
世界 1.35% ビデオ 0.81%
1.35% 周辺 0.81%
1.35% 提携 0.81%
時間 1.35% 本当 0.81%
PC 1.08% 機器 0.81%
あの 1.08% GT 0.54%
こと 1.08%

こうみると、キーワードの比率はSEOとして意味があると考えていそうです。
特に3.5%以上とそれ意外という区切りがありそう。

1.ドメイン

me って僕はあんまり見たこと無いので調べてみた。すると、モンテネグロのドメインだそうです。モンテネグロって国自体そんな聞いたこと無い・・・。

理由はよくわかんないですね。こんな記事もありましたが、値段安いからですかねぇ・・・。謎ぃ。

2.head 部分の記述

一般的には広く知られていると思うのですが、僕には新しい発見が多かったです。

タイトルタグ

<title>【cospa】通販の最安価格がわかる比較サイト</title>

内部対策を行う上で一番気にするポイントのタイトルです。先頭のキーワードの方がより強く作用すると言われています。
ここでは cospa が先頭に来てますね。

上記の違いってあるのかなぁ。たぶんSEO対策というよりも、ユーザの目に付きやすいからという意味合いの方が大きそうですね。
このタイトルから

  • cospa
  • 通販
  • 最安
  • 価格
  • 比較

このぐらいのキーワードで上位表示を狙ってそうだと推測します。

メタタグ

メタタグの書き方が少し変わっていて、全部先に content を記述するんですよねぇ。
ソースコード上読みやすいからなのか、SEO対策として意味があるのか、それとも趣味なのか・・・。

ディスクリプションタグ
<meta content="cospa(コスパ)ならあの比較サイトよりも安い価格がわかる!パソコン、家電、コスメなど、20万点以上の商品の最安値を紹介しています。あなたが探している商品の最安値を調べてみてください。あっと驚く価格が見つかります。" name="description" />

ここでも cospa が先頭に来てますね、意味あるかわかんないけど。
全てのディスクリプションタグを統一するサイトもありますが、cospaではサブページ以下もしっかり記述を変更してきています。後ろの部分は同じですけどね。

<meta content="パソコン・周辺機器の価格を紹介しています。格安価格がわかるのはcospa(コスパ)だけ!cospaは価格比較サイトです。パソコン、家電、コスメなど、20万点以上の商品の最安値を紹介しています。" name="description" />
<meta content="タブレットの安い比較が一覧できるcospa(コスパ)のページです。cospaは価格比較サイトです。パソコン、家電、コスメなど、20万点以上の商品のあの比較サイトよりも安い価格が見つかります。" name="description" />
<meta content="ICONIA TAB A200-S08G (チタニウムグレー)の安い比較をまとめたcospa(コスパ)のページです。cospaは価格比較サイトです。あの比較サイトよりも安い価格が見つかります。" name="description" />

一応、ディスクリプションの中にもキーワード cospa などが出現しますね。検索順位には影響しないと言われているけど、なんか意味あんのかなぁ。

キーワード

<meta content="価格, 比較, 通販, cospa, コスパ" name="keywords" />

キーワードの個数は5個前後が良いと言われてるので、そのまんまです。ここでは cospa が4番目。順番はあんまり関係無いのかな。

OGP (Open Graph Protocol)

僕はこの機能を全然知らなかったのですが、SNSをやってる方であれば設定するべきですね。

<meta content="website" property="og:type" />
<meta content="【cospa】通販の最安価格がわかる比較サイト" property="og:title" />
<meta content="http://cospa.me/" property="og:url" />
<meta content="http://cospa.me/assets/common/ogp.png" property="og:image" />
<meta content="cospa(コスパ)ならあの比較サイトよりも安い価格がわかる!パソコン、家電、コスメなど、20万点以上の商品の最安値を紹介しています。" property="og:description" />

詳しい解説は他のサイトを見てもらった方が早いです。

canonical タグ

最近話題のタグですね。重複ページにならないようにするために指定したりします。

<link href="http://cospa.me/" rel="canonical" />

自分自身に canonical を指定することで、カテゴリページも上位に表示させるようにしてます。
記述しなくても良いのでは?と思うのですが、SEO対策上、何か効果があるのでしょうか?

canonical タグについての使い方は Google がつい先日ブログで記事にしていたのでそちらを参照ください。

3. body 部分の記述

Google Tag Manager

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-GD7D" 
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-GD7D');</script>
<!-- End Google Tag Manager -->

結構最近出てきたサービスですよねこれって。
名前は良く聞くのですが、なかなか利用まで手が出なかったんですけども、便利な感じなので使ってみようかなぁ。
jquery mobile でスマホサイトとか作ってて、ページごとにヘッダとフッタを記述するの面倒だし・・・。

参考サイト

header タグ

HTML5 での記述なので、当然これは欠かせません。

<header>
  <div class="site-logo"><a href="/">copsa コスパ</a></div>
  <ul class="assist-nav">
    <li class="help"><a href="/ec/info/help">ヘルプ</a></li>
  </ul>
  <div class="mod-search">
    
  </div>
</header>

ここで一つ、cospa の中の人やお友達が居たら伝えて欲しいのですが、

  • copsa

になってますよ!!!
わざとやってるとも思えないので一応報告。

一番左上のロゴの部分はココ

<div class="site-logo">
  <a href="/">copsa コスパ</a>
</div>

アンカータグでキーワードを入れてきてますね。通常だとこのキーワードが画像に重なるので色々と工夫します。
cospa のやり方は

display: block;
height: 0;
background-repeat: no-repeat;
overflow: hidden;

のようにして、ボックスから文字の部分をはみ出させて、隠すという方法です。
SEO的にもスパムになりにくい (text-indent: -9999px; とかよりも) ようです。


あ、ちなみに画像は全てCSSスプライトで表示しています。やはり、高速化はSEO上ポイントになってるんでしょうね。

h1 タグ

<h1>価格を比較する</h1>

このタグは body タグのすぐ後ろが良いと色々なサイトで見て来ましたが、 cospa では 114行目とかなり後ろの方で記述されます。

今までのサイトでは h1 タグの中に無理矢理な感じでキーワードを設定したりといったことが、多々見受けられました。
しかし、cospa では構造に従いつつもキーワードを入れてくるという、とても自然な形で記述できていると感じました。

footer タグ

<footer>
  <div id="footer-inner">
    <div class="site-logo"><a href="/">copsa コスパ</a></div>
    <ul class="utility">
      <li><a href="http://www.livesense.co.jp/company/overview.htm" rel="nofollow" target="_blank">会社概要</a></li>
      <li><a href="/ec/info/terms">利用規約</a></li>
      <li><a href="https://www.livesense.co.jp/support/contact.htm" rel="nofollow">お問い合わせ</a></li>
    </ul>
    <p class="totop"><a href="javascript:void(0);">PAGE TOP</a></p>
  </div>
</footer>

ここでも copsa になってる・・・。わざとやってるのかなぁ、ただのコピペだと思いたいけど。
1つ気になったのが、コピーライト入れないんですね。SEO的には関係ないのかな。

【おまけ】パンくずリスト

HTML5パンくずリストをどう書くか参考になります。
また、アンカーテキストにキーワードが入っていると SEO 対策上良いそうです。

<nav id="topic-path">
  <ul class="" id="">
    <li class="" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/" itemprop="url"><span itemprop="title">価格の比較サイトcospa</span></a></li>
    <li class="" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">パソコン・周辺機器のカテゴリ一覧</span></li>
  </ul>
</nav>

タグとしては、nav タグを使っています。ここで1つ注目するのは構造化マークアップをしている点です。
なかなか導入してるサイトって少ない気がしますが、こういったことも1つずつ行なっていきたいですね。

参考

終わりに

他のサイトを調査するのは思ったより楽しいです、しかし、SEO対策としてどれが効果があるのか見分けるのは凄く難しい・・・。
順位を上げるためには、良質なコンテンツを沢山増やし、Google にインデックスしてもらう。これが一番確実ですね。