Định dạng nội dung đa dạng thức của sản phẩm

Thuộc tính nội dung đa dạng thức của sản phẩm [rich_product_content] cho phép bạn soạn nội dung mô tả đa dạng thức kết hợp giữa văn bản và nội dung nghe nhìn. Nội dung đa dạng thức cho phép bạn làm nổi bật các tính năng đặc biệt của sản phẩm hoặc dịch vụ. Bạn có thể cung cấp nội dung đa dạng thức bằng cách sử dụng các bảng mã khác nhau, bao gồm cả JSON-LD, RDFa và microdata (vi dữ liệu).

Bạn nên sử dụng Công cụ kiểm tra dữ liệu có cấu trúc của Google để thử nghiệm và kiểm tra nhằm đảm bảo nội dung đa dạng thức của mình không chứa lỗi. Bạn có thể thử nghiệm tất cả ví dụ trong bài viết này bằng công cụ kiểm tra.

Bài viết này mô tả cấu trúc dữ liệu cần thiết cho nhiều loại nội dung đa dạng thức.

Lưu ý: API Manufacturer Center nay có hỗ trợ thuộc tính nội dung đa dạng thức của sản phẩm [rich_product_content]. Tìm hiểu cách bắt đầu sử dụng API Manufacturer Center

Cách hoạt động

Nội dung đang dạng thức

Nội dung đang dạng thức bao gồm một chuỗi các khối quảng cáo. Mỗi khối là một bộ tính năng quảng cáo hoặc bộ sưu tập nội dung nghe nhìn. Các khối được hiển thị theo chiều dọc trong một cột duy nhất. Nội dung đa dạng thức được chỉ định bằng một phần tử thuộc loại Showcase.

Loại Showcase mở rộng CollectionPage
Thuộc tính	Loại dự kiến	Mô tả
showcaseBlock	ShowcaseFeatureSet hoặc MediaGallery	Một khối nội dung đa dạng thức. Mỗi khối là một bộ tính năng quảng cáo hoặc bộ sưu tập nội dung nghe nhìn.

Bộ tính năng quảng cáo

Một bộ tính năng quảng cáo bao gồm một tiêu đề không bắt buộc và chuỗi các tính năng quảng cáo. Các bộ tính năng có thể hiển thị trong một hoặc nhiều cột.

Loại ShowcaseFeatureSet mở rộng ItemList
Thuộc tính	Loại dự kiến	Mô tả
layoutHint	Text	Gợi ý không bắt buộc cho biết có bao nhiêu cột dùng để hiển thị. Đầu tiên, các tính năng hiển thị theo hàng rồi sau đó là theo cột. Các giá trị sau được hỗ trợ: > LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4> Gợi ý bố cục được áp dụng tối ưu nhất có thể. Trên màn hình nhỏ, số lượng cột được sử dụng có thể ít hơn số lượng theo yêu cầu.
headline	Text	Tiêu đề tùy chọn, dùng để mô tả bộ tính năng.
itemListElement	ShowcaseFeature	Một tính năng quảng cáo trong bộ tính năng. Đầu tiên, các tính năng được hiển thị theo hàng rồi sau đó là theo cột.

Tính năng quảng cáo

Tính năng quảng cáo bao gồm một tiêu đề, một đoạn mô tả và một hình ảnh không bắt buộc.

Loại ShowcaseFeature mở rộng ListItem
Thuộc tính	Loại dự kiến	Mô tả
layoutHint	Text	Gợi ý không bắt buộc, cho biết vị trí hiển thị hình ảnh liên quan đến tiêu đề và nội dung mô tả. Các giá trị sau được hỗ trợ: LayoutMediaLeft LayoutMediaRight LayoutMediaAbove LayoutMediaBelow Gợi ý bố cục được áp dụng tối ưu nhất có thể. Trên màn hình nhỏ, hình ảnh có thể xuất hiện ở một vị trí khác với yêu cầu.
headline	Text	Tiêu đề của tính năng.
description	Text	Đoạn mô tả tính năng.
image	URL hoặc ImageObject	Hình ảnh không bắt buộc, giúp minh họa tính năng

