seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码

时间:2022-04-30 18:39:13

seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码

网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结构化数据则提供了更多丰富选项,如内容评分。

什么是结构化数据(微数据)?
谷歌的微数据是根据你的html代码来标注的,如果你代码写得规范,会有很多意想不到的收获。
丰富网页摘要(微数据、微格式、RDFa 和数据标注工具)
摘要是指每条搜索结果下方显示的几行文字,旨在让用户大体了解网页上的内容,以及与用户的搜索查询有何关联。

如果 Google 了解您网页上的内容,就可以创建丰富网页摘要,也就是为用户的具体查询提供帮助的详细信息。
例如,针对餐馆的摘要可能会显示平均评分和价格范围;
针对食谱 网页的摘要可能会显示总的准备时间、照片以及对食谱的评分;
而针对音乐专辑的摘要可能会列出各首歌曲以及播放链接。
这些丰富网页摘要可帮助用户了解您的网 站与他们的搜索内容是否相关,并可能让您的网页获得更多点击次数。

通过结构化数据可以让搜索引擎更直接有效地了解和展示网页的重要信息,如内容评分。
结构化数据方法有多种,如微数据,如微格式,如RDFa,等等。
具体规范参考 HTML5 微数据规范,更多项目推荐使用 schema.org 来标记,因为 schema.org 的词汇 Google、Microsoft 和 Yahoo! 都能理解。

文章页内容:WebPage - schema.org
http://schema.org/WebPage
Example 1

<body itemscope="" itemtype="http://schema.org/WebPage">
<h1 itemprop="name">Lecture 12: Graphs, networks, incidence matrices</h1>
<p itemprop="description">These video lectures of Professor Gilbert
Strang teaching 18.06 were recorded in Fall 1999 and do not
correspond precisely to the current edition of the textbook.</p>
<div itemprop="publisher" itemscope="" itemtype="http://schema.org/CollegeOrUniversity">
<h4 class="footer">About <span itemprop="name">MIT OpenCourseWare</span></h4>
</div>
<a itemprop="license"
rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/deed.en_US"><img
src="/images/cc_by-nc-sa.png" alt="Creative Commons logo with terms BY-NC-SA." /></a>
</body>

Example 2

<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
<a href="category/books.html">Books</a> >
<a href="category/books-literature.html">Literature & Fiction</a> >
<a href="category/books-classics">Classics</a>
</div>
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Book">
<img itemprop="image" src="catcher-in-the-rye-book-cover.jpg"
alt="cover art: red horse, city in background"/>
<span itemprop="name">The Catcher in the Rye</span> -
<link itemprop="bookFormat" href="http://schema.org/Paperback">Mass Market Paperback
by <a itemprop="author" href="/author/jd_salinger.html">J.D. Salinger</a>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4</span> stars -
<span itemprop="reviewCount">3077</span> reviews
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: $<span itemprop="price">6.99</span>
<meta itemprop="priceCurrency" content="USD" />
<link itemprop="availability" href="http://schema.org/InStock">In Stock
</div>
Product details
<span itemprop="numberOfPages">224</span> pages
Publisher: <span itemprop="publisher">Little, Brown, and Company</span> -
<meta itemprop="datePublished" content="1991-05-01">May 1, 1991
Language: <span itemprop="inLanguage">English</span>
ISBN-10: <span itemprop="isbn">0316769487</span>
Reviews:
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="reviewRating">5</span> stars -
<b>"<span itemprop="name">A masterpiece of literature</span>"</b>
by <span itemprop="author">John Doe</span>,
Written on <meta itemprop="datePublished" content="2006-05-04">May 4, 2006
<span itemprop="reviewBody">I really enjoyed this book. It captures the essential
challenge people face as they try make sense of their lives and grow to adulthood.</span>
</div>
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="reviewRating">4</span> stars -
<b>"<span itemprop="name">A good read.</span>" </b>
by <span itemprop="author">Bob Smith</span>,
Written on <meta itemprop="datePublished" content="2006-06-15">June 15, 2006
<span itemprop="reviewBody">Catcher in the Rye is a fun book. It's a good book to read.</span>
</div>
</div>
...
</body>

--------------------------------
食谱:Recipe - schema.org
http://schema.org/Recipe

<div itemscope itemtype="http://schema.org/Recipe">
<span itemprop="name">Mom's World Famous Banana Bread</span>
By <span itemprop="author">John Smith</span>,
<meta itemprop="datePublished" content="2009-05-08">May 8, 2009
<img itemprop="image" src="bananabread.jpg"
alt="Banana bread on a plate" />
<span itemprop="description">This classic banana bread recipe comes
from my mom -- the walnuts add a nice texture and flavor to the banana
bread.</span>
Prep Time: <meta itemprop="prepTime" content="PT15M">15 minutes
Cook time: <meta itemprop="cookTime" content="PT1H">1 hour
Yield: <span itemprop="recipeYield">1 loaf</span>
Tags: <link itemprop="suitableForDiet" href="http://schema.org/LowFatDiet" />Low fat
<div itemprop="nutrition"
itemscope itemtype="http://schema.org/NutritionInformation">
Nutrition facts:
<span itemprop="calories">240 calories</span>,
<span itemprop="fatContent">9 grams fat</span>
</div>
Ingredients:
- <span itemprop="recipeIngredient">3 or 4 ripe bananas, smashed</span>
- <span itemprop="recipeIngredient">1 egg</span>
- <span itemprop="recipeIngredient">3/4 cup of sugar</span>
...
Instructions:
<span itemprop="recipeInstructions">
Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add
the flour last. Pour the mixture into a loaf pan and bake for one hour.
</span>
140 comments:
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction" />
<meta itemprop="userInteractionCount" content="140" />
</div>
From Janel, May 5 -- thank you, great recipe!
...
</div>

