उत्पाद के रिच कॉन्टेंट को फ़ॉर्मैट करना

प्रॉडक्ट का रिच कॉन्टेंट [rich_product_content] एट्रिब्यूट की मदद से, आप बेहतर जानकारी देने वाले ऐसे ब्यौरे तैयार कर सकते हैं जिनमें टेक्स्ट और मीडिया शामिल हों. रिच कॉन्टेंट की मदद से, आप प्रॉडक्ट या सेवाओं की खासियतों को हाइलाइट कर सकते हैं. JSON-LD, RDFa, और माइक्रोडेटा जैसे अलग-अलग कोड का इस्तेमाल करके, रिच कॉन्टेंट उपलब्ध कराया जा सकता है.

हमारा सुझाव है कि आप Google के स्ट्रक्चर्ड डेटा टेस्टिंग टूल का इस्तेमाल करके, अपने रिच कॉन्टेंट की जांच करें. साथ ही, देख लें कि उसमें कोई गड़बड़ी न हो. इस लेख में दिए गए सभी उदाहरणों की जांच, टेस्टिंग टूल में की जा सकती है.

इस लेख में अलग-अलग तरह के रिच कॉन्टेंट के लिए ज़रूरी डेटा स्ट्रक्चर की जानकारी दी गई है.

ध्यान दें: अब Manufacturer Center API के साथ, प्रॉडक्ट का रिच कॉन्टेंट [rich_product_content] एट्रिब्यूट का इस्तेमाल किया जा सकता है. Manufacturer Center API को इस्तेमाल करने का तरीका जानें

यह कैसे काम करता है

रिच जानकारी

रिच जानकारी में सिलसिलेवार तरीके से दिए गए मुख्य ब्लॉक शामिल होते हैं. हर ब्लॉक या तो उत्पाद की मुख्य खासियत का सेट होता है या फिर मीडिया गैलरी होती है. ब्लॉक को किसी कॉलम में ऊपर से नीचे की ओर रेंडर किया जाता है. रिच कॉन्टेंट को Showcase प्रकार वाले एलिमेंट के साथ दिखाया जाता है.

Showcase टाइप में CollectionPage भी शामिल होता है
प्रॉपर्टी	कौनसा प्रकार होना चाहिए	ब्यौरा
showcaseBlock	ShowcaseFeatureSet या MediaGallery	रिच जानकारी वाला ब्लॉक. ब्लॉक या तो शोकेस फ़ीचर सेट होना चाहिए या फिर मीडिया गैलरी होनी चाहिए.

शोकेस फ़ीचर सेट

शोकेस फ़ीचर सेट में सिलसिलेवार तरीके से उत्पाद की खासियत दी जाती है. हालांकि, यह ज़रूरी नहीं है कि शोकेस फ़ीचर सेट में शीर्षक शामिल हो. फ़ीचर सेट को एक या एक से ज़्यादा कॉलम वाले डिसप्ले में रेंडर किया जा सकता है.

ShowcaseFeatureSet टाइप में ItemList भी शामिल होता है
प्रॉपर्टी	कौनसा प्रकार होना चाहिए	ब्यौरा
layoutHint	टेक्स्ट	वैकल्पिक संकेत बताता है कि रेंडर करने के लिए कितने कॉलम इस्तेमाल करने चाहिए. ये फ़ीचर, पहले पंक्तियों में और फिर कॉलम में रेंडर किए जाते हैं. ये वैल्यू इस्तेमाल की जा सकती हैं: > LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4> लेआउट संकेत, सबसे बेहतर कोशिशों के आधार पर लागू किया जाता है. छोटी स्क्रीन पर, अनुरोध किए गए कॉलम से कम कॉलम इस्तेमाल किए जा सकते हैं.
हेडलाइन	टेक्स्ट	ऐसी वैकल्पिक हेडलाइन जिससे फ़ीचर सेट की जानकारी मिलती हो.
itemListElement	ShowcaseFeature	किसी सेट का शोकेस फ़ीचर. फ़ीचर को पहले पंक्ति और फिर कॉलम में रेंडर किया जाता है.

शोकेस फ़ीचर

शोकेस फ़ीचर में हेडलाइन, ब्यौरा, और एक वैकल्पिक इमेज शामिल होती है.

