Help us understand the problem. What is going on with this article?

マークアップにおけるSEOルール - 2015/04

More than 5 years have passed since last update.

マークアップにおけるSEOルール - 2015/04

2015年のSEO基本方針

  • ページ構成に沿った素直なテキストワーディングとレイアウトを心がける
  • ユーザーが見ている状態と同様のテキスト、代替テキストを配置する
  • メガフッタのようなリンク過多な実装は控える
  • マイナスインデントやdisplay、font-sizeなどによる代替テキストを隠す行為は禁止とする

head

meta description

  • 120字以内にまとめる
  • 特に冒頭50文字に概要をまとめる
  • 可能であれば冒頭50文字で文章を一旦切る
  • 画面毎に、画面を説明する固有の説明文をライティングする
  • 全画面に共通の文章はサイト名以外不要
  • トップページではサイトを説明する文章を設定する
  • 記事タイトルや日時情報、価格情報など、ごく固有な情報を積極的に含むのが好ましい

meta keywords

  • SEO上の効果はない
  • SEO以外の役割がある場合もありこれまでどおり最低限の実装を行う

meta ogp + fb (※ この部分はhtmlガイドラインに移動するかも)

以下を設置する

<meta property="og:title" content="[ページタイトル]">
<meta property="og:type" content="[ページtype]">
<meta property="og:description" content="[記事の説明]">
<meta property="og:url" content="[ページURL]">
<meta property="og:image" content="[画像URL]">
<meta property="og:site_name" content="[サイトのタイトル]">
<meta property="fb:app_id" content="[facebookアプリID]">

各項目の詳細は以下のとおり

og:title

多くの場合、<title>要素と同じ値を設定する

og:type

特に指定がない場合「website」を設定する

<meta property="og:type" content="website">

og:description

meta descriptionと同じ値を設定する

og:url

多くの場合、link canonicalと同じ値を設定する

og:image

facebookが推奨するサイズ、1200px✕630px(以上)の画像のパスを設定する

fb:app_id

facebookページを作成すると提供される「FacebookページID」の値を設定する

link canonical

  • head要素内に以下を記述する
  • ドメインやサービスごとに取り決めた統一ルールを"正しいURL"としてhref値に設定する
  • 決定するルールは例えば「www.」の有無や「index.html」の有無など
<link rel="canonical" href="[正規化URL]">

link alternate

PCとSP・FPで異なるURI構造をもつサイトにおいて以下の実装を行う

PC側記述

<link rel="alternate" media="only screen and (max-width: 640px)" href="[SP・FP URI]">

SP・FP側記述

<link rel="canonical" href="[PC URI]">

要素

title要素

  • 32文字以下にまとめる
  • 特に冒頭20文字にページの内容をまとめる
  • ページの内容とサイトの内容を表現する
  • タイトル要素の構造としては以下が好ましい
<title>ページ名 サブカテゴリ名 カテゴリ名:サイト名</title>

hx要素

  • <h1><h6>見出し要素にキーワードを適切に設定する
  • 画面全体において適切な数になるように、また適切な見出し階層(アウトライン)構造で設置する
  • テキストを含むCSS背景画像を持つ<hx>要素には、そのテキストをtitle属性値に設定する
  • html5で一部推奨されているmultiple <h1>実装は行わなず、<h1>はページに1つ設置する

a要素

  • ページ内に同一ページへのリンクが複数ある場合、最初のリンクだけが評価される可能性がある
  • ページ内に同一ページへのリンクが複数ある場合、最初のリンクのテキストワーディングに特に注意する

要素構成

  • <body>内の重要なテーマやキーワードがコード上の上部に出現するようブロックを構成する
  • ただし、ページの表示上の順序に反するソースコード順にしてはならない

属性

alt属性

  • <img>要素にalt属性を設定する
  • <img>要素にテキストを含む場合にそのテキストをalt属性値に設定する
  • テキストが長い場合は1文、または20文字程度の適切な長さに要約する
  • 1つの要素やテキスト内容に対してalt属性とtitle属性の併用は行わない

title属性

  • テキストを含むCSS背景画像を持つブロック要素にそのテキストをtitle属性値に設定する
  • a要素にtitle属性を設定し、ハイパーリンク先の情報を設定することも有用
  • テキストが長い場合は1文、または20文字程度の適切な長さに要約する
  • 1つの要素やテキスト内容に対してtitle属性とalt属性の併用は行わない

robots.txtとsitemap.xml

  • 各ドメインの本番Webサーバ上でrobots.txtとsitemap.xmlの有無を確認する
  • robots.txtとsitemap.xmlが正しく機能したり設定されているかを確認し把握しておく

viewport

スマートフォンなどデバイス毎のviewportを設定する

パフォーマンス

パフォーマンス性が高いほどよい

Microdataの利用

  • コンテンツの内容によってMicrodataマークアップが有用と判断できるプロジェクトにおいて対応する
  • 対応方針はプロジェクトごとに別途定める
  • itemtypeは schema.org の仕様に準ずる ( http://schema.org/docs/full.html

本ルールの更新

以上の方針はGoogleなどの検索サービスの動向にしたがって頻繁かつ速やかに更新する

sekiyaeiji
フロントエンドエンジニア
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした