怎么做谷歌的“结构化数据”?

670 阅读3分钟

为什么想着写谷歌结构化数据呢,

因为遇到了,公司要求,网站必须做amp+结构化数据,

没办法,只能研究

这是谷歌结构化数据官网的地址,但需要FQ才能访问,developers.google.com/search/docs…

写结构化数据呢,其实也没什么难点,只是之前没接触过,所以有些陌生,不熟练

所以我整理了以下文档,也是做一下笔记

第一,需要做结构化的页面

为什么这么说呢,因为有一些页面是不需要做数据结构化的,官网有明确说明,

这里说明一下(面包屑的结构化数据也是挺重要的),每个页面都有面包屑,而面包屑导航也是可以做结构化数据的,而在符合结构化数据的标准里面是把路径一栏单独拎出来的,可见面包屑结构化数据的重要性 (search.google.com/test/rich-r…

为什么说面包屑导航这么重要呢,因为网页上的面包屑导航路径指明了网页在网站层次结构中的位置,有助于用户有效地了解和探索网站。用户可从面包屑导航路径中的最低层级开始,一次一个层级地导航到网站层次结构中的最高层级。

而我们做结构化,基本上是做几个主要页面(当然其他页面也是可以做的)

1:商品详情页面

2:文章详情页面(也可以说博客,或者新闻页面)    

为什么说,主要做这几个页面呢,因为80%商城网站都会有这两个页面, 其实官网有提供很多其他页面的例子,但我没用到...哈哈

这些都是谷歌官网提供的,有想了解更多的,可以去看看,

好了说了这么多,但具体怎么做呢,官网有提高(三种)写法,不过呢,有的页面是没有例子的,就比如,文章详情就只有一种写法的例子,具体哪三种方法,如下:

第一种:JSON-LD

复制代码

 <html>
  <head>
    <title>Executive Anvil</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
 "@type": "Product",     //这个是最重要的,告诉这个页面是什么页面(产品页面就是 product)
      "name": "Executive Anvil",    //产品名称
      "image": [    // 产品详情图片(是数组,可以存在多张图片)
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",     //产品详情
      "sku": "0446310786",   //产品sku
      "mpn": "925872",    //这个是全局的一个属性,可以加,也可以不加
      "brand": {    //商品的品牌
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {    //商品的评价
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {    //评论列表
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {    //优惠的商品
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

复制代码

很简单,就像一段json数据一样,把所有的属性加到对应的键值对里面去,每个属性对应一块内容,就比如说name,就是产品的名称,image,就是产品图片.

 第二种 RDFa

 <html>
  <head>
    <title>Executive Anvil</title>
  </head>
  <body>
    <div typeof="schema:Product">
        <div rel="schema:review">
          <div typeof="schema:Review">
            <div rel="schema:reviewRating">
              <div typeof="schema:Rating">
                <div property="schema:ratingValue" content="4"></div>
                <div property="schema:bestRating" content="5"></div>
              </div>
            </div>
            <div rel="schema:author">
              <div typeof="schema:Person">
                <div property="schema:name" content="Fred Benson"></div>
              </div>
            </div>
          </div>
        </div>
        <div rel="schema:image" resource="https://example.com/photos/4x3/photo.jpg"></div>
        <div property="schema:mpn" content="925872"></div>
        <div property="schema:name" content="Executive Anvil"></div>
        <div property="schema:description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height."></div>
        <div rel="schema:image" resource="https://example.com/photos/1x1/photo.jpg"></div>
        <div rel="schema:brand">
          <div typeof="schema:Brand">
            <div property="schema:name" content="ACME"></div>
          </div>
        </div>
        <div rel="schema:aggregateRating">
          <div typeof="schema:AggregateRating">
            <div property="schema:reviewCount" content="89"></div>
            <div property="schema:ratingValue" content="4.4"></div>
          </div>
        </div>
        <div rel="schema:offers">
          <div typeof="schema:Offer">
            <div property="schema:price" content="119.99"></div>
            <div property="schema:availability" content="https://schema.org/InStock"></div>
            <div property="schema:priceCurrency" content="USD"></div>
            <div property="schema:priceValidUntil" datatype="xsd:date" content="2020-11-20"></div>
            <div rel="schema:url" resource="https://example.com/anvil"></div>
            <div property="schema:itemCondition" content="https://schema.org/UsedCondition"></div>
          </div>
        </div>
        <div rel="schema:image" resource="https://example.com/photos/16x9/photo.jpg"></div>
        <div property="schema:sku" content="0446310786"></div>
      </div>
  </body>
</html>

第二种有点看不懂,他这个意思,可能就是在标签里面加

第三种,微数据(推荐)我用的就是这种,感觉这种用起来简单一些,当然第一种也不错

<html>
  <head>
    <title>Nice trinket</title>
  </head>
  <body>
  <div>
    <div itemtype="https://schema.org/Product" itemscope>
      <meta itemprop="sku" content="trinket-12345" />
      <meta itemprop="gtin14" content="12345678901234" />
      <meta itemprop="name" content="Nice trinket" />
      <link itemprop="image" href="https://example.com/photos/16x9/trinket.jpg" />
      <link itemprop="image" href="https://example.com/photos/4x3/trinket.jpg" />
      <link itemprop="image" href="https://example.com/photos/1x1/trinket.jpg" />
      <meta itemprop="description" content="Trinket with clean lines" />
      <div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
        <meta itemprop="name" content="MyBrand" />
      </div>
      <div itemprop="offers" itemtype="https://schema.org/Offer" itemscope>
        <link itemprop="url" href="http://www.example.com/trinket_offer" />
        <meta itemprop="itemCondition" content="https://schema.org/NewCondition" />
        <meta itemprop="availability" content="https://schema.org/InStock" />
        <meta itemprop="price" content="39.99" />
        <meta itemprop="priceCurrency" content="USD" />
        <meta itemprop="priceValidUntil" content="2020-11-20" />
        <div itemprop="shippingDetails" itemtype="https://schema.org/OfferShippingDetails" itemscope>
          <div itemprop="shippingRate" itemtype="https://schema.org/MonetaryAmount" itemscope>
            <meta itemprop="value" content="3.49" />
            <meta itemprop="currency" content="USD" />
          </div>
          <div itemprop="shippingDestination" itemtype="https://schema.org/DefinedRegion" itemscope>
            <meta itemprop="addressCountry" content="US" />
            <div itemprop="postalCodeRange" itemtype="https://schema.org/PostalCodeRangeSpecification" itemscope>
              <meta itemprop="postalCodeBegin" content="98100" />
              <meta itemprop="postalCodeEnd" content="98199" />
            </div>
          </div>
          <div itemprop="deliveryTime" itemtype="https://schema.org/ShippingDeliveryTime" itemscope>
            <div itemprop="handlingTime" itemtype="https://schema.org/QuantitativeValue" itemscope>
              <meta itemprop="minValue" content="0" />
              <meta itemprop="maxValue" content="1" />
            </div>
            <div itemprop="transitTime" itemtype="https://schema.org/QuantitativeValue" itemscope>
              <meta itemprop="minValue" content="1" />
              <meta itemprop="maxValue" content="5" />
            </div>
            <meta itemprop="cutOffTime" content="19:30-08:00" />
            <div itemprop="businessDays" itemtype="https://schema.org/OpeningHoursSpecification" itemscope>
              <meta itemprop="dayOfWeek" content="https://schema.org/Monday" />
              <meta itemprop="dayOfWeek" content="https://schema.org/Tuesday" />
              <meta itemprop="dayOfWeek" content="https://schema.org/Wednesday" />
              <meta itemprop="dayOfWeek" content="https://schema.org/Thursday" />
            </div>
          </div>
        </div>
      </div>
      <div itemprop="review" itemtype="https://schema.org/Review" itemscope>
        <div itemprop="author" itemtype="https://schema.org/Person" itemscope>
          <meta itemprop="name" content="Fred Benson" />
        </div>
        <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
          <meta itemprop="ratingValue" content="4" />
          <meta itemprop="bestRating" content="5" />
        </div>
      </div>
      <div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
        <meta itemprop="reviewCount" content="89" />
        <meta itemprop="ratingValue" content="4.4" />
      </div>
    </div>
  </div>
  </body>
</html>

这个就简单多了,比如说  <h1 class="pro_de_h1" itemprop="name">产品名称</h1>

这个h1标签套的是产品名称,就加一个微数据 itemprop=“name”

其他的比如说产品图片啊,sku,详情就在所在的标签里面加微数据就可以了

我们现在做的所有的东西都是给浏览器看的,是利于排名的,这也是结构化数据的用处,只不过这只独有于谷歌。

以上就是所有结构化数据的内容,(我只举例了一个产品详情的例子,还有很多没有说出来,大家可以去看看官网)

 

第二,怎么查看做的结构化数据页面是否符合谷歌的标准

这里就得推荐第二个网站了  search.google.com/test/rich-r…

 

我这里发一下,测试符合结构化数据的标准

  黄色是警告,可以有,但一定不能有红色的报错,

结构化的数据,如下

这些就是我们填写的结构化数据,

那么结构化数据,有什么用呢

这个就是你使用结构化数据后,在谷歌中搜索出来的浏览效果。

而这整件事我们面向的都是浏览器,而不是用户。

这些是我研究官网总结出来的,也算是笔记吧,不喜勿喷。