Google アナリティクス アカデミー

google analytics

ユーザーアクセス解析ツール Google Analytics って、色々なことが知れてとても便利なんですが、機能が非常に多くて、初めて利用するときは、基本を理解するだけでも何をどう見ればいいのか、戸惑いますね。

あちこちのウェブサイトで、使い方の解説等まとめられていますが、Google には、無料で利用できる「アナリティクス アカデミー コース」なるものがあるんですよ。これが素晴らしくて、動画や実際のインターフェースを利用した使い方ガイドを利用して、順を追って説明をしてしてくれ、初心者でも最短距離で使えるように導いてくれます。

Analytics の標準版だとこちらの2コースです。
⇒「Google アナリティクス初級者向けコース
⇒「Google アナリティクス上級者向けコース

コースを終了後、オンラインで無料のテストを受けられます。これに合格すると「修了証明書」を発行してくれます。

私も「Google アナリティクス初級者向けコース」のテストを受けてみました。
合格するとこんなのがもらえますよ!

名前の部分ですが、Google のアカウントに登録している名前で発行されるので、ニックネームのようなものを登録している方で、本名で修了証明書が欲しい方は、変更が必要ですね。
有効期限は3年間です。

この修了証明書がどこらへんで利用できるのか分かりませんが(企業なんかだと社員の教育に利用しているのかもですね)、このコースを一通り行えば、Google Analytics を使えるようになるのは確実です。テストを受けることで理解も深まります。

「Google アナリティクス初級者向けコース」は、4 ユニットで成り立ってます。

ユニット 1: データの収集と処理
ユニット 2: データの収集と設定
ユニット 3: 高度な解析のツールとテクニック
ユニット 4: 高度なマーケティング ツール

それぞれのユニットの終わりにテストがあり、4つのテストで、それぞれ 80% 以上の正解で合格となります。
テストは何回でも受けられるので(毎回問題同じ)、全部が分かるようになるまで見直すのがよいでしょう。

非常に分かりやすいのですが、一つだけ気になることがあります。
このコースの動画が収録されたのが、2015年のようなんですが、その頃と現在の Google Analytics のインターフェースが多少変わっているようなんですよね。大まかな機能自体は同じようですが、私が気が付いた点は、こちら。

「管理 (Admin)」の位置
以前:上のメニュー欄
現在:左のメニュー欄一番下(歯車マーク)
(そもそも、現在は上のメニューがありません)

「ユーザーレポート」の名称
以前:ユーザーレポート(もしくはユーザー)
現在:オーディエンス

「Google AdWords」の名称
以前:Google AdWords (Ads)
現在:Google 広告

【WordPress プラグイン】AMP for WP 投稿画面

amp for wp logo

WordPress プラグイン、AMP for WP の全体の設定方法について前回まとめました。
全体の設定をデフォルトとなりますが、各投稿画面で、そのページ用に設定することもできます。
投稿画面の下の方に表示されます。

AMP ページ公開・非公開選択ボタン


投稿画面の左側、設定の部分の一番下の方に、そのページの AMP 版を公開するかどうか、選択できます。


その下に表示される「Preview AMP」をクリックすると、AMP のプレビュー画面が出ます。

カスタムフィールド

このカスタムフィールドに表示される名前が何を意味するのか分からなくて検索したのですが、これに触れてる方が見つかりませんでした・・・。何だろう?って探って、こういうことかーと私が思ったことをまとめるので、内容間違っているかもです。

AMP for WP では、各投稿ごとにそのページ専用の AMP を生成することができます。カスタムフィールドの下の部分に、「AMP Page Builder」(設定で ON にしている場合。「Setting」⇒「Page Builder」で。)と「Custom AMP Editor」の欄が表示されますが、それらは、すべてカスタムフィールド扱いのようです。つまり、その欄に書き込んだことが、自動的に、このカスタムフィールドに書き込まれる、という方式のようですね。なので、特に触らなくていいのですが、一応、どんな風に書き込まれるのかまとめます。

amp-page-builder
下の「AMP Page Builder」で、ドロップ&ペーストすると、ここの値が自動的に書き込まれます。

ampforwp_custom_content_editor
下の「Custom AMP Editor」の欄に記述すると、ここの値が自動的に書き込まれます。

ampforwp_custom_content_editor_checkbox
下の「Custom AMP Editor」で、「Use This Content as AMP Content」をチェックすると、ここの値が「yes」になります。
チェックしないと、空欄です。

ampforwp_page_builder_enable
下の「AMP Page Builder」で、赤いボタン「Start the AMP Page Builder」をクリックすると、ここの値が「yes」になります。クリックしないと空欄です。

ampforwp-amp-on-off
右の設定の一番下の方の、「Show AMP for Current Page?」で、「Show」を選択するとここの値が「default」になります。「Hide」を選択すると「hide-amp」となります。

use_ampforwp_page_builder
下の「AMP Page Builder」で、「Use Builder」をチェックすると、ここの値が「yes」になります。チェックを入れないと空欄です。

AMP Page Builder

ドラッグ&ペーストで簡単にそのページだけのオリジナルの AMP ページが作れます。
「Start the AMP Page Builder」をクリックします。
(設定で ON にしていないと利用できません。「Setting」⇒「Page Builder」⇒「AMPforWP PageBuilder」)

左上の「Use Builder」にチェックを入れます。

最初に、「Column(列)」を1列か2列を選んで、エリアにドラッグします。
次に、その「Column」の中に、表示させたい位置に「Moduls(モジュール)」をドラッグしていきます。

エリアにドラッグした「Moduls」は、歯車マークをクリックすると、内容を記述できます。「Design」「Advance」でスタイルも設定できます。

Custom AMP Editor

「AMP Page Builder」同様、ここでもこの投稿ページオリジナルの AMP ページが生成できます。
こちらは、ドラッグ、ではなく、自分で書き込まなくちゃいけませんが。HTML タグを使っても、自動で AMP に変換してくれます!便利ですねー。
まずは、「Use this content as AMP content」にチェックを入れます。

