リッチ商品コンテンツをフォーマットする

リッチ商品コンテンツ [rich_product_content] 属性を使用し、テキストとメディアを組み合わせて表現豊かな商品説明を作成して、商品やサービスの特長を効果的にアピールできます。リッチ コンテンツは、JSON-LD、RDFa、microdata など、さまざまなエンコードを使用して構成します。

リッチ コンテンツは Google 構造化データ テストツールを使用してテストし、エラーが含まれていないことを確認することをおすすめします。この記事に掲載されている例はすべてテストツールで試すことができます。

この記事では、さまざまなリッチ コンテンツに必要なデータの構造について説明します。

注: Manufacturer Center API でリッチ商品コンテンツ [rich_product_content] 属性がサポートされるようになりました。Manufacturer Center API の使用方法

仕組み

リッチ コンテンツ

リッチ コンテンツは、ショーケースのブロックが連なって構成されます。各ブロックはショーケース機能セットまたはメディア ギャラリーのいずれかのタイプに設定され、縦 1 列で構成されます。つまり、リッチ コンテンツは「Showcase」タイプの要素によってその内容が特定されます。

Showcase タイプは CollectionPage のスキーマ拡張
プロパティ	タイプ	説明
showcaseBlock	ShowcaseFeatureSet または MediaGallery	リッチ コンテンツのブロック。各ブロックは ShowcaseFeatureSet（ショーケース機能セット）または MediaGallery（メディア ギャラリー）のいずれかである必要があります。

ショーケース機能セット

ショーケース機能セットは、任意の見出しと一連のショーケース機能で構成されます。機能セットは 1 列または複数列で表示できます。

ShowcaseFeatureSet タイプは ItemList のスキーマ拡張
プロパティ	タイプ	説明
layoutHint	テキスト	何列で構成するかを示す任意の指標。機能は最初に行で、次に列で構成されます。サポートされる値は次のとおりです。 > LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4> layoutHint（レイアウト ヒント）はわかる範囲でできるだけ正確に指定します。小さな画面では、指定より少ない列を使用する場合もあります。
見出し	テキスト	機能セットを説明する任意の見出し。
itemListElement	ShowcaseFeature	このセットのショーケース機能。機能は最初に行で、次に列で構成されます。

ショーケース機能

ショーケース機能は、見出し、説明、任意の画像で構成されます。

ShowcaseFeature タイプは ListItem のスキーマ拡張
プロパティ	タイプ	説明
layoutHint	テキスト	見出しと説明に対し、どこに画像を配置するかを示す任意の指標。サポートされる値は次のとおりです。 LayoutMediaLeft LayoutMediaRight LayoutMediaAbove LayoutMediaBelow layoutHint（レイアウト ヒント）はわかる範囲でできるだけ正確に指定します。小さな画面では、画像が指定とは異なる配置になる場合もあります。
見出し	テキスト	機能の見出し。
description [商品説明]	テキスト	機能の説明。
画像	URL または ImageObject	機能を表す任意の画像。

メディア ギャラリー

メディア ギャラリーは任意の見出しと一連の画像で構成されます。画像は 1 列または複数列で表示できます。

MediaGallery タイプは CollectionPage のスキーマ拡張
プロパティ	タイプ	説明
layoutHint	テキスト	何列で構成するかを示す任意の指標。画像は最初に行で、次に列で構成されます。サポートされる値は次のとおりです。 LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4 layoutHint（レイアウト ヒント）はわかる範囲でできるだけ正確に指定します。小さな画面では、指定より少ない列を使用する場合もあります。
見出し	テキスト	ギャラリーの上部に表示する任意の見出し。
画像	URL または ImageObject	ギャラリーに表示する画像。

名前空間に関する注意点

Showcase、ShowcaseFeatureSet、ShowcaseFeature、MediaGallery の各タイプと、showcaseBlock、layoutHint の各プロパティは、http://schema.googleapis.com/ の定義に基づいてスキーマを拡張したものです。他のすべてのタイプとプロパティは http://schema.org/ で定義されます。

例

空のリッチ コンテンツ形式

最も単純なリッチ コンテンツは空のコンテンツです。これは、リッチ コンテンツのインスタンスを表す必要最小限の形式です。

空のリッチ コンテンツ

JSON-LD

>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase" }

RDFa

<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/"> <div typeof="g:Showcase"> </div> </div>

microdata

