ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress, AMPの『必須の構造化データ要素のエラー』を直す

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

2019/11/16。突然、AMPのページで『必須の構造化データ要素のエラー』が出るようになりました。

Googleは構造化データに対して若干変更を加えたようで、それが原因らしい。

修正はかんたんです。プラグインを使っていれば設定だけで済みます。

構造化データ(Schema.org)とは?

構造化データは、表示するHTMLページがどういう内容か、かんたんな説明をHTMLに組み込むデータのことです。

これを検索エンジンが読んで、適正なものを優先的に上位表示します。

HTMLの属性として書き込む方法やJSON形式でまとめてHTMLに組み込む方法があり、GoogleはJSON形式を推奨しています。

構造化データのフォーマットを決めているのはSchema.orgで、そこで決められたルールを守らなければいけません。

さらに、検索サイトを提供しているサービスごとに独自のルールがあり、すべてのサービスのルールを守ろうとすると気が遠くなります。

Googleのルールを守ればいいでしょう。

(YahooはGoogleの検索エンジンを使っているので同じ。)

通常のページとAMPページでも、推奨フォーマットが少しちがいます。今回はAMPのフォーマットのルールが変わったのでエラーになりました。

今回の答えを先に。

AMPのルールで公開者のロゴが必須になり、これが未指定でエラーになりました。

Googleの推奨するフォーマットで書いておけばいい。

構造化データは、検索エンジンにWebページをアピールするための自己紹介。

当然、内容とちがったり構造化データがテキトウだと良く思われない。

(検索結果で人目につきづらい。)

構造化データエラーの見つけ方

Googleの構造化データを検証するにはGoogle Search Consoleを使います。ここでは、サイトとサーチコンソールの連携はできているものとして進めます。

通常ページメニューの『拡張』->『解析不能な構造化データ』
AMPページメニューの『拡張』->『AMP』

で確認します。また、

メニューの『URL検査』

で、ページにインデックス登録するときにも分かります。今回は、新しいページをインデックス登録するときに発見しました。

グーグルサーチコンソール

エラーと言ってますが正確には警告です。ほっといても影響は少ないですが、正しくないことはたしか。

赤枠内をクリックするとエラーの内容が出ます。

グーグルサーチコンソール

出ました。『必須の構造化データ要素のエラー』です。ヒント(問題のドキュメントに移動する)をクリックすると、開発者向けGoogle検索情報へジャンプします。

『ちゃんと勉強して直せよ!』ってことですね?

メニューの『解析不能な構造化データ』『AMP』では、解決ページにジャンプできません。

かわりに、『URL検査を行う』という操作でURL検査にジャンプします。ここからヒントに行けっ!てことですね。

ちなみに、ほかのエラーも同じ方法で解決します。

AMPの構造化データ

AMPの構造化データです。

@type'Article', 'NewsArticle', 'BlogPosting'のいずれかのタイプに基づいてないといけない。
ジャンルによっていろいろある。
mainEntityOfPage通常ページのurl。
headlineページタイトル。記事タイトル
datePublished公開日時
dateModified更新日時
descriptionページ概要
publisherサイト公開者
@type'Organization'。
nameサイト名。
logoロゴ
@type'ImageObject'
urlロゴ画像のurl。
height60
推奨サイズ。
width600
推奨サイズ。
authorページ公開者
@type'Person' or 'Organization'
name公開者
imageアイコン。
gravatarも可。
imageアイキャッチ画像
@type'ImageObject'
url画像url
width画像幅
height画像高さ

ピンクは必須。ブルーは推奨。)

(通常ページはAMPよりルールがゆるい。AMPの構造データをそのまま使えばOK。)

データの確認は、Google構造化データテストツールでできます。

mainEntityOfPage

AMPページの元になる通常ページのurlを指定します。公式のサンプルでは@type, idで指定しています。

json
"mainEntityOfPage":{
  "@type": "WebPage",
  "id": "normal url"
},

が、これでは上手くいきません。なんでidにurlを入れるのかよく分からないし。