あとは、オリジナルの文章を、テキストモードかビジュアルモードで書き込むだけです。クラシックエディターですね。

注意点!
「AMP Page Builder」、「Custom AMP Editor」、どちらにも「Use」にチェックを入れた場合、「Custom AMP Editor」が優先されるようです。

【WordPress プラグイン】AMP for WP 設定

amp for wp logo

WordPress のプラグイン、「AMP for WP」を使って、このサイトの AMP ページを作ってみました。
(WordPress のオフィシャルの「AMP」というプラグインではなく、赤いロゴの「AMP for WP」です。こちらの方が細かな設定ができますよ!)
プラグインの説明と、モバイルからのアクセスがどれぐらい高速化したのか検証してみたいと思います。

AMP とは?

AMP (Accelerated Mobile Pages) とは、Google と Twitter が中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化する手法のことです。レスポンシブ対応のモバイルフレンドリーとは別の手法で、通常の HTML や JavaScript とは異なる、「AMP HTML」「AMP JP」で書かれたページで、コンテンツのキャッシュ配信を行う「Google AMP Cache」が利用されます。詳しい技術は、あちこちのサイトに書かれているので割愛しますが、通常の HTML ページ(モバイル対応も含む)と AMP ページとの関係は、↓ の図のような具合です。

通常の HTML のページ(http://hazu.jp/〇〇〇/)とは別に、AMP の専用ページ(http://hazu.jp/〇〇〇/amp/)を用意します。head の中でお互いを関連付け、それを Google などの検索エンジンが、クライアントのディバイスを判断して、モバイルなら AMP ページを表示します。

AMP ページは、サイト全体に設定もできますが、記事投稿ページだけに設定するなど、一部のページのみに設置することもできます。

どれぐらい速くなるのか?

Google の PageSpeed Insights で、普通の HTML(レスポンシブ対応)と AMP ページを、モバイルで表示した場合を速度を、検証してみました。

HTML

AMP

20 ポイント早くなってますね!
設置したばかりなので、PV の変化などは検証出来てません。内容がらか、このサイトの場合 PC からのアクセスが圧倒的に多いので、AMP のおかげで PV が劇的に増えるとは思いませんが、一般的にはモバイルからのアクセスの方が多いと思うので、効果を期待できますね。

Google Search Console の速度レポートのヘルプには、こう書かれています。

速度が重要な理由

  • ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
    • ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。
    • ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加する。
  • 遅いと判断されたページは、Google 検索での順位が下がる可能性がある。

AMP for WP の設定

このプラグイン、英語版しかないんですよね。訳しつつ、設定詳細をまとめます。新規のプラグイン追加で「AMP for WP」をダウンロード、有効化すると、「Basic Setup」と「Advance Setup」から選ぶためのウィンドウが出ます。細かな設定のできる「Advance Setup」を選びます。(この設定は後から変更もできます。)

Setup (基本セットアップ)

Website Type

ウェブサイトのタイプ設定。
「ブログ」「ニュース」「ローカルビジネス」「E コマース」「その他」の中から選びます。

Where do you need AMP?

AMP ページを作成するページの種類。
「ホームページ」「投稿」「固定ページ」「アーカイブ」の中から選びます。
このサイトは、「投稿」のみ AMP ページを作りました。AMP だと高速になりますが、レイアウトなどの見栄えも変わるので、どの部分を AMP 化するかよく検討しましょう。

Design and Presentation

ロゴと、グローバルカラーを選びます。
ロゴサイズは、190 × 36 です。(190 × 120 推奨と書かれていますが、間違ってますね・・・)
グローバルカラーが使用される場所がいくつかあるようで、私も全部は分かっていませんが、Design の項目のところで選んだテーマによっては、ロゴの背景の色がここで選んたグローバルカラーとなります。それから、Cookie の同意確認の部分でも、この色のボタンが現れました。

Analytics Tracking

Google Analytics を利用している場合、ここでトラッキング ID を書き込みます。それ以外のウェブマスターツールも、ここで関係づけできるようです。

Privacy Settings

プライバシー設定。
Cookie の使用の同意確認をユーザーに対して行うかどうか、選べます。On にすると、AMP ページを開いた際、ページの下の部分に、こんな風に表示されます。

GDPR は、EU の一般データ保護規則で、サイト運営者はユーザーの同意を得る必要があるのですが、日本ででしたら関係ないと思います。

Advertisement

サイトにアドセンス広告を貼っている場合、表示位置が決められます。
「ヘッダー」「フッター」「コンテンツ上部」「コンテンツ下部」から選べます。

3rd Party Compatibility

他の SEO プラグインを利用している場合、ここで選択すると、競合しないようにしてくれます。
すばらしいですね!(WordPress のオフィシャルの方の AMP プラグインも利用してみたのですが、この機能がなく、All in SEO Pack と衝突してエラーになったりしましたから)

Settings (設定)

項目が多くて、「Setup (基本セットアップ)」と重複するものもあるので、いくつかだけピックアップしてみました。

SEO

Meta Description」は、投稿や固定ページの「要約」文を含めるタグです。 ON にすると、head タグに加わります。
OpenGraph Meta Tags」は SNS 情報を連携させるタグです。ON にすると、head タグに加わります。
Head Section」に、その他 head に書き込みたいことを記述します。
SEO Plugin Integration」基本設定の部分にもありましたが、他の SEO プラグインを利用している場合、ここでそれを選んでおくと、競合を防げます。
Advanced Indexing」”URL Inspection Tool Compatibility (Google URL 検査ツールとの互換性)” を ON にできます。

AMP for WP Page Builder

ON にすると、各投稿ページの下の方に、このように、AMP for WP Page Builder のコーナーが現れ、ページ毎にレイアウトを調整することができます。(各ページに現れる AMP 設定機能は、後でまとめて説明します)

Structured Data

AMP 用の構造化データを作ることができます。

Comments

AMP ページにコメントを載せるか選べます。

Translation Panel

デフォルトで表示される言語が英語なので、ここで対応する日本語の表示内容を記述できます。

Design (デザイン)

Themes

テーマを選びます。無料で選べるのは、4種類です。

Header

ヘッダーデザイン、メニュー等を設定します。
メニューに関しては、一つ、気を付けないといけないのですが、WordPress のメニュー欄の「外観」⇒「メニュー」の下の方に表示される「メニュー設定」で、「AMP Menu」にチェックを入れていないと、AMP ページのメニューが空になってしまいます。
↓ この図の部分ですね。チェックを必ず入れましょう。

その他、「Home Page」では、「Single」では投稿ページ、「Page」では固定ページの表示内容を設定することができます。
「Social sharing」では、SNS へのリンクの表示のされ方が、様々な種類の中から選べるので、実際に実装してみて、お気に入りのものを選ぶといいと思います。

AMP for WP の各ページで行う設定

別ページにしました。⇒【WordPress プラグイン】AMP for WP 投稿画面

【WordPress プラグイン】Markup (JSON-LD) で パンくずリスト作成

Markup (JSON-LD) プラグイン

WordPress のプラグイン、Markup (JSON-LD) は、すべてのページの head に簡単に構造化データを記述できます。
Markup (JSON-LD) 概要説明
構造化データについて

今回は、Markup (JSON-LD) を利用して、構造化データのパンくずリスト、それから WordPress のテーマの中に人が見る用のパンくずリストを作りたいと思います。

パンくずリストの情報登録

↑ の登録画面の画像に赤字で要点を書き込みましたが、もう少し詳しく ↓ の表にまとめました。

項目 説明
Enabled マークアップ有効化。
「出力ページ」で指定したページの head に、パンくずリストの構造化データが書き込まれます。
出力ページ パンくずリストでは、「すべてのページ」しか選択肢はありません。
他のタイプだと、「ポスト」「ホーム」など、構造化データを書き込むページが選べます。
Display Home Page 「Enabled」にチェックをすると、パンくずリストにホームページが含まれます。

ホームページを含める例: ホーム > CSS > ボタンジェネレーター
ホームページを含めない例: CSS > ボタンジェネレーター

Home Name 空欄に、パンくずリスト上で表示するホームの名前を記入します。

例:「ホーム」「Home」「トップ」
何も記入しないと、デフォルトの bloginfo(“name”) が表示されます。

Home Url パンくずリストに利用するホームの URL を選択します。WordPress のディレクトリとホームページとしている URL が異なる場合、WordPress の設定でそれを登録している場合など、ここで設定できます。
Display Current Page 「Enabled」にチェックをすると、構造化データを書き込むそのページ自身が、パンくずリストに含まれます。

「ボタンジェネレーター」というページの場合
自身のページを含める例: ホーム > CSS > ボタンジェネレーター
自身のページを含めない例: ホーム > CSS >

Current Page Link 「Enabled」にチェックをすると、パンくずリストに、自身のページのリンクを含まれます。構造化データに関しては、リンクがあるかないかは関係ないのですが、Markup (JSON-LD) では、ショートコードを使って、人が見る用のパンくずリストをテーマに出力することができ、その時のリンクをここで定義します。

「ボタンジェネレーター」というページの場合
自身のページのリンクを含める例: ホーム > CSS > ボタンジェネレーター
自身のページのリンクを含めない例: ホーム > CSS > ボタンジェネレーター

Short Code Copy Markup (JSON-LD) では、ショートコードを使って、人が見る用のパンくずリストを、WordPress のテーマに出力することができます。
[wp-structuring-markup-breadcrumb] というショートコードを利用します。また、オプションで id と class を指定できます。詳しくは、このページの下の「ショートコードを利用して人が見る用のパンくずリストを出力する」の項をご覧ください。

サイト全体に対する、パンくずリストの構造化データの記述は、これだけで終了です。あっという間にできてしまいますね。

Google 構造化データ テストツールで確認

構造化データが想定通りに記述されているか、Google の構造化データ テストツールで確認します。
ページの種類(投稿ページ、ホーム、一覧ページ)ごと、それぞれの任意のページを確認するのがよいかと思います。

ショートコードを利用して人が見る用のパンくずリストを出力する

ショートコードを利用して、パンくずリストを WordPress のテーマの中に出力することができます。
「css」というカテゴリーの中にある「ボタンジェネレータ―」というページの投稿に書き込んだ場合、こうなります。

ショートコード

[wp-structuring-markup-breadcrumb]

出力される HTML

<ol>
  <li><a href="https://web.hazu.jp">ホーム</a></li>
  <li><a href="https://web.hazu.jp/category/css/">CSS</a></li>
  <li>ボタンジェネレーター</li>
</ol>

ブラウザ表示

番号付きリストの形で出力されますね。
これをよくある横並びのパンくずリストの形に、CSS で調整します。
Markup (JSON-LD) のショートコードには、id と class を付け加えることができます。

ショートコード(id、class 付き)

[wp-structuring-markup-breadcrumb id="id_name" class="class_name"]

出力される HTML(id、class 付き)

<lo id="id_name" class="class_name">
  <li><a href="https://web.hazu.jp">ホーム</a></li>
  <li><a href="https://web.hazu.jp/category/css/">CSS</a></li>
  <li>ボタンジェネレーター</li>
</ol>

CSS

.class_name {
	list-style-type: none;
	
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-direction: row;	
}

.class_name li + li::before {
	content: '> '; 
}

Flexbox で li 要素を横並びにして、li 要素間に「 > 」を書き加えます。

ブラウザ表示

これでパンくずリストの形なりましたが、これをすべてのページのタイトルの上の部分に、一括で表示させるようにします。
投稿ページなら single.php、固定ページなら page.php にショートコードを埋め込みます。もっと上、ヘッダーの位置なら、header.php です。
(子テーマがあるなら、single.php、page.php、header.php を子テーマの中にアップロードして編集します。なければ、テーマの中のものを直接編集します。)

<?php
  if ( shortcode_exists( 'wp-structuring-markup-breadcrumb' ) ) {
  echo do_shortcode( '[wp-structuring-markup-breadcrumb id="id_name" class="class_name"]' );
  }
?>

この php コードを、パンくずリストを表示させたい位置に書き込みます。
私は、single.php のこの位置に書き込みました。

あとは、CSS で、文字のデザイン、表示位置の微調整をすれば完成です。

【WordPress プラグイン】Markup (JSON-LD)

Markup (JSON-LD) プラグイン

ウェブサイトにパンくずを付けたいな、構造化データにしつつ、ブラウザでも表示されるようにしたいな、JSON-LD でまとめて簡単に実装できるの無いかな、と WordPress のプラグインを見ていたら、色々なのがありますね。
その中から評価の高い「Markup (JSON-LD)」を試してみました。

WordPress オフィシャルページ Markup (JSON-LD) structured in schema.org

Markup (JSON-LD) の設定


プラグイン新規追加で、「Markup (JSON-LD)」を有効化後、左のメニュー欄に「Schema.org 設定」というメニューが追加されます。クリックすると、「Schema.org list」と「Schema.org Config」というサブメニューが表示されます。

Schema.org list


「Schema.org list」をクリックすると、Schema.org 設定一覧が表示されます。

このプラグインで設定できるタイプは、この11項目です。一般的によく使うものが揃っていますね。各タイプをクリックすると、登録内容を編集できます。

↓ に、各タイプの説明をまとめました。自分のウェブサイトに必要なものだけ実装できます。

タイプ 説明
Article 記事一般。ニュースやブログ投稿も含まれる。
Blog Posting ブログ投稿
Breadcrumb パンくず
Event イベント情報
Local Business 店舗やオフィスの営業情報
News Article ニュース記事
Organization 企業・組織情報
Person サイト管理者情報
Site Navigation サイトのナヴィゲーション(メニューなど)
Video 動画
Web Site ウェブ・サイト情報

Schema.org Config


「Schema.org Config」では、構造化データの圧縮を設定できます。「Enable」にチェックを入れると、データの改行、余白をなくして出力されます。

実際にどのように反映されているのか、HTML を確認してみました。

↓ こちらは圧縮されていない状態です。改行、余白が入っていて目視でも見やすいです。

↓ こちらは圧縮された状態です。改行がなく、ずらずらと書かれていて、目視では見づらいです。

他の SEO プラグインとの競合

他の SEO 機能のあるプラグインやテーマを利用していて、構造化データのオプションを有効にしている場合、データがダブってしまうことが考えられます。その場合、どうなるのでしょうか?Google の構造化データテストツールを利用して、調べてみました。

このサイトでは、All in One SEO Pack を利用しているので、そちらの Schema Setting と、こちら Markup (JSON-LD)、どちらも利用した場合を考えてみます。

All in One SEO Pack、Markup (JSON-LD) 両方ともに同じタイプを登録した場合

All in One SEO Pack は、タイプを自分で選択できず、様々な構造化データが自動で書き込まれます。Google のテストツールで何が検出されるのかは場合によるようですが、このサイトの投稿ページだと「Article」タイプで検出されていたので、Markup (JSON-LD) にも「Article」を登録してみました。
この状態で 構造化データテストツールで検証してみると・・・


二つともエラーにならずに、Google にちゃんと読み込まれていますね。
出力された HTML を確認すると、head の中に、All in One SEO Pack と Markup (JSON-LD) の script タグが、別々に生成されています。
構文的にエラーはないとのことのようですが・・・、でも情報がダブってしまうのはよくないと思うし、HTML も余計に長くなってしまうから、どちらか一つのみ有効にした方がいいのでしょう。

All in One SEO Pack、Markup (JSON-LD) に異なるタイプを登録した場合

All in One SEO Pack で「Article」、 Markup (JSON-LD) で「Breadcrumb」を登録して、構造化データテストツールで検証しました。


それぞれのタイプが、Google に読み込まれていますね。
HTML を確認すると、head の中に、script タグが、別々に生成されています。
問題なさそうです。

構造化データでリッチリザルトを実現する

構造化データ

構造化データを使用してリッチリザルトを有効にする手順を、Google 検索デベロッパーガイドに沿ってまとめます。

構造化データとは

「私はアンナ、インドでヨガの講師をしていますよ。」
この言葉を聞いて、私たちは、この人の名前はアンナさんだな、住んでいる国のはインドだな、職業はヨガの講師だな、と推測ができますが、機械が同じようにできるとは限りません。機械が分かるようにするには、機械が知っている表記法(シンタックス)に従って説明しなくてはいけません。

イメージとしてはこんな感じですかね。

非構造化データ例 ⇒ 「私はアンナ、インドでヨガの講師をしていますよ。」
構造化データ例  ⇒ 「名前:アンナ / 国:インド / 職業:ヨガの講師」

構造化データを使用したリッチリザルト

Google は構造化データを使用することで、コンテンツの内容をより理解し、分類し、検索結果にユーザに有益な情報を表示することを行っています。視覚的にサイトの情報を見せるその仕組みを、リッチリザルト(旧リッチスニペット)といいます。


Google のリッチリザルトの機能は何種類もあるのですが、その一つ、「レシピ」の場合、こんな風に表示されます。
画像はディベロッパーガイドに載っていた例ですが、「アップルパイ レシピ」と検索すると、検索結果の上部にはこんな具合に表示されますね。

HTML に構造化データを含めることで、「このサイトはレシピですよ」ということを Google に伝えてます。そうすると、Google はそのサイトを「レシピ」に分類して、検索結果に表示します。さらに、「調理時間」「カロリー」「評価」という情報も構造化データとすることで、一緒に表示され、検索をしているユーザーにより明確に情報を伝えられます。

構造化データの種類には、よく利用されているものだと、以下のようなものがあります。

記事 / 書籍 / パンくずリスト / カルーセル / コース / 評論家レビュー / データセット / 雇用主の総合評価 / 給与推定額 / イベント / FAQ / ファクト チェック / よくある質問 / How-to / 求人情報 / ローカル ビジネス / ロゴ / 映画 / 商品 / Q&A ページ / レシピ / レビュー スニペット / サイトリンク検索ボックス / ソフトウェア アプリ / 定期購入とペイウォール / 動画

それぞれの例は、Google ディベロッパーガイドの 検索ギャラリーを見る で確認できます。

ボキャブラリとシンタックス

Google の検索用の構造化データでは schema.org のボキャブラリが使用されています。
ですけれど、ディベロッパーガイドを読むと、「Google 検索の動作の定義には、schema.org のドキュメントではなく developers.google.com のドキュメントをご利用ください。ここに記載されていない属性やオブジェクトは、schema.org で必須と示されていても、Google 検索では必須ではありません。」とあります。
Google の提供するツールを利用して、開発・導入していくのがよさそうですね。

Google で利用できるシンタックスは、「JSON-LD」「microdata」「RDFa」の3つですが、Google では、「JSON-LD」が推奨されていますね。Google が提供している開発ツールも、「JSON-LD」となっています。
「JSON-LD」のいいところは、HTML 上の一か所にまとめて記述できて、構造化データ用の情報を本文とは別に生成できることかと思います。一方、「microdata」「RDFa」は、HTML の中にあるタグに書き加えるという形で、こちらの方が便利な場合もあるかと思うのですが、ここでは、Google 中心に考えて「JSON-LD」の書き方の基礎の部分をまとめてみます。

JSON-LD

HTML の script タグの中にまとめて記述します。
(どこに置いてもいいですが、普通は head の中などに置くことが多いようです。)
構造化データは全て、中括弧( { } )の中に含めます。

<script type="application/ld+json">
{
  // 内容を記述
}
</script>

内容は、プロパティー と 値の組み合わせですが、それぞれをダブルクォーテーション( ” )で囲み、コロン( : )で区切ります

“プロパティー”: “値”

さらにデータが続く場合は、カンマ( , )を記述します。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",  // schema.org のボキャブラリーを利用する宣言
}
</script>