ShowcaseFeature टाइप में ListItem भी शामिल होता है
प्रॉपर्टी	कौनसा प्रकार होना चाहिए	ब्यौरा
layoutHint	टेक्स्ट	वैकल्पिक संकेत से पता लगता है कि हेडलाइन और ब्यौरे से जुड़ी इमेज को कहां रेंडर करना है. ये मान इस्तेमाल किए जा सकते हैं: LayoutMediaLeft LayoutMediaRight LayoutMediaAbove LayoutMediaBelow लेआउट संकेत, सबसे बेहतर कोशिशों के आधार पर लागू किया जाता है. छोटी स्क्रीन पर इमेज को रेंडर करने के लिए, अनुरोध की गई जगह के बजाय किसी और जगह का इस्तेमाल किया जा सकता है.
हेडलाइन	टेक्स्ट	फ़ीचर की हेडलाइन.
ब्यौरा	टेक्स्ट	फ़ीचर का ब्यौरा.
इमेज	URL या ImageObject	एक वैकल्पिक इमेज जो फ़ीचर को दिखाती है.

मीडिया गैलरी

मीडिया गैलरी में एक वैकल्पिक शीर्षक और सिलसिलेवार तरीके से रखी गई इमेज शामिल होती हैं. इमेज को एक या एक से ज़्यादा कॉलम में रेंडर किया जाता है.

MediaGallery टाइप में CollectionPage भी शामिल होता है
प्रॉपर्टी	कौनसा प्रकार होना चाहिए	ब्यौरा
layoutHint	टेक्स्ट	वैकल्पिक संकेत बताता है कि रेंडर करने के लिए कितने कॉलम इस्तेमाल करने चाहिए. इमेज, सबसे पहले पंक्ति में और फिर कॉलम में रेंडर की जाती हैं. ये मान इस्तेमाल किए जा सकते हैं: LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4 लेआउट संकेत, सबसे बेहतर कोशिशों के आधार पर लागू किया जाता है. छोटी स्क्रीन पर, अनुरोध किए गए कॉलम से कम कॉलम इस्तेमाल किए जा सकते हैं.
हेडलाइन	टेक्स्ट	गैलरी में सबसे ऊपर दिखने वाली वैकल्पिक हेडलाइन.
इमेज	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>

माइक्रोडेटा

<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": "Meet the Google Pixel 3", "s:description": "Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more." } ] } ] }
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="Meet the Google Pixel 3"></div> <div property="description" content="Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."></div> </div> </div> </div>
माइक्रोडेटा
><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="Meet the Google Pixel 3"></div> <div itemprop="http://schema.org/description" content="Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."></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 Lens", "s:description": "The power to search what you see with Google Lens", "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 Lens"></div> <div property="description" content="The power to search what you see with Google Lens"></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
माइक्रोडेटा
><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 Lens"></div> <div itemprop="http://schema.org/description" content="The power to search what you see with Google Lens"></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 Lens", "s:description": "Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera.", "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 Lens"></div> <div property="description" content="Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera."></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
माइक्रोडेटा
><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 Lens"></div> <div itemprop="http://schema.org/description" content="Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera."></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", "g:layoutHint": "LayoutColumns1", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Google Lens", "s:description": "Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera.", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Group Selfies", "s:description": "Pixel 3's dual front facing cameras let you take Group Selfies without a selfie stick or someone having to jump out and take the photo. इसके अलावा, आप इस सुविधा की मदद से सेल्फ़ी में बैकग्राउंड को भी आसानी से शामिल कर सकते हैं.", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Digital Wellbeing", "s:description": "Disconnect from your phone when and where you want so you can focus on time with family and friends. ऐप्लिकेशन पर टाइमर सेट करें और सूचनाएं दिखाने वाली सुविधा बंद करें. वाइंड डाउन मोड का इस्तेमाल करके, मोबाइल की स्क्रीन पर ग्रे स्केल चालू करें और चैन की नींद सोएं.", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Google Assistant", "s:description": "If you are planning to travel somewhere, your Google Assistant can help you look up top attractions, search for a flight, track flight prices, and retrieve your boarding pass faster by just talking to your Google Assistant. मनचाही जगह पर पहुंचने के बाद, Google Assistant की मदद से आप रेस्टोरेंट, स्थानीय इवेंट, और आपके होटल के आस-पास घूमने लायक जगह ढूंढ सकते हैं.", "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 Lens"></div> <div property="description" content="Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera."></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="Group Selfies"></div> <div property="description" content="Pixel 3's dual front facing cameras let you take Group Selfies without a selfie stick or someone having to jump out and take the photo. Or, use it to get the background in that selfie without being a bobble head."></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="Disconnect from your phone when and where you want so you can focus on time with family and friends. ऐप्लिकेशन पर टाइमर सेट करें और सूचनाएं दिखाने वाली सुविधा बंद करें. Use wind down mode to turn the screen to gray scale and get ready for a good night's sleep."></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 Assistant"></div> <div property="description" content="If you are planning to travel somewhere, your Google Assistant can help you look up top attractions, search for a flight, track flight prices, and retrieve your boarding pass faster by just talking to your Google Assistant. Then, once you’ve arrived, your Google Assistant can also help you find restaurants, local events, and things to do near your hotel."></div> <div property="image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>
माइक्रोडेटा
<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 Lens"></div> <div itemprop="http://schema.org/description" content="Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera."></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="Group Selfies"></div> <div itemprop="http://schema.org/description" content="Pixel 3's dual front facing cameras let you take Group Selfies without a selfie stick or someone having to jump out and take the photo. Or, use it to get the background in that selfie without being a bobble head."></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="Disconnect from your phone when and where you want so you can focus on time with family and friends. ऐप्लिकेशन पर टाइमर सेट करें और सूचनाएं दिखाने वाली सुविधा बंद करें. Use wind down mode to turn the screen to gray scale and get ready for a good night's sleep."></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 Assistant"></div> <div itemprop="http://schema.org/description" content="If you are planning to travel somewhere, your Google Assistant can help you look up top attractions, search for a flight, track flight prices, and retrieve your boarding pass faster by just talking to your Google Assistant. Then, once you’ve arrived, your Google Assistant can also help you find restaurants, local events, and things to do near your hotel."></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>
माइक्रोडेटा
><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>