urlだけを指定すると上手くいきます。

json
"mainEntityOfPage": "normal url",

publisher @type

'Person'だとGoogleではエラーになります。個人だとしても'Organization'にしてください。

publisher logo

サイトのロゴは、最近(2019/11/16前後)になって必須項目にしたようです。これがなくてエラーになりました。

ロゴのサイズは600 × 60(よこ×たて)にします。ガイドラインはシビアですが、AMPストーリーを考えるとまたちがいます。

(くわしくはガイドラインを見てください。)

image

'ImageObject'でなくていいです。むしろ、アイキャッチ画像のサイズ違いを3つ載せることを推奨しています。

json
"image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
],

'ImageObject'でもエラーにならない。

サイトのロゴが必須になった。

AMP for WP – Accelerated Mobile Pagesプラグイン

WordPressには、AMPページを作るプラグインがいくつもあります。早いうちにAMP対応した人は、AMP for WP – Accelerated Mobile Pagesプラグインを使っている人が多いでしょう。

AMP for WPでは、構造化データを管理画面で設定するだけなのでかんたんです。

メニューの『AMP』->『Settings』->『Structured Data』

amp設定
amp設定

ボクは今まで、何もせずにデフォルトを使っていました。デフォルトではロゴが未設定です。

これがエラーの原因です。ロゴを設定したら直りました。

AMP for WP – Accelerated Mobile Pagesプラグインではロゴ画像を設定するだけ。あとはデフォルト。

WordPress公式のAMPプラグイン

WordPressには公式のAMPプラグインがあります。いまは使い勝手がよくなりましたが、当初はしょぼいプラグインでした。

いちばんのメリットは、通常ページから自動でAMPページを変換して作ってくれることで、通常ページと同じサイトデザインにできることです。

いま新しいサイトを作るなら公式プラグインを使いますが、それ以前に代替プラグインを使っていると移行が面倒です。

公式プラグインの最大の弱点は

  • ページ全体のCSSのサイズ(テーマ+プラグイン+カスタム)が50,000byte(50K)より大きいと、AMP用のCSSが必要。
  • JavaScriptを多用しているテーマだとAMPで機能しない。(AMPではほぼJavaScriptが使えない。)
  • CSSで定義したFont Awesomeのアイコンフォントが表示されない。(<i>を使わない方法。)(修正されてる。)

CSSサイズが増量しました。75,000byte(75K)です。

などなど、テーマやプラグインの作りが影響します。最初からAMPのことを考えて作られたテーマ・プラグインならいいですが、そうでないものはなんだかんだでAMP用のカスタマイズが必要です。

ボクはこれらの作業時間がもったいなくて、Accelerated Mobile Pagesを使いつづけています。

(とくに不満はないので。)

構造化データはAMPページにも引き継がれるので、構造化データのカスタマイズは比較的かんたん。

(AMP用の構造化データを通常ページでも使えばいい。)

修正できたか確認

最後に、修正が反映されたか確認します。Google Search Consoleを使います。

メニューの『AMP』を開きます。

グーグルサーチコンソール

上の『警告』をクリック、チェックしてグラフを出します。そして、『詳細』の『必須の構造化データ要素のエラー』をクリックしてください。

グーグルサーチコンソール

『修正を検証』ボタンがあります。その前に、構造化データを確認しましょう。エラーになったページのURLが下に表示されるので、ひとつコピーします。

Google 構造化データテストツールを開いて、URLを貼り付けテストを実行しましょう。

https://search.google.com/structured-data/testing-tool/u/0/

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

エラー・警告なしが確認できました。ここでサーチコンソールに戻って、『修正を検証』ボタンを押します。

作業は以上です。修正が上手くいくと検証結果が合格になり、サーチコンソールの警告数が減っていきます。

前の投稿
WordPress エディタをスッキリさせて編集作業に集中させる方法
WordPress サイト全体の総ページ数(アーカイブページ数も含む)を取得する方法
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

*