プロパティに対して、値を複数取る時は、大括弧( [ ] )で囲います
プロパティに予期するタイプがある場合、中括弧( { } ) を入れ子にすることができます。

↓ 「レシピ」タイプの構造化データの一例です。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "イタリア風冷やしトマト",
  "image": "https://web.hazu.jp/wp-content/uploads/〇〇.jpg",
  "author" : {     //「author」プロパティに対し、名前や属性等複数のプロパティを入れ子にする
  "@type": "Person",
  "name" : "Hazuki",
  "sameAs" : "https://web.hazu.jp/"
  },
  "description": "さっぱりトマトのおいしさ引き立つ簡単料理",
  "cookTime": "PT03M",
  "recipeingredient": [  // 「recipeingredient」プロパティの値を大括弧で囲み、複数指定する
  "トマト・・・・・・・・2個",
  "オリーブオイル・・・・大さじ2杯",
  "バルサミコ酢・・・・・小さじ2杯",
  "塩・・・・・・・・・・少々"
  ]
}
</script>

プロパティには@ がついている特別のものがありますが、よく使うのはこの 3 つです。

プロパティ 説明
@content schema.org schema.org のボキャブラリを使用を宣言
@type recipe や event など 内容の種類
@id ページの URL

プロパティの種類は、たくさんありますが、schema.org(英語)に一覧があります。
また、Google のディベロッパーガイドや、JSON-LD のオフィシャルサイト(英語)にも、たくさんのマークアップ例が載せられています。

