メインコンテンツまでスキップ

SEO

必須 画像の代替テキスト​

意味を持つ画像に代替テキストを設定する。

詳細

キーワードを適切に使用して、ページのコンテンツの文脈に沿った代替テキストを設定します。
ただし、alt属性にキーワードを羅列すること（キーワードの乱用）は避けてください。これによって、ユーザーエクスペリエンスが低下し、サイトがスパムとみなされる場合があります。

BAD
<!-- alt属性がない -->
<img src="puppy.jpg"/>
<!-- キーワードの乱用 -->
<img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
GOOD
<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

推奨 アンカーテキストの最適化​

アンカーテキストにリンク先ページの内容を示す。

詳細

リンク先を一言で説明する内容をアンカーテキストに設定することで、検索エンジンがリンク先ページのテーマ(専門性の高さ)を把握するのに役立ちます。
キーワードに対してサイトの専門性が高いほど、ランキングで有利になります。

BAD
<p>おすすめ保険商品は<a href="detail.html">こちら</a></p>
GOOD
<p><a href="detail.html">おすすめ保険商品はこちら</a></p>

推奨 ナビゲーションの画像​

可能な限りナビゲーションは画像ではなくテキストで表現する。

詳細

検索エンジンの理解を助けるため、グローバルナビゲーションなど重要なナビゲーションはテキストリンクで表現します。
テキストでの実装が難しく、画像を使用する場合はalt属性を設定します。

BAD
<nav>
  <ul>
    <li><a href="about.html"><img src="nav-about.png" alt=""></a></li>
    <li><a href="news.html"><img src="nav-news.png" alt=""></a></li>
  </ul>
</nav>
GOOD
<nav>
  <ul>
    <li><a href="about.html">私たちについて</a></li>
    <li><a href="news.html"><img src="nav-news.png" alt="お知らせ"></a></li>
  </ul>
</nav>

推奨 別サイトからのコンテンツ引用​

別サイトからコンテンツを引用する場合、blockquote要素を使用する。

詳細

コンテンツコピーによるペナルティを避けるため、他ページのコンテンツ（文章、画像）を利用したい場合はblockquote要素を使用し、別サイトからの引用を明示します。

BAD
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
GOOD
<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>

必須 検索結果に表示したくないページ​

検索結果に表示したくないページはnoindexを使用して検索インデックス登録をブロックする。

詳細

会員限定ページなど検索結果で見せたくないページはnoindexを使用して検索インデックス登録をブロックします。

GOOD
<head>
...
<meta name="robots" content="noindex">
...
</head>

推奨 XMLサイトマップ​

XMLサイトマップ（sitemap.xml）を設定し、定期的に更新する。

詳細

Sitemap.xmlはクローラーの地図になるため設定されていない場合、サイト内でクロールされないページが発生する可能性があります。
検索エンジンが効率的にクロールできるように、XMLサイトマップ（sitemap.xml）を設置します。

GOOD
sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/foo.html</loc>
    <lastmod>2018-06-04</lastmod>
  </url>
</urlset>

推奨 URLの正規化（PCとモバイルが別ページの場合）​

rel="canonical"とrel=alternateを使用してURLを正規化する。

詳細

ページが重複コンテンツとして扱われることや、評価が分散してしまうことを避けるためURLを正規化します。

GOOD

PCページのURLに正規化する（検索結果に表示したいURLがPCページ）場合

https://mobile.example.com/index.html
<head>
...
<!-- rel="canonical"を記載し、PCページを検索エンジンに伝える -->
<link rel="canonical" href="https://example.com/">
...
</head>
https://example.com/index.html
<head>
...
<!-- rel="alternate"を記載し、モバイルページを検索エンジンに伝える -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://mobile.example.com/" />
...
</head>

推奨 URLの正規化（複数のURLでアクセスできる場合）​

301リダイレクトやrel="canonical"を使用してURLを正規化する。

詳細

ページが重複コンテンツとして扱われることや、評価が分散してしまうことを避けるためURLを正規化します。

URLの重複はサーバーの301リダイレクトで行うことが望ましいですが、サーバー側でURLを正規化できない場合はrel=canonicalを使ってURLを正規化します。

複数のURLでアクセスできる例
GOOD
<head>
...
<link rel="canonical" href="https://example.com/">
...
</head>

推奨 多言語・多地域サイトの対応​

hreflang属性を指定したrel="alternate"を使用して、異なる言語・地域用のページを明示する。

※ページ内容が全く同じ場合のみ指定する

詳細

異なる言語・地域用のページがある場合は、hreflang属性を指定したrel="alternate"を使用して、異なる言語・地域用のページのURLを検索エンジンに伝えます。

GOOD
  • 日本語ページ
    • https://example.com/ja/
  • アメリカ向け英語ページ
    • https://example.com/en-us/
  • イギリス向け英語ページ
    • https://example.com/en-gb/
  • その他の英語圏向け英語ページ
    • https://example.com/en/

の場合、下記の設定で日本語圏で検索した場合は日本語ページ、アメリカで検索した場合はアメリカ向け英語ページ…が、検索結果に表示されます。

<head>
...
<!-- 日本語ページ -->
<link rel="alternate" href="https://example.com/ja/" hreflang="ja">
<!-- アメリカ向け英語ページ -->
<link rel="alternate" href="https://example.com/en-us/" hreflang="en-us">
<!-- イギリス向け英語ページ -->
<link rel="alternate" href="https://example.com/en-gb/" hreflang="en-gb">
<!-- その他の英語圏向け英語ページ -->
<link rel="alternate" href="https://example.com/en/" hreflang="en">
...
</head>
言語・地域コード一覧

推奨 パンくずリスト​

JSON-LDを使用して構造化データをマークアップする。

詳細

ページ上のパンくずリストは人間の目から見てパンくずリストだと判断できますが、検索エンジンには判断が難しい可能性があります。
パンくずリストを表示する場合は、パンくずリストの構造化データマークアップを使用します。

GOOD
<head>
  <title>Award Winners</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "name": "Books",
      "item": "https://example.com/books"
    },{
      "@type": "ListItem",
      "position": 2,
      "name": "Science Fiction",
      "item": "https://example.com/books/sciencefiction"
    },{
      "@type": "ListItem",
      "position": 3,
      "name": "Award Winners"
    }]
  }
  </script>
</head>
構造化データのテスト

マークアップした構造化データは、下記から検証ができます。

推奨 SNSシェア用の設定​

SNSシェアボタンを設置したページにはOGP（Open Graph Protcol）を設定する。

詳細

SNSシェアした際に意図しない画像やテキストが抜粋されてしまうことを避けるため、OGP（Open Graph Protcol）で表示されるテキストや画像を設定します。

GOOD
<!-- Open Graph -->
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="トップページの説明">
<meta property="og:locale" content="ja_JP">
<meta property="og:image" content="https://example.com/assets/img/ogimage.jpg">

<!-- Twitter固有設定 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@twitter_acount">
OGPの仕様

サンプルコード以外のOGPパラメータは、下記を参照してください。