<div itemscope itemtype="http://schema.googleapis.com/Showcase"> </div>

見出しと説明のみで画像なしの単一ショーケース機能

画像がない単一のショーケース機能で構成されるリッチ コンテンツの例は次のとおりです。

	単一ショーケース機能 見出し 説明
JSON-LD
>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "s:headline": "Google Pixel 3 のご紹介", "s:description": "いつも完璧なショット、Google アシスタントの広範なサポートと長持ちバッテリーで抜群の使い心地" } ] } ] }
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="headline" content="Google Pixel 3 のご紹介"></div> <div property="description" content="いつも完璧なショット、Google アシスタントの広範なサポートと長持ちバッテリーで抜群の使い心地"></div> </div> </div> </div>
microdata
><div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.org/headline" content="Google Pixel 3 のご紹介"></div> <div itemprop="http://schema.org/description" content="いつも完璧なショット、Google アシスタントの広範なサポートと長持ちバッテリーで抜群の使い心地"></div> </div> </div> </div>

見出し、説明、画像付きの単一ショーケース機能

ショーケース機能に、次のように画像を追加できます。

	単一ショーケース機能 見出し 説明 画像
JSON-LD
>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "s:headline": "Google レンズ", "s:description": "Google レンズで観察眼を研ぎ澄ます", "s:image": "http://example.com/pixel3-google-lens.png" } ] } ] }
RDFa
><div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="headline" content="Google レンズ"></div> <div property="description" content="Google レンズで観察眼を研ぎ澄ます"></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
microdata
><div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.org/headline" content="Google レンズ"></div> <div itemprop="http://schema.org/description" content="Google レンズで観察眼を研ぎ澄ます"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>

レイアウト ヒントを使用した見出し、説明、画像を含む単一ショーケース機能

レイアウト ヒントを使用すれば、ショーケース機能で画像の配置を自由に設定できます。

	単一ショーケース機能 見出し 説明 画像 レイアウト: 他のコンテンツの左側に画像を配置
JSON-LD
>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Google レンズ", "s:description": "Google レンズを通して見たものを検索できます。たとえば、ファッションやインテリアを検索したり、テキストをコピーして翻訳したり。ランドマーク、植物、動物などをリアルタイムでカメラから識別することもできます。", "s:image": "http://example.com/pixel3-google-lens.png" } ] } ] }
RDFa
><div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaLeft"></div> <div property="headline" content="Google レンズ"></div> <div property="description" content="Google レンズを通して見たものを検索できます。たとえば、ファッションやインテリアを検索したり、テキストをコピーして翻訳したり。ランドマーク、植物、動物などをリアルタイムでカメラから識別することもできます。"></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
microdata
><div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div> <div itemprop="http://schema.org/headline" content="Google レンズ"></div> <div itemprop="http://schema.org/description" content="Google レンズを通して見たものを検索できます。たとえば、ファッションやインテリアを検索したり、テキストをコピーして翻訳したり。ランドマーク、植物、動物などをリアルタイムでカメラから識別することもできます。"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>

レイアウト ヒントを使用してレイアウトを変更するショーケース機能セット

レイアウト ヒントは、視覚に訴える効果的なレイアウトを作成するのに便利です。

	単一ショーケース機能セット 4 つのショーケース機能 メディアを交互に配置し、ジグザグのレイアウトを構成