Google の構造化データツール

構造化データ マークアップ支援ツール

簡単なマウス操作で、構造化データ マークアップを追加した HTML を生成できるツールです。

構造化データ マークアップ支援ツールのウェブサイトにアクセスします。

データタイプを選び、マークアップするページの URL もしくは HTML をコピペし、「タグ付けを開始」をクリック。
この例の場合では、URL を選んでいます。

左側のウェブサイトの本文中より、マークアップしたい個所を選択し、項目を選択し、「HTML を作成」をクリックすると、HTML に直接書き込める構造化データが生成されます。

これを実際のサイトの HTML にコピペすれば完了です。

ですが、、、なんか、この支援ツールだと、自分の思うままというわけにはいきませんよね。基本の基本はあるにしても、選択肢が限られていいるし。
ですから、これでベースを作って、自分の欲しい形にモディファイするというのがよいのかと思います。
支援ツールにないプロパティなどを足していくという具合に利用するのが良いのかと思います。

構造化テスト ツール

構造化データを含めたウェブページが、実際にはどのようにマークアップされているか、Google には検査するツールがあります。
Google の構造化データ テストツール にアクセスし、検査したい URL を記入します。

「テストを実行」をクリックすると、HTML に 書き込まれた構造化データと、どれがマークアップされた結果が表示されます。