Bộ sưu tập nội dung nghe nhìn

Một bộ sưu tập nội dung nghe nhìn bao gồm một tiêu đề không bắt buộc và chuỗi các hình ảnh. Hình ảnh hiển thị trong một hoặc nhiều cột.

Loại MediaGallery mở rộng CollectionPage
Thuộc tính	Loại dự kiến	Mô tả
layoutHint	Text	Gợi ý không bắt buộc cho biết có bao nhiêu cột dùng để hiển thị. Đầu tiên, các hình ảnh hiển thị theo hàng rồi sau đó là theo cột. Các giá trị sau được hỗ trợ: LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4 Gợi ý bố cục được áp dụng tối ưu nhất có thể. Trên màn hình nhỏ, số lượng cột được sử dụng có thể ít hơn số lượng theo yêu cầu.
headline	Text	Tiêu đề không bắt buộc, hiển thị ở đầu bộ sưu tập.
image	URL hoặc ImageObject	Hình ảnh hiển thị trong bộ sưu tập.

Lưu ý về vùng chứa tên

Các loại Showcase, ShowcaseFeatureSet, ShowcaseFeature và MediaGallery cùng các thuộc tính showcaseBlock và layoutHint là các phần mở rộng giản đồ được định nghĩa tại http://schema.googleapis.com/. Tất cả các loại và thuộc tính đều được định nghĩa tại http://schema.org/.

Ví dụ

Định dạng nội dung đa dạng thức trống

Nội dung đa dạng thức đơn giản nhất là một nội dung trống. Đây là mức tối thiểu cần thiết để hiển thị một điểm dữ liệu nội dung đa dạng thức.

Nội dung đa dạng thức trống

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 (Vi dữ liệu)

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

Tính năng quảng cáo đơn lẻ có tiêu đề và đoạn mô tả nhưng không có hình ảnh

Dưới đây là ví dụ về nội dung đa dạng thức gồm một tính năng quảng cáo đơn lẻ không có hình ảnh.

	Tính năng quảng cáo đơn lẻ có tiêu đề mô tả
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": "Giới thiệu Google Pixel 3", "s:description": "Chụp ảnh cực chất mọi lúc, hoàn thành công việc nhờ Trợ lý Google, tận hưởng dung lượng pin đủ cho cả ngày và nhiều tính năng tuyệt vời khác." } ] } ] }
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="Giới thiệu Google Pixel 3"></div> <div property="description" content="Chụp ảnh cực chất mọi lúc, hoàn thành công việc nhờ Trợ lý Google, tận hưởng dung lượng pin đủ cho cả ngày và nhiều tính năng tuyệt vời khác."></div> </div> </div> </div>
Microdata (Vi dữ liệu)
><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="Giới thiệu Google Pixel 3"></div> <div itemprop="http://schema.org/description" content="Chụp ảnh cực chất mọi lúc, hoàn thành công việc nhờ Trợ lý Google, tận hưởng dung lượng pin đủ cho cả ngày và nhiều tính năng tuyệt vời khác."></div> </div> </div> </div>

Một tính năng quảng cáo đơn lẻ có tiêu đề, nội dung mô tả và hình ảnh

Bạn có thể thêm một hình ảnh vào tính năng quảng cáo.

	Tính năng quảng cáo đơn lẻ có Tiêu đề Mô tả Hình ảnh
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 Ống kính", "s:description": "Google Ống kính giúp bạn tìm thông tin về mọi thứ mình nhìn thấy", "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 Ống kính"></div> <div property="description" content="Google Ống kính giúp bạn tìm thông tin về mọi thứ mình nhìn thấy"></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
Microdata (Vi dữ liệu)
><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 Ống kính"></div> <div itemprop="http://schema.org/description" content="Google Ống kính giúp bạn tìm thông tin về mọi thứ mình nhìn thấy"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>

Một tính năng quảng cáo đơn lẻ có tiêu đề, nội dung mô tả và hình ảnh sử dụng gợi ý bố cục