JSON-LD
>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns1", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Google レンズ", "s:description": "Google レンズを通して見たものを検索できます。たとえば、ファッションやインテリアを検索したり、テキストをコピーして翻訳したり。ランドマーク、植物、動物などをリアルタイムでカメラから識別することもできます。", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "グループ自撮りモード", "s:description": "Pixel 3 のデュアル フロント カメラを使えば、自撮り棒がなくてもグループ自撮りができます。シャッターを押すために一人だけ前に突き出たりすることもありません。また、自撮りで背景をきれいに写すのにも便利です。", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Digital Wellbeing", "s:description": "家族や友達との時間を大切にしたいときは、時間や場所を問わず、スマートフォンをオフラインに。アプリにタイマーを設定したり、通知を非表示にしたりできます。夜はおやすみモードで画面をグレイスケールにして、快適な睡眠にいざないます。", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Google アシスタント", "s:description": "ご旅行の際は、Google アシスタントに話しかけるだけで、人気のスポットをチェックしたり、航空便や価格を検索したり、搭乗券を早めに入手したりできます。到着後は、Google アシスタントがホテル周辺のレストランや地元のイベントなどを探し、旅先のアクティビティを満喫させてくれます。", "s:image": "http://example.com/pixel3-google-assistant.png" } ] } ] }
RDFa
><div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="g:layoutHint" content="LayoutColumns1"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaLeft"></div> <div property="headline" content="Google レンズ"></div> <div property="description" content="Google レンズを通して見たものを検索できます。たとえば、ファッションやインテリアを検索したり、テキストをコピーして翻訳したり。ランドマーク、植物、動物などをリアルタイムでカメラから識別することもできます。"></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaRight"></div> <div property="headline" content="グループ自撮りモード"></div> <div property="description" content="Pixel 3 のデュアル フロント カメラを使えば、自撮り棒がなくてもグループ自撮りができます。シャッターを押すために一人だけ前に突き出たりすることもありません。また、自撮りで背景をきれいに写すのにも便利です。"></div> <div property="image" content="http://example.com/pixel3-group-selfies.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaLeft"></div> <div property="headline" content="Digital Wellbeing"></div> <div property="description" content="家族や友達との時間を大切にしたいときは、時間や場所を問わず、スマートフォンをオフラインに。アプリにタイマーを設定したり、通知を非表示にしたりできます。夜はおやすみモードで画面をグレイスケールにして、快適な睡眠にいざないます。"></div> <div property="image" content="http://example.com/pixel3-digital-wellbeing.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaRight"></div> <div property="headline" content="Google アシスタント"></div> <div property="description" content="ご旅行の際は、Google アシスタントに話しかけるだけで、人気のスポットをチェックしたり、航空便や価格を検索したり、搭乗券を早めに入手したりできます。到着後は、Google アシスタントがホテル周辺のレストランや地元のイベントなどを探し、旅先のアクティビティを満喫させてくれます。"></div> <div property="image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>
microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div> <div itemprop="http://schema.org/headline" content="Google レンズ"></div> <div itemprop="http://schema.org/description" content="Google レンズを通して見たものを検索できます。たとえば、ファッションやインテリアを検索したり、テキストをコピーして翻訳したり。ランドマーク、植物、動物などをリアルタイムでカメラから識別することもできます。"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaRight"></div> <div itemprop="http://schema.org/headline" content="グループ自撮りモード"></div> <div itemprop="http://schema.org/description" content="Pixel 3 のデュアル フロント カメラを使えば、自撮り棒がなくてもグループ自撮りができます。シャッターを押すために一人だけ前に突き出たりすることもありません。また、自撮りで背景をきれいに写すのにも便利です。"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-group-selfies.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div> <div itemprop="http://schema.org/headline" content="Digital Wellbeing"></div> <div itemprop="http://schema.org/description" content="家族や友達との時間を大切にしたいときは、時間や場所を問わず、スマートフォンをオフラインに。アプリにタイマーを設定したり、通知を非表示にしたりできます。夜はおやすみモードで画面をグレイスケールにして、快適な睡眠にいざないます。"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-digital-wellbeing.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaRight"></div> <div itemprop="http://schema.org/headline" content="Google アシスタント"></div> <div itemprop="http://schema.org/description" content="ご旅行の際は、Google アシスタントに話しかけるだけで、人気のスポットをチェックしたり、航空便や価格を検索したり、搭乗券を早めに入手したりできます。到着後は、Google アシスタントがホテル周辺のレストランや地元のイベントなどを探し、旅先のアクティビティを満喫させてくれます。"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>

メディア ギャラリー: 単一バナー画像

同様に、メディア ギャラリーを使用して画像をバナーとして使用することもできます。

	メディア ギャラリー 単一バナー画像