自分が想定した通りにマークアップされているか、確認します。

Google Search Console その7 その他のツール・ヘルプまとめ

Google Search Console Logo

その1 Google Search Console に登録
その2 検索パフォーマンス
その3 URL 検査
その4 インデックス
その5 拡張
その6 セキュリティと手動による対策 / リンク
その7 その他のツール・ヘルプまとめ ←(今回)

その他のツール

AMP テスト
AMP ページが有効かどうか、および Google 検索結果に表示されるうえで適切に設定されているかどうかを確認するテスト。

リッチリザルト テスト
リッチリザルトが有効かどうか確認テスト。有効な場合、リッチリザルト タイプ、構造化データのエラーが表示される。

構造化データ テスト
構造化データが正しく記述されているかチェックできる。

構造化データ マークアップ支援ツール
簡単なマウス操作で、構造化データ マークアップを追加した HTML を生成できるツール。

インターナショナル ターゲティング
hreflang エラーを監視したり、検索結果で優先すべき国を選択したりできるレポート。

クロールの統計情報
過去 90 日間のサイトでの Googlebot のアクティビティに関するデータ。

クロール頻度
クロールの頻度を設定する。

PageSpeed Insights
ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案。

Google ヘルプ&トピックスまとめ

検索パフォーマンス

検索パフォーマンス レポート
検索での見え方
表示回数、掲載順位、クリック数とは

