backstage

合唱音源の新着情報の舞台裏

AMP対応に必要なschema.org構造化データ

先週、以下のような記事を書きました。

s2terminal.hatenablog.com

上記の対応をして、Fetch as Googleでラブコールを送って待つこと5日。 下記のお返事が届きました。

f:id:s2terminal:20160327173936p:plain

AMP ページへの必須構造化データの追加について

http://合唱音源の新着情報.com/ の所有者様

お客様の AMP ページの一部に、AMP 関連機能を搭載した Google 検索結果への表示に必要な構造化データがないことを Google のシステムが検出しました。以下のレポートにはこうしたエラー(およびその他のエラー)が発生しているページの例が記載されています。

どうやらAMPで何かエラーになってしまったようです。 とりあえず「スタイルシートもう少しマジメに書けよ」みたいなエラーではないようで少し安心です。

Google Search Consoleで確認してみると、下記のエラーが出ていました。

f:id:s2terminal:20160327174000p:plain

どうやらAMP対応には、対応したテンプレートを用意するだけでなく schema.org構造化データ対応によるリッチスニペット有効化 が必要なようです。

詳しい仕様などは下記で紹介されていました。

www.suzukikenichi.com

Google公式のドキュメントにロゴの仕様などもありました。

https://developers.google.com/structured-data/carousels/top-stories

ロゴも必須ですが、仕様に対応するようなロゴ画像は持っていないのでテキストを適当にpng化して貼り付けてその場をしのぎます。

RailsでAMP用schema.org構造化データ対応

  • 110文字以下の 見出し
  • 画像
  • 投稿者情報
  • 著者情報
  • 投稿日
  • 更新日

上記データをschema.orgに沿った形で表示する必要があるようです。

こんな感じでモデルのインスタンスメソッドJSON情報を定義して

  # AMP用構造化データ
  def schema_org_news_article
    {
      "@context": "http://schema.org",
      "@type":    "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": self.url_for,
      },
      "headline":       self.title(110),
      "description":    self.tweet_text,
      "image":          self.thumbnail_json,
      "datePublished":  self.created_at.iso8601,
      "dateModified":   self.updated_at.iso8601,
      "publisher": {
        "@type": "Organization",
        "name":  "合唱音源の新着情報",
        "logo":  self.logo_json,
      },
      "author": {
        "@type": "Person",
        "name":  "suzuki.sh",
      },
    }
  end

テンプレートで呼び出しました。

    <script type="application/ld+json">
      <%= @tweet.schema_org_news_article.to_json.html_safe %>
    </script>

構造化データテストツールで確認します。

f:id:s2terminal:20160327174025p:plain

「問題ありません」と表示されたので、これでOKのはずです。

クロールエラーと異なり、エラーが解決したことを報告する機能は無いようなので、Fetch as Googleを送って気長に待ちます。

上手く行っていれば、数日の間にGoogle Search Console上に何らかの反応があると思います。