【自分備忘録】内部SEO施策殴り書き

コーディングするときに自分が気にしてる部分をまとめてみました。

セマンティックなマークアップ

文書構造的にちゃんと意味のあるマークアップをしましょう、的な感じかな(゜゜)

• header / footer
• main / aside
• article / section
• h1, h2, h3（h4以降はあってもなくてもOK。主要なのはh3まで）
  • h1は1ページに1つ（複数あるとペナルティ）
  • h1とtitleは全く同じにする必要はなし（かと言って、まったく違う内容なのはNG）
• figure
  • そのページ内で、意味のある（それがないと文章読んでも分からないー的な）図表に対してつけるタグ。

…とかまぁ、ここにあげたのは一部なので、他にも色々あるけども。。
divとかspanで組んじゃうところを、別タグで置くことで「ここはarticleだよ！」とか「ここはheaderだよ！」ってのをちゃんと示してあげましょうって感じ。
アクセシビリティ的なところでも、こういうマークアップは大事だそうな。

meta情報

検索結果表示に関わってくる大事な部分。

title

主要キーワードを入れて、MAX30文字前後。
あんまり長くなりすぎると、検索結果で切れちゃうから、なるべく主要ワードは先頭に入れるほうが良い。
でも基本的には「主要キーワード＞文字数」なので、主要キーワードを入れることが優先。

keywords

検索では使われることはないらしいが、あってだめなわけではないので、入れとくとよい。
主要キーワードを含めた、6ワード前後がベストって言われた。
特に重要度の高いワードは、最初に設定しておくとよい。

description

ページの説明を書く。Google検索とかで出てきたりする。
多少前後はするけど、全角110字前後で書くと。省略されずに表示される。
主要キーワードを、平均的に散りばめて書くとなおよし。
これもtitle同様、「主要キーワード＞文字数」なので、主要キーワードを入れることが優先。

構造化データ

これもセマンティックなページを作るために必要になるやつ。
クローラーに「このページはこういうこと書いてるぜー」「このページは誰が書いててこーいうジャンルだよー」ってのを教えてあげることができる。
これをすることで、検索結果にリッチリザルト（通常の検索結果ではない、ちょっと見た目に変化があるやつ）が表示されるようになる。

• パンくずリスト
• サイト内検索
• しごと検索
• How-to（最近、日本のGoogle検索でも表示が開始された）
• FAQ

などなど。。
自分がよく使ってるのは、パンくずリストかな（入れるの簡単だし）。
※構造化データを入れたからと言って、必ず検索画面にリッチリザルトが表示されるわけではないので注意！

パンくずリスト

<!-- https://sample.co.jp/about/のパンくず -->
<!-- 【ホーム > このサイトについて】みたいな感じになってた場合 -->
<script type="application/ld+json">
[
  {
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@id": "https://sample.co.jp/",
          "name": "サンプルサイト"
        }
      },
      {
        "@type": "ListItem",
        "position": 2,
        "item": {
          "@id": "https://sample.co.jp/about/",
          "name": "このサイトについて"
        }
      }
    ]
  }
]
</script>

他はGoogle先生が詳細書いてくれているので、気になる方は確認すべし。
* 構造化データ | Google Developers