JSON-LD
{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:MediaGallery", "g:layoutHint": "LayoutColumns1", "s:image": [ "http://example.com/pixel3-pink-fruitpop-banner.png" ] } ] }
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:MediaGallery"> <div property="g:layoutHint" content="LayoutColumns1"></div> <div property="image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div> </div> </div>
microdata
><div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/MediaGallery"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div> </div> </div>

3 ブロックのショーケース: 機能 x 1、ショーケース機能セット、バナー画像 x 1

複数のショーケース ブロックを組み合わせることで、独自のレイアウトをデザインできます。

	3 ブロックのショーケース 単一機能のショーケース機能セット 3 列レイアウトで 6 機能を表示するショーケース機能セット 単一バナー画像のメディア ギャラリー
JSON-LD
{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns1", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaBelow", "s:headline": "Google Pixel 3 のご紹介", "s:description": "いつも完璧なショット、Google アシスタントの広範なサポートと長持ちバッテリーで抜群の使い心地", "s:image": "http://example.com/pixel3-main-image.png" } ] }, { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns3", "s:headline": "特集", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Google レンズ", "s:description": "Google レンズで観察眼を研ぎ澄ます", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "グループ自撮りモード", "s:description": "自撮り棒なしでグループ自撮りも簡単", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Digital Wellbeing", "s:description": "オンラインの喧騒を離れ、ゆとりと温もりのときを過ごす", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Google アシスタント", "s:description": "Google アシスタントに何でも訊いて効率アップ", "s:image": "http://example.com/pixel3-google-assistant.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "サイレント モード", "s:description": "サイレント モードで誰にも邪魔されずに集中してやるべきことをやる", "s:image": "http://example.com/pixel3-shhh-gesture.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Call Screen", "s:description": "Call Screen で、電話応対はアシスタントに任せよう", "s:image": "http://example.com/pixel3-call-screen.png" } ] }, { "@type": "g:MediaGallery", "g:layoutHint": "LayoutColumns1", "s:image": [ "http://example.com/pixel3-pink-fruitpop-banner.png" ] } ] }
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="g:layoutHint" content="LayoutColumns1"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaBelow"></div> <div property="headline" content="Google Pixel 3 のご紹介"></div> <div property="description" content="いつも完璧なショット、Google アシスタントの広範なサポートと長持ちバッテリーで抜群の使い心地"></div> <div property="image" content="http://example.com/pixel3-main-image.png"></div> </div> </div> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="g:layoutHint" content="LayoutColumns3"></div> <div property="headline" content="特集"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Google レンズ"></div> <div property="description" content="Google レンズで観察眼を研ぎ澄ます"></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="グループ自撮りモード"></div> <div property="description" content="自撮り棒なしでグループ自撮りも簡単"></div> <div property="image" content="http://example.com/pixel3-group-selfies.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Digital Wellbeing"></div> <div property="description" content="オンラインの喧騒を離れ、ゆとりと温もりのときを過ごす"></div> <div property="image" content="http://example.com/pixel3-digital-wellbeing.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Google アシスタント"></div> <div property="description" content="Google アシスタントに何でも訊いて効率アップ"></div> <div property="image" content="http://example.com/pixel3-google-assistant.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="サイレント モード"></div> <div property="description" content="サイレント モードで誰にも邪魔されずに集中してやるべきことをやる"></div> <div property="image" content="http://example.com/pixel3-shhh-gesture.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Call Screen"></div> <div property="description" content="Call Screen で、電話応対はアシスタントに任せよう"></div> <div property="image" content="http://example.com/pixel3-call-screen.png"></div> </div> </div> <div property="g:showcaseBlock" typeof="g:MediaGallery"> <div property="g:layoutHint" content="LayoutColumns1"></div> <div property="image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div> </div> </div>
microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaBelow"></div> <div itemprop="http://schema.org/headline" content="Google Pixel 3 のご紹介"></div> <div itemprop="http://schema.org/description" content="いつも完璧なショット、Google アシスタントの広範なサポートと長持ちバッテリーで抜群の使い心地"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-main-image.png"></div> </div> </div> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns3"></div> <div itemprop="http://schema.org/headline" content="特集"></div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Google レンズ"></div> <div itemprop="http://schema.org/description" content="Google レンズで観察眼を研ぎ澄ます"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="グループ自撮りモード"></div> <div itemprop="http://schema.org/description" content="自撮り棒なしでグループ自撮りも簡単"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-group-selfies.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Digital Wellbeing"></div> <div itemprop="http://schema.org/description" content="オンラインの喧騒を離れ、ゆとりと温もりのときを過ごす"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-digital-wellbeing.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Google アシスタント"></div> <div itemprop="http://schema.org/description" content="Google アシスタントに何でも訊いて効率アップ"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-assistant.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="サイレント モード"></div> <div itemprop="http://schema.org/description" content="サイレント モードで誰にも邪魔されずに集中してやるべきことをやる"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-shhh-gesture.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Call Screen"></div> <div itemprop="http://schema.org/description" content="Call Screen で、電話応対はアシスタントに任せよう"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-call-screen.png"></div> </div> </div> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/MediaGallery"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div> </div> </div>