URL 検査

URL 検査ツール
ウェブマスター向けガイドライン

インデックス

インデックス カバレッジ レポート
サイトマップ レポート
サイトマップについて
クロールとインデックス登録
削除ツール

拡張

速度レポート
パフォーマンスが重要なのはなぜか
Fast load times
モバイル ユーザビリティ レポート
レスポンシブ ウェブデザインの基本
アクセシビリティ
リッチリザルトのステータス レポート
リッチリザルト テスト
解析できない構造化データのレポート
構造化データを追加するためのツール(初心者向け)
構造化データでリッチリザルトを有効化する
構造化データについて
AMP ステータス レポート
AMP テスト
AMP について
Google 全体で AMP ページを強化する

セキュリティと手動による対策

[手動による対策] レポート
Google 検索の仕組み
品質に関するガイドライン
[セキュリティの問題] レポート
セキュリティ、マルウェア
セキュリティとアイデンティティ
望ましくないソフトウェアのポリシー

リンク

リンクレポート
バックリンクを否認する

Google Search Console その6 セキュリティと手動による対策 / リンク

Google Search Console Logo

その1 Google Search Console に登録
その2 検索パフォーマンス
その3 URL 検査
その4 インデックス
その5 拡張
その6 セキュリティと手動による対策 / リンク ←(今回)
その7 その他のツール・ヘルプまとめ

セキュリティと手動による対策

左のメニュー欄、「セキュリティと手動による対策」の中にある二つの項目の内容はこうです。

手動による対策」⇒ 検索インデックスを不正な手法で操作したと疑われ、Google の担当者がそのサイトを手動で検索結果から除外した履歴

セキュリティの問題」⇒ サイトがハッキングされているなどの警告

手動による対策レポート

Google の担当者がサイト上のページを目視で審査し、検索インデックスの操作などを検知し、Google の品質に関するガイドラインに準拠していないと判断した場合、そのサイトを検索結果から除外します。
このレポートで問題が検出された場合、すぐに対策が必要ですね。

問題の一覧です。逆に言えば、このようなことをしないように(故意でなくても)気を付けなくてはいけませんね。

  • ユーザー生成スパム(掲示板等)
  • スパム行為のある無料ホスト(利用している無料のウェブ ホスティング サービス側の問題)
  • 構造化データに関する問題(構造化データに関するガイドラインに違反)
  • サイトへの不自然なリンク(過度のリンク交換)
  • サイトからの不自然なリンク(過度のリンク交換)
  • 価値のない質の低いコンテンツ
  • クローキング、不正なリダイレクト
  • 悪質なスパム(意味不明な内容の自動生成、他のサイトからのコンテンツの無断複製等)
  • 画像のクローキング
  • 隠しテキスト、キーワードの乱用
  • AMP コンテンツの不一致
  • 不正なモバイル リダイレクト

問題を修正後、このページから「審査をリクエスト」できます。再審査には 1 ~ 2 週間かかります。

セキュリティの問題レポート

サイトがハッキングされている、ユーザーに損害を与えそうな動作(フィッシング攻撃、マルウェアや望ましくないソフトウェアのインストール)が検出された場合、Google の検索結果に警告ラベルが追加されたり、ページアクセス時、ブラウザで警告ページが表示されたりします。

問題の一覧です。検出され次第、すぐに対策が必要です。

  • 不正なページ(訪問者をだまして危険な行為に誘導するコンテンツ)
  • 不正な埋め込みリソース(訪問者をだまして危険な行為に誘導する不正な広告など)
  • マルウェア
  • ハッキングのタイプ: コード インジェクション
  • ハッキングのタイプ: コンテンツ インジェクション
  • ハッキングのタイプ: URL インジェクション
  • 有害なダウンロード
  • 有害なダウンロードへのリンク
  • 不明瞭なモバイル請求
  • 一般的ではないダウンロード(Google セーフ ブラウジングにまだ認識されていないコンテンツ)

問題を修正後、このページから「審査をリクエスト」できます。再審査には 1 ~ 2 週間かかります。

リンク レポート

自分のサイトにリンクを貼っているサイト、リンクされているページなどが確認できます。
各表は 1000 行までなので、それ以上ある場合、下位は表示されません。

Google Search Console に登録後、リンク レポートが表示されるまで、数日かかります。私の場合、5日ぐらいかかりました。

スパムの可能性のあるサイトにリンクされている場合、Google による自分のサイトの評価が落ちてしまう可能性があります。
不適切なリンクを見つけた場合、リンクの否認ツールより、申請ができます。Google ヘルプの「バックリンクを否認する」に手順が示されています。

グーグルのリンク評価

Google の検索結果の順位の決定において、被リンクは最も重要な要素の一つですね。
でも、むやみやたらに被リンクを増やせばいいというわけでもないし、Google もすべてを教えてくれるわけじゃないので、SEO を考えていく上で難しい案件です。
色々読んでみたのですが、「グーグルのリンク評価20の原則」は、勉強になりました。こちらのサイトを参考にして、自分なりにまとめ直してみました。
(Google Search Console の使い方、という内容からは外れますが・・・)

一票の格差