Gợi ý bố cục giúp bạn kiểm soát vị trí của hình ảnh trong tính năng quảng cáo.

	Tính năng quảng cáo đơn lẻ có Tiêu đề Mô tả Hình ảnh Bố cục: ảnh nằm ở phía bên trái của các nội dung khác
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 Ống kính", "s:description": "Google Ống kính giúp bạn tìm thông tin về mọi thứ bạn nhìn thấy như quần áo và vật dụng trang trí nhà cửa, sao chép và dịch văn bản, cũng như nhận dạng địa danh, cây cối và động vật – tất cả theo thời gian thực và ngay từ máy ảnh của bạn.", "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 Ống kính"></div> <div property="description" content="Google Ống kính giúp bạn tìm thông tin về mọi thứ bạn nhìn thấy như quần áo và vật dụng trang trí nhà cửa, sao chép và dịch văn bản, cũng như nhận dạng địa danh, cây cối và động vật – tất cả theo thời gian thực và ngay từ máy ảnh của bạn."></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
Microdata (Vi dữ liệu)
><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 Ống kính"></div> <div itemprop="http://schema.org/description" content="Google Ống kính giúp bạn tìm thông tin về mọi thứ bạn nhìn thấy như quần áo và vật dụng trang trí nhà cửa, sao chép và dịch văn bản, cũng như nhận dạng địa danh, cây cối và động vật – tất cả theo thời gian thực và ngay từ máy ảnh của bạn."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>

Bộ tính năng quảng cáo sử dụng gợi ý bố cục để thay đổi bố cục

