Chapter 09

8. SEO対策の強化

Masumi Morishige（umi-mori）
Masumi Morishige（umi-mori）
2021.01.02に更新
このチャプターの目次
  1. はじめに
  2. SEOとは
  3. 内部対策 / 外部対策 / コンテンツ対策
  4. SEO対策8選
  5. テンプレート【保存版】
  6. SEO対策の説明
    1. 1. title / description
    2. 2. URLの正規化
    3. 3. キーワードの選定
    4. 4. サイトマップの作成
    5. 5. robots
    6. 6. モバイル最適化
    7. 7. OGPタグ
    8. 8. JSON-LD
  7. 参考リンク

はじめに

続いて説明するSEO対策は行わなくても、ウェブサイトの運営には影響がないのですが、より多くの人にウェブサイトを見てもらうために大変重要なため、ご紹介します。

SEOとは

SEOとは、Search Engine Optimizationの略で「検索エンジン最適化」を意味します。
簡単に言うと、GoogleやYahooやBingなどで検索した時に、「ウェブサイトが上位にヒットしやすくするための対策」になります。サイトへの流入やコンバージョンを増やすためにとても重要な対策と言えます。

SEO対策についてGoogleなどが公式に発表している情報もあれば、非公式の情報もあります。そのため、どの対策にどれほどの効果があるかはっきりとしていませんが、なるべく多くの情報を元にして、効果の見積もりも行ってみました。

https://ferret-plus.com/1733

内部対策 / 外部対策 / コンテンツ対策

まずSEO対策には「内部対策」と「外部対策」と「コンテンツ対策」の3つがあります。
それぞれ重要なので、全体の概略を以下の表にまとめました。

対策名 概要 具体的な実施方法
内部対策 Googleなどの検索エンジンに対して、コンテンツ（ウェブサイト）の内容を正しく読み取ってもらうための対策。
（開発者が対策しやすい。）		 titleやdescriptionなどの記述、サイトマップの作成など。
外部対策 「被リンク」と言って、そのサイトのリンクを他のウェブサイトやSNSなどで引用する外部の対策。
（開発者にはあまり対策しづらい。）		 SNSによる発信、引用されやすくするためのogタグの設定など。
コンテンツ対策 PVやCVの取得できる質の高いコンテンツにする対策。
 タイトルや見出しを適切かつキャッチーに設定するなど。

SEO対策8選

対策名 効果 対策種類 概要
1. title / description ◎ 内部対策 タイトルと説明を設定するためのタグ
2. URLの正規化 ◎ 内部対策 クローラーに統一されたURLを提示
3. キーワードの選定 ◎ コンテンツ対策 検索にヒットしやすいキーワードを選定
4. サイトマップの作成 ○ 内部対策 ウェブサイトの構造を示したファイル
5. robots ○ 内部対策 クローラーへクローリングして欲しくないファイルを指定するためのmetaタグ
6. モバイル最適化 ○ 内部対策 モバイルでも使いやすい設計に最適化
7. OGPタグ ○ 外部対策 SNSなどへアップする際の情報提示
8. JSON-LD ○ 内部対策 ウェブサイトの構造を示したコード

テンプレート【保存版】

UD-PlatformというウェブサイトのSEO対策をテンプレートとしてまとめました。
中身の内容は適宜修正してください。

index.html
<head>
    <title>UD-Platform</title>
    <meta name="description" content="ユニバーサル・デザインによる、みんなのためのクリエイティブ工房。">
    <link rel="canonical" href="https://ud.umi-mori.jp"> 

    <meta property="og:title" content="UD-Platform" />
    <meta property="og:description" content="ユニバーサル・デザインによる、みんなのためのクリエイティブ工房。" />
    <meta property="og:site_name" content="UD-Platform" />
    <meta property="og:url" content="https://ud.umi-mori.jp/index.html" />
    <meta property="og:type" content="website">
    <meta property="og:locale" content="ja_JP" />
    <meta property="og:image" content="https://ud.umi-mori.jp/static/icons/logo.png" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@umi_mori_jp" />

    <script async type="application/json+ld">
        {
            "@context": "http://schema.org",
            "@type": "Organization",
            "name": "UD-Platform",
            "url": "https://ud.umi-mori.jp",
            "logo": "https://ud.umi-mori.jp/static/icons/logo.png"
        }
    </script>
</head

SEO対策の説明

1. title / description

以下のようにtitleタグでウェブサイトのタイトルを指定すると、タブの部分や検索結果などに表示されます。また、metaタグでウェブサイトの説明を指定すると、検索結果などに表示されます。

