B-Teck!

お仕事からゲームまで幅広く

【SEO】SEOの勉強メモ(サイト構成編)

SEO

新しい仕事がWebメディア寄りの業務も触ることになりそうだったので、
SEOについて総ざらいしてみました。
とりあえず今回はHTMLの記述で気をつける点についてです。

内容は下記あたりを主に参考にしています。

最新のGoogle対策! これからのSEO Webライティング本格講座

最新のGoogle対策! これからのSEO Webライティング本格講座

これからのSEO内部対策 本格講座

これからのSEO内部対策 本格講座

support.google.com

ライティング編も併せてどうぞ beatdjam.hatenablog.com

HTMLの記述

HTMLの記述について、記述するべき内容や目安など

title

  • ページの内容を短く説明する。
    bodyにかかれている内容を簡潔に表す。
    不要な句点、読点、スペースは削除し、伝えたい内容だけを表現する。
  • 他のページと同じtitleにならないようにする。
  • 半角40文字 全角20文字程度 最大でも24文字以内に収める。
  • titleは|や-などを用いて区切ることも可能。
    例) サイト名などを表示する
    SEO対策はB-Teck! | B-Teck!
    SEO対策は - B-Teck!
  • 区切り文字を入れる場合でも、キーワード重複は1つまで
    SEO対策の36箇条 - SEO対策のB-Teck!
  • 複数ページにまたがる場合はtitleにページ数などを入れ、同じにならないようにする

description

  • ページの内容を簡潔にまとめた概要を書く。
    コンテンツ内の抜粋ではページの内容をまとめた概要にならないので注意。
  • 他のページと同じdescriptionにならないようにする。
  • スマートフォン向けに50文字程度、全体で110文字程度に収める。
  • 同じキーワードを過剰に用いないように気をつける。

アンカーテキスト

  • 簡潔で説明的なテキストを使用する。
    リンク先の内容がわかるように、かつキーワードを用いたり関連性のある言葉を使用する。
  • リンクだとわかるような装飾をする。 本文と同様の装飾では気づかれなくなってしまう。
  • リンク先はtitle、description、h1などにアンカーテキストを含んでいると良い。
    必須ではないが、それらの中にアンカーテキストで用いた言葉が含まれていることで、
    ユーザーが求める内容を得られるということを明示できる。

画像

  • ファイル名やaltテキストは画像の内容を適切に説明したものにする。
    汎用的な名前は使用しない。
    image1.jpgや、noname.jpgではなく、
    flower_rose.jpgのように画像の内容を表す名前が良い。
  • altテキストを設定する。
    基本的にaltテキストは全て設定するべき。
    画像が表示できない場合altテキストが表示されるため、
    altテキストのみで内容が想定できるようなものが望ましい。
  • 通常の画像はpngかjpg アニメーションはgifを使用する
  • 画像もsitemap.xmlに登録するとインデックスを促進できる

属性

metaタグ内やリンクなどに設定する属性について。

<a href="https://google.co.jp/" rel="nofollow">google</a>

や

<meta name=”robots” content=”nofollow”>

等のように用いるもの。

alternate属性

下記のようなケースで別のURLが存在する時、その代替URLを定義する。
* スマホ向けとPC向けで別のURLが存在する場合 (media 属性を設定)
下記の例はモバイル向けサイト、http://example.com/mobile/の存在を示している。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://example.com/mobile/">
  • 別の言語向けのURLが存在する場合 (hreflang 属性を設定)
    下記の例は日本語版、ドイツ語版、そしてデフォルトで表示されるコンテンツの3つが存在していることを示している。
<link rel="alternate" href="http://example.com/ja/" hreflang="ja" />
<link rel="alternate" href="http://example.com/de/" hreflang="de" />
<link rel="alternate" href="http://example.com/" hreflang="x-default" />
  • PDFなど、別のファイル形式が存在する場合(type 属性を設定) 下記の例はapplication/rss+xmlを指定することでRSSフィードが存在することを示している。
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed">

canonical属性

alternate属性で定義するような同内容別バージョンのコンテンツが存在する時、
その中の正規のURLを定義することでコンテンツが正しく評価されるようにする。

<!-- http://example.com/de/やhttp://example.com/ja/等のときに記述する。 -->
<link rel="canonical" href="http://example.com/">

prev、next属性

複数ページにまたがっているコンテンツの場合に、つながりを明示するための属性。

<link rel="prev" href="前のページのURL">
<link rel="next" href="次のページのURL">

noindex属性

クロールやインデックスなどをされたくない場合に用いる属性。
管理画面や完了画面等、検索結果に表示されたくないページに使う。

<meta name="robots" content="noindex">

nofollow属性

クローラーがこの属性の設定された箇所のリンクを辿らないようにする属性。
コメント欄や掲示板などでのスパム防止などに用いる

<meta name="robots" content="nofollow">

noarchive属性

コンテンツをキャッシュしないようにクローラーに伝える属性。
頻繁に変化のあるページにこの属性をセットすることで古い情報が残ることを防ぐ

<meta name="robots" content="nofollow">

見出しタグhx

  • h1タグはページ最上部で使用し、ページの重要キーワードやテーマを書く
    titleと同じにせず、詳しく言い換えたものにする
    h1タグは重要なものとみなされるので画像などにしない
  • 重要な語句を見出しとして記述する。
  • 文字の強調としては用いない。
    emやstrongの使用を検討する。
  • hxタグはpタグによる説明を必ずセットで行う。
  • h1～h6は正しい階層順を意識し正しく設定する
    h1 > h2 > h3 > h4 > h5 > h6
  • h2以降は1つ上の階層を掘り下げて説明するものとする
  • 見出しごとに異なる内容になるようにする
  • リストのように表示したい場合は見出しタグではなくlistタグを用いる

段落タグp

  • pタグを適切に用いて文中の段落を分ける。

パンくずリスト

パンくずリストはページの上部や下部に設置される内部的なリンクの行。
サイト内でのページの階層を表しており、上位のカテゴリへの遷移などのユーザビリティの他、
クローラーも階層を理解するので、巡回やインデックスの効率が上がる。
設定しているページでは検索結果にも表示される。

URL

  • URLはコンテンツに関連する単語を使用したものにする。
  • コンテンツと直感的に紐づくディレクトリ構造にする。
  • リダイレクトのステータスは正しく用いる
    異なるURLから遷移されている場合は301リダイレクト(恒久的な転送)
    メンテナンスやエラー画面等の場合は302リダイレクト(一時的な転送)

本文

  • 本文の文字のサイズは16px 行間1.2emを目安とする。

モバイル向けサイト

  • モバイル向けサイトを同時に用意しておくことで、よりユーザーに利用されやすくなる。
  • PC版とモバイルで同じURLを用いる場合、リダイレクト等で適切な誘導を行う。 モバイルサイト向けクローラーとモバイル向けサイトで表示結果が異なる場合、正しくインデックスされない、
    クローラーに対するコンテンツ隠し(クローキング)と判断される可能性があるので注意する。

【SEO】SEOの勉強メモ(ライティング編) - B-Teck!