Gợi ý bố cục có thể giúp bạn tạo bố cục hấp dẫn.

	Một bộ tính năng quảng cáo đơn lẻ gồm Bốn tính năng quảng cáo Nội dung nghe nhìn nằm ở các vị trí xen kẽ nhau tạo nên hình "zig-zag"
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 Ống kính", "s:description": "Google Ống kính giúp bạn tìm thông tin về mọi thứ bạn nhìn thấy như quần áo và vật dụng trang trí nhà cửa, sao chép và dịch văn bản, cũng như nhận dạng địa danh, cây cối và động vật – tất cả theo thời gian thực và ngay từ máy ảnh của bạn.", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Selfie nhóm", "s:description": "Máy ảnh kép mặt trước của Pixel 3 cho phép bạn chụp ảnh selfie nhóm mà không cần gậy chụp ảnh hoặc có người phải đứng ra ngoài để chụp. Hoặc sử dụng máy ảnh này để lấy thêm hậu cảnh cho ảnh tự chụp chân dung mà phần đầu không bị mất cân đối.", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Digital Wellbeing", "s:description": "Ngắt kết nối điện thoại tùy ý mọi lúc mọi nơi để có thể dành thời gian cho gia đình và bạn bè. Đặt hẹn giờ trên các ứng dụng và tắt thông báo hình ảnh. Sử dụng chế độ nghỉ ngơi để chuyển màn hình sang màu xám và sẵn sàng cho một giấc ngủ ngon.", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Trợ lý Google", "s:description": "Nếu đang dự định đi du lịch đến một nơi nào đó, bạn chỉ cần nói chuyện với Trợ lý Google là Trợ lý sẽ có thể giúp bạn tra cứu các điểm tham quan nổi tiếng nhất, tìm chuyến bay, theo dõi giá vé máy bay cũng như giúp bạn lấy thẻ lên máy bay một cách nhanh chóng hơn. Sau đó, khi bạn đã đến nơi, Trợ lý Google còn có thể giúp bạn tìm nhà hàng, sự kiện địa phương và điểm tham quan gần khách sạn.", "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 Ống kính"></div> <div property="description" content="Google Ống kính giúp bạn tìm thông tin về mọi thứ bạn nhìn thấy như quần áo và vật dụng trang trí nhà cửa, sao chép và dịch văn bản, cũng như nhận dạng địa danh, cây cối và động vật – tất cả theo thời gian thực và ngay từ máy ảnh của bạn."></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="Selfie nhóm"></div> <div property="description" content="Máy ảnh kép mặt trước của Pixel 3 cho phép bạn chụp ảnh selfie nhóm mà không cần gậy chụp ảnh hoặc có người phải đứng ra ngoài để chụp. Bạn cũng có thể dùng máy ảnh này để lấy thêm hậu cảnh cho ảnh chân dung tự chụp mà không làm mất cân đối phần đầu."></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="Ngắt kết nối điện thoại tùy ý mọi lúc mọi nơi để có thể dành thời gian cho gia đình và bạn bè. Đặt hẹn giờ trên các ứng dụng và tắt thông báo hình ảnh. Sử dụng chế độ nghỉ ngơi để chuyển màn hình sang màu xám và sẵn sàng cho một giấc ngủ ngon."></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="Trợ lý Google"></div> <div property="description" content="Nếu đang dự định đi du lịch đến một nơi nào đó, bạn chỉ cần nói chuyện với Trợ lý Google là Trợ lý sẽ có thể giúp bạn tra cứu các điểm tham quan nổi tiếng nhất, tìm chuyến bay, theo dõi giá vé máy bay cũng như giúp bạn lấy thẻ lên máy bay một cách nhanh chóng hơn. Sau đó, khi bạn đã đến nơi, Trợ lý Google còn có thể giúp bạn tìm nhà hàng, sự kiện tại địa phương và các điểm tham quan gần khách sạn."></div> <div property="image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>
Microdata (Vi dữ liệu)
<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 Ống kính"></div> <div itemprop="http://schema.org/description" content="Google Ống kính giúp bạn tìm thông tin về mọi thứ bạn nhìn thấy như quần áo và vật dụng trang trí nhà cửa, sao chép và dịch văn bản, cũng như nhận dạng địa danh, cây cối và động vật – tất cả theo thời gian thực và ngay từ máy ảnh của bạn."></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="Selfie nhóm"></div> <div itemprop="http://schema.org/description" content="Máy ảnh kép mặt trước của Pixel 3 cho phép bạn chụp ảnh selfie nhóm mà không cần gậy chụp ảnh hoặc có người phải đứng ra ngoài để chụp. Bạn cũng có thể dùng máy ảnh này để lấy thêm hậu cảnh cho ảnh chân dung tự chụp mà không làm mất cân đối phần đầu."></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="Ngắt kết nối điện thoại tùy ý mọi lúc mọi nơi để có thể dành thời gian cho gia đình và bạn bè. Đặt hẹn giờ trên các ứng dụng và tắt thông báo hình ảnh. Sử dụng chế độ nghỉ ngơi để chuyển màn hình sang màu xám và sẵn sàng cho một giấc ngủ ngon."></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="Trợ lý Google"></div> <div itemprop="http://schema.org/description" content="Nếu đang dự định đi du lịch đến một nơi nào đó, bạn chỉ cần nói chuyện với Trợ lý Google là Trợ lý sẽ có thể giúp bạn tra cứu các điểm tham quan nổi tiếng nhất, tìm chuyến bay, theo dõi giá vé máy bay cũng như giúp bạn lấy thẻ lên máy bay một cách nhanh chóng hơn. Sau đó, khi bạn đã đến nơi, Trợ lý Google còn có thể giúp bạn tìm nhà hàng, sự kiện tại địa phương và các điểm tham quan gần khách sạn."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>

Bộ sưu tập nội dung nghe nhìn: hình ảnh biểu ngữ đơn lẻ

Tương tự, bạn có thể dùng bộ sưu tập hình ảnh để biến hình ảnh thành hình ảnh biểu ngữ.

	Một bộ sưu tập nội dung nghe nhìn gồm Một hình ảnh biểu ngữ đơn lẻ
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 (Vi dữ liệu)
><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>

Ba khối quảng cáo: tính năng đơn lẻ, bộ tính năng quảng cáo, ảnh biểu ngữ đơn lẻ

