KOBITブログ

HTMLの改善とAMPでより良いサイト運営! Search Consoleの活用法

この記事は約 5分 で読めます。

fotolia_92993760_s

前回記事「リッチカード」と「データハイライター」って何? Search Consoleを用いたサイト運営に引き続き、Search Consoleの「検索での見え方」メニューの使い方を紹介します。本記事では、「HTMLの改善」と「Accelerated Mobile Pages」の見方を解説します。

HTMLの改善とAMP

HTMLの改善

HTMLの改善

「HTMLの改善」をクリックすると上図のようなページが表示されます。メタデータ(description)とは、データがどのようなものかを要約して表したデータのことをいいます。問題のある項目をさらにクリックすることで詳細を確認できます。

まず「重複するメタデータ」からみていきましょう。

重複するメタデータの修正

HTMLの改善の詳細

今回の場合では、4種類のメタデータが複数のページに重複して使われています。メタデータはサイトのコンテンツを表すものなので、異なるページで同じメタデータが使われていることは問題です。例えば、一番上のメタデータが2つのページで使用されています。メタデータをクリックすると、そのメタデータが使用されているページのURLが表示されます。これに従い、重複するメタデータを解消していきましょう。

改善するタイトル一覧

タイトルタグは、検索結果のリストのタイトルとして表示されるものです。違う検索結果のタイトルが同じになっていると、ユーザーはどのページを選択してみるべきか迷ってしまいます。ユーザービリティやアクセス向上のためにタイトルタグの重複もなくしていきましょう。

タイトルタグの修正

「タイトルタグの重複」をクリックすると以下の画面が表示されます。重複するタグのあるページの項目をクリックすると、どのような重複が存在しているかわかるので、タイトルタグを変更しましょう。ただし、メタデータやタイトルタグを更新してからSearch Console上で反映されるまでには時間がかかる場合があります。

タイトルタグ

Accelerated Mobile Pages

Accelerated Mobile Pages (以下、AMPと表記) を直訳すると、加速されたモバイルページとなります。AMPとは文字通りにモバイルページを高速で表示し、モバイルユーザー体験を向上するためにつくられたHTML規格です。

元々、GoogleとTwitterが協力してAMPのプロジェクトが立ち上がりました。AMPプロジェクトの公式ページにはこちらからアクセスできます。https://www.ampproject.org/

このプロジェクトは広がりを見せており、現在でははてなブックマークやアメーバブログなどのプラットフォームも導入しています。モバイル検索で表示されたページがAMPに対応しているかどうかは下図のようにマークがあるかどうかチェックできます。

AMPマーク

AMPページがGoogle検索で表示されるようになるためには、以下のような手順で進めましょう。(参考:https://support.google.com/webmasters/answer/6340290?hl=ja#discovery)

1. HTMLの仕様を変更

https://www.ampproject.org/docs/get_started/createではAMP対応ページ作成のためにステップがチュートリアル形式で説明されているので、活用していきましょう。

2. AMPページを検出可能にする

他のページにAMPページへのリンクがある場合には、そのAMPページをインデックスに登録します。

3. ページがAMPとして機能するかテスト

検索スピードが速くなっているかなど、ページがAMPの対象になっているかどうか確認します。

4. 構造化データのマークアップ

マークアップを利用することで検索機能が向上し、カルーセルやリッチスニペットを仕様できます。そうすることで、ユーザーの目に留まりやすくなりアクセス増加が期待できます。

5. Search ConsoleでAMPエラーのチェック

Search Consoleで「Accelerated Mobile Pages」にアクセスすると、以下のようにインデックスに登録されたAMPページ数とエラーのあるAMPページ数の推移が表示されます。今回の例では、AMPページエラーがなかったので問題ありませんが、何らかのエラーが表示された場合には早急に対応しましょう。

AMPエラー

まとめ

本記事では、Search Consoleにおける「HTMLの改善」と「Accelerated Mobile Pages」の見方について解説していきました。これで、「検索での見え方」についての解説は以上となります。より良いサイト作りのために Search Consoleを上手く使っていきましょう。


さあ、KOBITをスタートしよう。