被リンク数は多い方がいいのですが、それぞれのリンクの価値は同じではありません。

  • 人気ページ(Google の評価の高いページ)からのリンクは、価値がある
  • 初めてリンクしてくれるドメインからのリンクは、これまでリンクしてくれたことのあるところより、価値がある
  • 直接リンクされていなくても、信頼性の高いサイトからのリンクの距離が近いほど、価値がある
    (いくつか他のサイトをまたいでいる状態)
  • 外部からのリンクは、内部リンクより価値がある
    (ただし、内部リンクを充実させることで、サイト構造の面で、Google からの評価は期待できる)
  • 鮮度の高いページ(新しいページや定期的に更新されているページ)からのリンクは、鮮度の低いページからより価値がある
  • 自分のサイトに、質の高いページのリンクを貼ることは、よい影響を及ぼす可能性がある
  • スパムページからのリンクや低品質リンクは、価値を下げる
  • 自分のサイトに、スパムページのリンクを貼ることは、価値が下がる可能性がある
リンクの場所

ページの中のどの部分にリンクが貼られているのかで、リンクの価値が変わります。

  • メインコンテンツの中のリンクは、メニュー、ヘッダー、フッターの中のリンクより、価値がある
  • メインコンテンツの上部にあるリンクは、下部にあるリンクより、価値がある
  • 同じページ内に、同じ URL へのリンクが複数ある場合は、最初のリンクが評価の対象になる
関連性

リンクする側、される側のコンテンツの関連性で、リンクの価値が変わります。

  • アンカーテキスト(リンクが設定されている部分の文字列)が、コンテンツと関連性が高いほど、価値がある
  • 内容面で関連性の高いサイトからのリンクは、価値が高い
  • リンクがなくても、エンティティに関するデータをページに関連付ける場合がある
その他
  • リンクの増加率は、鮮度が高いとみなされる可能性がある
  • リンクがなくなった後も、その影響はしばらくの間残る
  • 最近の Google は、Java Script を読み込めるので、Java Script を利用したリンクも評価される
  • nofollow にしても、場合によっては、Google は価値を引き渡すことがある

Google Search Console その5 拡張

Google Search Console Logo

その1 Google Search Console に登録
その2 検索パフォーマンス
その3 URL 検査
その4 インデックス
その5 拡張 ←(今回)
その6 セキュリティと手動による対策 / リンク
その7 その他のツール・ヘルプまとめ

拡張


左のメニュー欄、「拡張」についてまとめていきます。

「速度」「モバイル ユーザビリティ」、更に設置されている場合、「AMP」「リッチリザルト」がその下に表示されます。
リッチリザルトは、タイプごとに表示されます。
(この画像だとリッチリザルトの「サイトリンク検索ボックス」が設置されてます。)

速度レポート

ディバイスごと(「モバイル」「PC」)に、、実際の使用状況データに基づいて、ページの処理速度が示されます。
Google Search Console へ登録してから、Google がデータを取って解析するのに数日かかります。(私の場合、5日ぐらい)

このレポートではサイト全体の統計が示されるのですが、各ページの速度チェックは、こちらから行えます。
PageSpeed Insights

Google のヘルプを読むと、速度が重要な理由が書かれていました。

  • ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。
    (1 秒から 3 秒に増加すると、直帰率は 32% 増加)
    (1 秒から 6 秒に増加すると、直帰率は 106% 増加)
  • 遅いと判断されたページは、Google 検索での順位が下がる可能性があります。

定期的に確認する必要がありますね。
速度はこのような指標で評価されます。

  高速 中速 低速
FCP 1 秒未満 3 秒未満 3 秒以上
FID 100 ミリ秒未満 300 ミリ秒未満 300 ミリ秒以上

当然「高速」であることが望ましいのですが、「中速」⇒改善の余地あり、「低速」⇒すぐさま対策が必要となります。

「低速」と評価されたときの改善方法は、developers.google.com の「パフォーマンスが重要なのはなぜか」というトピックスに詳しく書かれていますが、やるべきことを要約すると、こんな感じです。

  • 画像・動画の最適化
  • スクリプトの最適化
  • CSS の最適化
  • 配信方法の改善
  • ユーザーのネットワーク環境に合わせて、リソースの配信を調整
  • 無駄なテキストの削除

PageSpeed Insightsの速度チェックでも解決方法が示されるので、参考にできます。

モバイル ユーザビリティ

メニュー欄の「モバイル ユーザビリティ」は、サイト全体のモバイル ユーザビリティの状態を確認できます。
URL 検査」では個々の URL のモバイル ユーザビリティを確認できますが、こちらはそのモバイル ユーザビリティの部分だけを抽出して、サイト全体のレポートとなります。
カバレッジのモバイル版という感じです。

レポートの見方は、ほぼ、カバレッジと同じです。
詳細の行 ⇒ 任意の URL ⇒「ライブテスト」をクリックすると、モバイル フレンドリ テスト のページが開きます。

エラーが検出された場合、それに従ってページを改善します。
レスポンシブ対応でないという問題が多いと思いますが、CSS の flexboxGrid Layout を利用すると複雑にならずに実装できます。モバイルでのアクセスがこれだけ多いことを考えると、必ず対応しなくてはいけませんね。
developers.google.com に、「サイトをモバイル対応にする」というトピックスがあります。参考になりますね。

AMP とリッチリザルト

AMP ページ、またはページ内にリッチリザルトの記述がある場合、ここで状態を確認できます。
(AMP、リッチリザルトを利用していない場合、メニュー欄に表示されません。)

AMP とは?リッチリザルトとは?ということを、まとめた記事です。
構造化データでリッチリザルトを実現する
AMP for WP

リッチリザルトは、メニュー欄に「リッチリザルト」と表示されるのではなく、タイプごとに表示されます。
Google Search Console でサポートされるリッチリザルトのタイプは、以下の通りです。
パンくずリスト / データセット / イベント / FAQ / ファクト チェック / How-to / 求人情報 / ロゴ / 商品 / Q&A ページ / レシピ / レビュー スニペット / サイトリンク検索ボックス / Video