<title>UD-Platform</title>
<meta name="description" content="ユニバーサル・デザインによる、みんなのためのクリエイティブ工房。">

seo_title.png
seo_desc.png

ここでタイトルを設定する際に、意識するポイントが2つあります。

  1. 重要なフレーズは手前におく（検索結果で省略されることがあるため）
  2. 35文字以上にはしない（長すぎると内部対策上、減点されるらしいため）

実際にタイトルの長さによって、省略される事例を紹介します。
long_title

2. URLの正規化

Googleなどの検索エンジンは、URLごとにリンクポピュラリティ（サイトのランキングを決めるための指標の一つ）を評価しています。そのため、URLが分散していると評価もその分分散してしまいます。
そのため、URLを一つに正規化することが大切です。以下のようなコードをhead内に記述すると統一されます。

また、wwwなどのサブドメインやhttp/httpsなどの通信プロトコルも一つに統一されるようにリダイレクトすることをおすすめします。

<link rel="canonical" href="https://ud.umi-mori.jp">

3. キーワードの選定

ウェブサイトで上位に表示されるためにキーワードの設定はとても大切です。
とても簡単な例を以下に示します。

  • 状況：スタバのカスタム方法を紹介するウェブサイト
  • ×（悪い例）：Starbucksのカスタム方法まとめ
  • ○（良い例）：スターバックスのカスタム方法まとめ
  • ◎（理想の例）：スタバのカスタム方法まとめ

確かに、Googleで検索するときに「スタバ　限定」、「スタバ　東京」、「スタバ　カスタム」などと調べることの方が多いことを実感できると思います。このようにどの単語がよく検索されるかを"Google Trends"というサービスで確認することができます。

https://trends.google.com/trends/?geo=JP

実際に比較してみると以下のような結果になりました（2021/1/2 時点）。

starbucks_trends.png

4. サイトマップの作成

サイトマップとは、サイトの構造を表すためのファイルになります。これを設定しておくと、様々な恩恵があります。XMLに書き慣れていない方は自動で生成してくれるサービスを使うことをおすすめします。

https://ferret-plus.com/7906?under_ct

5. robots

プライバシーポリシーや低品質なページなどのクローラーに通って欲しくないページには以下のようなコードを記述しましょう。

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

6. モバイル最適化

モバイルファーストインデックス（Mobile-first Indexing; MFI）という指標もSEOに反映されるらしいため、モバイルに対する最適化も重要らしいです。

具体的な対策としては、以下のようなものがあります。

  1. モバイルで表示してもデザインが崩れない
  2. モバイルでの表示遅延が発生しない

自分のウェブサイトがどれだけモバイルフレンドリーかは以下のサイトで知ることができます。

https://search.google.com/test/mobile-friendly?hl=ja

もしもフレンドリーな場合は、以下のように表示されます。
mobile_friendly.png

7. OGPタグ

OGPタグとは、Open Graph Protocolの略で「TwitterなどのSNSでウェブサイトを掲載したときにそのサイトのタイトル、説明、画像などを表示させる仕組み」のことです。OGPタグを設定しておくと、引用されるときに整った形で表示されると外部対策として大変有効です。

例えば、Qiitaの記事をツイートすると、以下のように表示されます。
qiita_ogp.png

具体的な記述方法は以下の通りです。

<meta property="og:title" content="UD-Platform" />
<meta property="og:description" content="ユニバーサル・デザインによる、みんなのためのクリエイティブ工房。" />
<meta property="og:site_name" content="UD-Platform" />
<meta property="og:url" content="https://ud.umi-mori.jp/index.html" />
<meta property="og:type" content="website">
<meta property="og:locale" content="ja_JP" />
<meta property="og:image" content="https://ud.umi-mori.jp/static/icons/logo.png" />

また、twitter上での表示設定は以下のようなコードで設定することができます。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@umi_mori_jp" />

https://saruwakakun.com/html-css/reference/twitter-card

8. JSON-LD

最後に、JSON-LDについて説明します。
JSON-LDとは、JSONを使用してリンクトデータをエンコードする方法になります。構造化データとも言われ、Googleが推奨している項目の一つになります。

具体的な書き方は以下の通りです。

<script async type="application/json+ld">
    {
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": "UD-Platform",
        "url": "https://ud.umi-mori.jp",
        "logo": "https://ud.umi-mori.jp/static/icons/logo.png"
    }
</script>

https://webtan.impress.co.jp/e/2019/08/05/33500

参考リンク