तीन शोकेस ब्लॉक: सिंगल फ़ीचर, शोकेस फ़ीचर सेट, और सिंगल बैनर इमेज

कई शोकेस ब्लॉक को मिलाकर, आप अपनी पसंद के मुताबिक लेआउट डिज़ाइन कर सकते हैं.

	तीन शोकेस ब्लॉक सिंगल फ़ीचर वाला एक शोकेस फ़ीचर सेट तीन कॉलम के लेआउट में, छह फ़ीचर वाला शोकेस फ़ीचर सेट सिंगल बैनर इमेज वाली मीडिया गैलरी
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": "Meet the Google Pixel 3", "s:description": "Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more.", "s:image": "http://example.com/pixel3-main-image.png" } ] }, { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns3", "s:headline": "Featuring", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Google Lens", "s:description": "The power to search what you see with Google Lens.", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Group Selfies", "s:description": "The power to not use a selfie stick with Group Selfies.", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Digital Wellbeing", "s:description": "The power to experience the joy of missing out with Digital Wellbeing.", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Google Assistant", "s:description": "The power to ask questions and get things done with The Google Assistant.", "s:image": "http://example.com/pixel3-google-assistant.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Shhh gesture", "s:description": "The power to focus on what matters with Shhh gesture.", "s:image": "http://example.com/pixel3-shhh-gesture.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Call Screen", "s:description": "The power to let Assistant answer calls for you with 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="Meet the Google Pixel 3"></div> <div property="description" content="Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."></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="Featuring"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Google Lens"></div> <div property="description" content="The power to search what you see with Google Lens."></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="Group Selfies"></div> <div property="description" content="The power to not use a selfie stick with Group Selfies."></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="The power to experience the joy of missing out with Digital Wellbeing."></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 Assistant"></div> <div property="description" content="The power to ask questions and get things done with The Google Assistant."></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="Shhh gesture"></div> <div property="description" content="The power to focus on what matters with Shhh gesture."></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="The power to let Assistant answer calls for you with 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>
माइक्रोडेटा
<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="Meet the Google Pixel 3"></div> <div itemprop="http://schema.org/description" content="Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."></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="Featuring"></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 Lens"></div> <div itemprop="http://schema.org/description" content="The power to search what you see with Google Lens."></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="Group Selfies"></div> <div itemprop="http://schema.org/description" content="The power to not use a selfie stick with Group Selfies."></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="The power to experience the joy of missing out with Digital Wellbeing."></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 Assistant"></div> <div itemprop="http://schema.org/description" content="The power to ask questions and get things done with The Google Assistant."></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="Shhh gesture"></div> <div itemprop="http://schema.org/description" content="The power to focus on what matters with Shhh gesture."></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="The power to let Assistant answer calls for you with 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>