--------------------------------
评论内容:Review - schema.org
http://schema.org/Review

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Kenmore White 17" Microwave</span>
<img itemprop="image" src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
Rated <span itemprop="ratingValue">3.5</span>/5
based on <span itemprop="reviewCount">11</span> customer reviews
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<!--price is 1000, a number, with locale-specific thousands separator
and decimal mark, and the $ character is marked up with the
machine-readable code "USD" -->
<span itemprop="priceCurrency" content="USD">$</span><span
itemprop="price" content="1000.00">1,000.00</span>
<link itemprop="availability" href="http://schema.org/InStock" />In stock
</div>
Product description:
<span itemprop="description">0.7 cubic feet countertop microwave.
Has six preset cooking categories and convenience features like
Add-A-Minute and Child Lock.</span>
Customer reviews:
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">Ellie</span>,
<meta itemprop="datePublished" content="2011-04-01">April 1, 2011
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "1">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">The lamp burned out and now I have to replace
it. </span>
</div>
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Value purchase</span> -
by <span itemprop="author">Lucas</span>,
<meta itemprop="datePublished" content="2011-03-25">March 25, 2011
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "1"/>
<span itemprop="ratingValue">4</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">Great microwave for the price. It is small and
fits in my apartment.</span>
</div>
...
</div>

在百度使用结构化数据,你需要按既定格式专门提交一个 sitemap 来展示,而且需要权限,同时也还是处于邀请加入阶段。不过对于 WordPress 和 Discuz 都有结构化数据插件,虽然只是基础的博客内容和论坛数据,倒也可以试试看。

------------------------------

google rich-snippets 关于丰富网页摘要和结构化数据

提供丰富网页摘要的三个步骤:
1. 选择标记格式。
Google 推荐使用微数据,不过也接受以下三种格式。您无需事先了解这些格式,只要了解 HTML 基础知识即可。您可参考结构化数据标记帮助文档了解如何将微数据添加到自己的网站。
微数据(推荐)
微格式
RDFa

2. 标记您的内容。
对于以下内容类型,Google 支持丰富网页摘要:
评价
人物
商品
商家和组织
食谱
活动
音乐

Google 还可识别视频内容的标记,并用它来改进搜索结果。

3. 测试您的标记。
使用结构化数据测试工具确保 Google 可以读取和提取您的标记数据。

在您添加并测试了丰富网页摘要标记后,Google 在下次抓取您的网站时就会发现该标记。需要注意的几点:
丰富网页摘要可能过一段时间才会显示在搜索结果或地方信息页中。
如果无法找到您网站的丰富网页摘要,请查看可能导致该情况的原因。
对您的数据标记丰富网页摘要并不会影响您的网页在搜索结果中的排名,而且 Google 也不保证一定会使用您的标记。

除了向您的所有网页添加 HTML 标记外,您还可以使用数据标注工具帮助 Google 了解您网页的内容。数据标注工具是网站站长工具的一种,用于向 Google 说明您网站上结构化数据的格式。您只需借助鼠标即可使用数据标注工具标记您网站上的数据字段。然后,Google 便会在搜索结果以及 Google 知识图等其他产品中,以更加醒目的全新方式呈现您的数据。
哪种方法适合您?
HTML 标记的适用情况...
您希望明确掌握 Google 如何了解您网站上的活动、食谱或其他类型的数据。
您可以持续为所有数据项添加 HTML 标记。
您的网站结构变动频繁。
您希望除 Google 外的其他搜索引擎能了解您网站上内容(数据荧光笔提取的数据仅适用于 Google)。

数据标注工具的适用情况...
您的网站会显示有关活动的数据。
您正在考虑为自己的网站采用结构化数据和丰富网页摘要,但还没准备好投入资源以更新 HTML 标记。
您更希望在网页上点击标注,而不是编写 HTML 标记。
您无法更改网站上的 HTML 标记或无法持续标记数据项。

要使用数据标注工具,请参见关于数据标注工具。

请注意:
数据标注工具不会向 Google 说明已包含用于指定数据结构的 HTML 标记的网页。即使网站上的部分网页已经包含 HTML 标记,您也仍然可以针对其使用数据标注工具,但是该工具只会向 Google 说明不包含标记的网页。

关于微数据 HTML5 微数据规范是标记内容的一种方式,用于描述特定的信息类型,例如评论、人物信息或活动。每种信息都描述特定类型的项,例如人物、活动或评论。例如,活动可以包含 venue、starting time、name 和 category 属性。

微数据使用 HTML 标记(常为 <span> 或 <div>)中的简单属性为项和属性指定简要的描述性名称。