Bằng cách kết hợp nhiều khối quảng cáo, bạn có thể thiết kế bố cục tùy chỉnh.

	Ba khối quảng cáo gồm Một bộ tính năng quảng cáo có một tính năng đơn lẻ Một bộ tính năng quảng cáo có 6 tính năng trong bố cục 3 cột Một bộ sưu tập nội dung nghe nhìn có một ảnh biểu ngữ đơn lẻ
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": "Giới thiệu Google Pixel 3", "s:description": "Chụp ảnh cực chất mọi lúc, hoàn thành công việc nhờ Trợ lý Google, tận hưởng dung lượng pin đủ cho cả ngày và nhiều tính năng tuyệt vời khác.", "s:image": "http://example.com/pixel3-main-image.png" } ] }, { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns3", "s:headline": "Giới thiệu", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Google Ống kính", "s:description": "Google Ống kính giúp bạn tìm thông tin về mọi thứ mình nhìn thấy.", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Selfie nhóm", "s:description": "Chụp ảnh selfie nhóm mà không cần dùng gậy chụp ảnh.", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Digital Wellbeing", "s:description": "Digital Wellbeing giúp bạn tận hưởng niềm vui khi sống chậm lại một chút.", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Trợ lý Google", "s:description": "Chỉ việc đặt câu hỏi và hoàn thành công việc nhờ Trợ lý Google.", "s:image": "http://example.com/pixel3-google-assistant.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Cử chỉ Suỵt", "s:description": "Cho phép bạn tập trung vào những điều quan trọng chỉ sau cử chỉ Suỵt.", "s:image": "http://example.com/pixel3-shhh-gesture.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Sàng lọc cuộc gọi", "s:description": "Cho phép Trợ lý trả lời cuộc gọi của bạn nhờ tính năng Sàng lọc cuộc gọi.", "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="Giới thiệu Google Pixel 3"></div> <div property="description" content="Chụp ảnh cực chất mọi lúc, hoàn thành công việc nhờ Trợ lý Google, tận hưởng dung lượng pin đủ cho cả ngày và nhiều tính năng tuyệt vời khác."></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="Giới thiệu"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Google Ống kính"></div> <div property="description" content="Google Ống kính giúp bạn tìm thông tin về mọi thứ mình nhìn thấy."></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="Selfie nhóm"></div> <div property="description" content="Chụp ảnh selfie nhóm mà không cần dùng gậy chụp ảnh."></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="Digital Wellbeing giúp bạn tận hưởng niềm vui khi sống chậm lại một chút."></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="Trợ lý Google"></div> <div property="description" content="Chỉ việc đặt câu hỏi và hoàn thành công việc nhờ Trợ lý 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="Cử chỉ Suỵt"></div> <div property="description" content="Cho phép bạn tập trung vào những điều quan trọng chỉ sau cử chỉ Suỵt."></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="Sàng lọc cuộc gọi"></div> <div property="description" content="Cho phép Trợ lý trả lời cuộc gọi của bạn nhờ tính năng Sàng lọc cuộc gọi."></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 (Vi dữ liệu)
<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="Giới thiệu Google Pixel 3"></div> <div itemprop="http://schema.org/description" content="Chụp ảnh cực chất mọi lúc, hoàn thành công việc nhờ Trợ lý Google, tận hưởng dung lượng pin đủ cho cả ngày và nhiều tính năng tuyệt vời khác."></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="Giới thiệu"></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 Ống kính"></div> <div itemprop="http://schema.org/description" content="Google Ống kính giúp bạn tìm thông tin về mọi thứ mình nhìn thấy."></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="Selfie nhóm"></div> <div itemprop="http://schema.org/description" content="Chụp ảnh selfie nhóm mà không cần dùng gậy chụp ảnh."></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="Digital Wellbeing giúp bạn tận hưởng niềm vui khi sống chậm lại một chút."></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="Trợ lý Google"></div> <div itemprop="http://schema.org/description" content="Chỉ việc đặt câu hỏi và hoàn thành công việc nhờ Trợ lý 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="Cử chỉ Suỵt"></div> <div itemprop="http://schema.org/description" content="Cho phép bạn tập trung vào những điều quan trọng chỉ sau cử chỉ Suỵt."></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="Sàng lọc cuộc gọi"></div> <div itemprop="http://schema.org/description" content="Cho phép Trợ lý trả lời cuộc gọi của bạn nhờ tính năng Sàng lọc cuộc gọi."></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>