↑ のモバイル ユーザビリティ同様、エラーのあるページ、エラーの内容が確認できます。
個別のページを詳しくテストするには、こちらのツールを利用します。
AMP テスト
リッチリザルト テスト

Google Search Console その4 インデックス

Google Search Console Logo

その1 Google Search Console に登録
その2 検索パフォーマンス
その3 URL 検査
その4 インデックス ←(今回)
その5 拡張
その6 セキュリティと手動による対策 / リンク
その7 その他のツール・ヘルプまとめ


左のメニュー欄の「インデックス」についてまとめます。

「カバレッジ」「サイトマップ」「削除」の3項目があります。

カバレッジ

URL 検査」が個々の URL のインデックス等の状態を確認するのに対して、「カバレッジ」は、サイト全体の インデックス状態を確認することができます。

インデックス登録のステータスについて

「カバレッジ」では、サイト内のそれぞれのページのインデックス登録について、4つの「ステータス」に分けて表示されます。

「エラー」⇒ 何らかの理由でインデックス登録できなかったページ
「警告」 ⇒ インデックス登録はされているけど、問題のあるページ
「有効」 ⇒ インデックス登録されているページ
「除外」 ⇒ 意図的にインデックス登録をしていないページ

更にそれぞれの「ステータス」は、その理由ごとに「型」に分けられます。

カバレッジの見方

グラフの上に、「エラー」「有効(警告あり)」「有効」「除外」の4つのステータスがあり、総数が表示されています。
それぞれをクリックすると、日ごとの棒グラフとして反映されます。

グラフの下の「詳細」に、グラフで選択したステータスにおいて、それぞれの型(理由)ごとに表示されます。

「詳細」に示されたそれぞれの型をクリックすると、その型に含まれるページの URL 一覧が表示されます。
例えば、↑ の画像の一行目「noindex タグによって除外されました」をクリックすると、↓ の画像のように表示されます。

型の下の「詳細」をクリックすると、Google のヘルプが表示され、そのタイプの説明と処理方法が確認できます。
更にページをクリックして選択すると、画面右側に、その URL の検査項目が表示されます。


URL を検査」⇒ 各ページのインデックス状況、サイトマップ情報、クロール情報、モバイルユーザビリティなどを検査

「ROBOTS.TXT によるブロックをテスト」⇒ 「robots.txtテスター」のページにジャンプし、最新バージョンが確認できます。

サイトマップ

サイトマップ レポートでは、Google へのサイトマップの送信、送信履歴の確認、解析時に検出されたエラーの確認、サイトマップの削除ができます。

Google によりますと、100ページ未満の小規模のサイト、もしくはすべてのページがホームページからリンクされているようなサイトの場合、サイトマップを送信しなくても、インデックス登録のみでもいいよ、というような趣旨のことが書かれています。
自分のサイトにはサイトマップが必要かどうか、こちらを読んで確認するといいと思います。
Google ヘルプ サイトマップについて

↑ 私のサイト「https://web.hazu.jp」のサイトマップレポートをみると、一覧にサイトマップが表示されていませんね。
Google は私のサイトマップを読み込んでいて、「URL 検査」でも、サイトマップは検出されているのに、おかしいですね。

このように一覧にサイトマップが表示されないのは、以下の2つの場合です。

1. このレポートを使用してサイトマップを送信しなかった
2. サイトマップが別のプロパティに配置されている

私の場合、理由は 1.ですね。サイトマップを、WordPress のプラグイン、All in One SEO Pack から送信しています。

Google のヘルプを読むと、「その他の方法でサイトマップがすでに検出されている場合でも、このレポートを使用してサイトマップを送信することで、成功率とエラー率をトラッキングできます。」と書かれています。
他の方法で送っても、ここで再送信した方がよさそうですね。

削除

所有しているサイトについて検索結果からの一時的なブロックを行います。

URL 削除レポートの見方

左のメニュー欄の「削除」をクリックすると、Google のインデックスの削除に関するレポートが表示されます。

一番上に3つの項目があります。レポートの内容は以下の通りです。

「一時的な削除」(オーナーである自分が行ったリクエスト)
⇒ この削除ツールを利用して、過去6か月に一時的なページの削除のリクエスト行った全履歴
リストの右の三点マークをクリックすると、「リクエストのキャンセル」を行えます。

「古いコンテンツ」(古いキャッシュを見つけた場合など、他人が行ったリクエスト)
古いコンテンツの削除ツールを利用して、過去6か月間に提出されたリクエストの全履歴

「セーフサーチ フィルタリング」(不適切な内容を見つけた場合など、他人が行ったリクエスト)
不適切なコンテンツの報告を利用して、過去6か月間に提出されたリクエストの全履歴

削除の新しいリクエスト

約90日間の一時的なインデックスの削除のリクエストが行えます。
「一時的な削除」⇒ 右上の赤い「新しいリクエスト」をクリックします。


「URL を一時的に削除する」⇒ インデックスそのものを削除する。
「キャッシュされた URL を削除する」⇒ インデックスは残すが、キャッシュされたページと説明文を削除する。次にクロールされたときに、更新される。

入力欄にブロックしたいページの URL を記しますが、これは URL の全てののパターン(www ありなし、プロトコルなど)が含まれます。

「この URL のみを削除」「このプレフィックスで始まる URL の全てを削除」のどちらかを選びます。

「次へ」をクリックし、「リクエスト送信」で完了です。

完全に削除する

インデックスを完全に削除するには、ここでの処理は十分ではありません。
以下の処理を行う必要があります。

・ サイト上の実際のコンテンツを削除。404 または 410 のいずれかの HTTP ステータス コードサーバーからを返すようにする。
・ パスワードなどで、コンテンツへのアクセスをブロック。
・ noindex メタタグを使用して、ページがインデックスに登録されないように指定。(ただし、URL 知っている、リンクたどるなども考えられるので、アクセスを完全にブロックする方法にはならない。)