Blog article
投稿日:
2018.02.12
更新日:
2019.08.25

amp-imgの中にitempropを入れてもエラーを返す

amp-img
タイトルの表現がこれでいいのかわからず。
過去にamp化している時つまづいた事、メモ書き程度に

@typeをmovieで使う人なんてそんなにいない

ampのページを作ってる時、@typeがMovieの場合imageが必須項目になってます。
普通にHTML5でimgの中にitempropを書いても何も大丈夫なのに、
なぜamp-imgの中にitempropを書いたら重大なエラーを返すのか。
「わたし、気になります!」

そういえばこの前、Kindleで古典部シリーズ読みました・・・。
ふたりの距離の概算 (角川文庫)どうでもいいですね

ld+jsonで書けばいいのに

その通りです、ld+jsonで書くのが賢いです。

<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Movie",
"name": "アルマゲドン",
"image": "http://example.com/img/package.png"
}</script>
この基本に乗っ取ってかけばいいだけ

昔ながらのタグに埋め込むタイプ

普通はこう。

<img src="http://example.com/img/package.png" itemprop="image" alt="アルマゲドン" width="200" height="200">

amp-imgで使う時はこう。

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<amp-img src="http://example.com/img/package.png" height="200" width="200"></amp-img>
<meta itemprop="url" content="http://example.com/img/package.png"></meta>
<meta itemprop="width" content="200"></meta>
<meta itemprop="height" content="200"></meta>
</div>

DIVで囲って、そこにitempropを入れる。

AMPカンファレンス行われました

13日〜14日に、ampについての発表会やってました。
https://www.ampproject.org/amp-conf

構造データのテストは下記URL
https://search.google.com/structured-data/testing-tool/u/0/

【関連記事】

アバター画像
この記事を書いた人:たかはし
ウェブデザイナー

こちらの記事もオススメです

こういう仕事をしてます

SNSもよろしくね