结构化数据，json-ld，application/ld+json初学探究

最新推荐文章于 2024-07-31 15:41:38 发布

撑起自己半边天

最新推荐文章于 2024-07-31 15:41:38 发布

阅读量6.1k

点赞数 3

分类专栏：结构化数据文章标签：前端

本文链接：https://blog.csdn.net/weixin_43840289/article/details/115521821

版权

结构化数据专栏收录该内容

1 篇文章 0 订阅

订阅专栏

情境：在做完标签语义化，图片上cdn，js、css文件压缩后的网站在SEO优化之后的一段时间，想得到更好的优化效果！

浏览器：Google

首先了解什么是结构化数据：

概述

结构化数据也称作行数据，是由二维表结构来逻辑表达和实现的数据，严格地遵循数据格式与长度规范，主要通过关系型数据库进行存储和管理。与结构化数据相对的是不适于由数据库二维表来表现的非结构化数据，包括所有格式的办公文档、XML、HTML、各类报表、图片和音频、视频信息等。支持非结构化数据的数据库采用多值字段、了字段和变长字段机制进行数据项的创建和管理，广泛应用于全文检索和各种多媒体信息处理领域。

作用

结构化数据标记，是一种能让网站以更好的姿态展示在搜索结果当中的方式。做了结构化数据标记，便能使网站在搜索结果中良好地展示丰富网页摘要。
搜索引擎都支持标准的结构化数据标记，以便为用户提供更好的上网体验。网页内微数据标记可以帮助搜索引擎理解网页上的信息，能更方便搜索引擎识别分类，判断相关性。
同时结构化微数据可以让搜索引擎提供更丰富的搜索结果摘要展现，也就是为用户的具体查询提供帮助的详细信息，让用户直接在搜索结果中看见你商品的重要信息。例如：商品的价格、名称、库存状况(商品是否有货)、评论者评分和评论等都可以在搜索结果摘要直接看到。
这些丰富网页摘要可帮助用户了解网站与他们的搜索内容是否相关，可以让网页获得更多点击。
如在搜索结果中，部分展示了更多的星级评分、评论条数以及价格等因素，这样无疑增加了网站的专业程度，且提高了客户对网站的信任度，网站良好的曝光度无形中就提高了网站的点击率与转化率。

标记方式

使用HTML代码标记
HTML代码标记的方式主要有3种：微数据、微格式和RDFa。但对于一些外贸站站来说，标记是以微数据为主，少许时候也会用到微格式，视不用的页面类型而定吧。
使用微数据标记
使用微数据标记的话，有两种代码格式:http://data-vocabulary.org/ 和http://schema.org/。由于data-vocabulary标记只支持谷歌搜索，而schema同时支持谷歌、雅虎、Bing等搜索，因而我们不妨称data-vocabulary为旧版标记，schema为新版标记。

主流是使用schema进行标记。但由于页面上有些项(如：面包屑导航), schema并没推出相应的标记代码，从而也得仍旧使用data-vocabulary来标记, 这样的话页面代码上就会出现新旧代码并存的情况，不过这并不妨碍搜索引擎蜘蛛抓取页面内容。

使用数据标注工具的话，可以进行简单的内容标记。支持**9种标记类型**：文章、图书评论、事件、本地商家、电影、产品、餐馆、软件应用和电视续集。操作时你可以自己创建个网页集，针对那个类型页面进行标记，然后谷歌会抓取该类型相关网页的内容，你进行审核修改，修改后没问题的话，就点击确认创建就OK了

了解结构化数据的工作方式

（接入谷歌例子）结构化数据是一种提供网页相关信息并对网页内容进行分类的标准化格式；Google 会利用在网络上找到的结构化数据来了解网页内容并收集有关网络和世界的一般信息。例如，以下 JSON-LD 结构化数据片段可能会显示在食谱网页上，描述了食谱的标题、作者和其他详情：

<html>
  <head>
    <title>Party Coffee Cake</title><!--对应name-->
    <!--数据化结构开始-->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",//这个必须不能改，这个是告诉浏览器这里是结构化数据
      "@type": "Recipe",                //类型根据你需求
      "name": "Party Coffee Cake",      //网站或者文章名称
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>
    <!--数据化结构结束-->
  </head>
  <body>
    <h2>Party coffee cake recipe</h2>
    <p>
      <em>by Mary Stone, 2018-03-10</em><!--对应datePublished-->
    </p>
    <p>
      This coffee cake is awesome and perfect for parties.<!--对应description-->
    </p>
    <p>
      Preparation time: 20 minutes<!--对应prepTime-->
    </p>
  </body>
</html>

在Google文档里面它只会引导你怎样去写一个页面的结构化数据并粘贴到对应页面上去，因此很多人都会有我这种懒人的烦恼（怎样才能一劳永逸呢），在页面不多就说好搞一点，比如首页，联系我们，关于我们这样的页面或者少数产品、新闻详情页等，这可以手写好再粘贴进去；但是当站点和页面一多的时候你就忙不过来了，不可能一个页面一个页面的手写结构化数据粘进去吧？因此我了解到了3中方法：

其一：（GTM）

用GTM自定义变量来填充其中的数据,先来代码，再讲怎么在GTM创建变量，下面我是创建了p_image，p_description，p_name这3个变量，Page URL是默认内置变量，不用创建。

注意：为了成功引用 GTM 变量，变量必须写在双大括号{{}}里面。

<script type="text/javascript">
var WebSiteData ={
  "@context": "https://schema.org",
  "@type": "Product",
  "image":"{{p_image}}",
  "description":"{{p_description}}",
  "url": "{{Page URL}}",
  "name": "{{p_name}}",
  "aggregateRating":{
  "@type":"aggregateRating",
  "ratingValue":"9"
  }
}
var script = document.createElement('script');
  script.type = 'application/ld+json';
  script.text = JSON.stringify(WebSiteData);
  $('head').append(script);
</script>

比如我的变量是获取图片的

下面是自定义变量创建的流程：工作区 >> 变量 >> 用户自定义变量 >> 新建 >> 选择方法（id/css选择器）>> id/css选择器名称 >> 属性（图片属性直接填src，a标签的填href）

在这里插入图片描述

其二：（jq请求文件）

这个对于前端来说是最简单的，这个你可以理解为ajax请求一个文件将其内容显示出来！

<script type="text/javascript">
 fetch('您的api接口')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
</script>

其三：（jq页面数据插入）

这个就基本上实现了初步的一劳永逸，与上面GTM版写法相似，只不过这个比GTM更方便；它不像GTM那样要另外开设变量。

<script type="text/javascript">

     var jsonData={
        "@context": "https://schema.org/",
        "@type": "ItemList",
        "itemListElement": [
        {
            "@type": "ListItem",
            "position": "1",
            "url":$('.xxx a').attr('href'),//获取对应的url链接
            "image":$('.xxx img').attr('src'),//获取对应的image路径
            "name":$('.xxx b').text()//获取对应的文本
        },{
            "@type": "ListItem",
            "position": "2",
            "url":$('.xxx a').attr('href'),
            "image":$('.xxx img').attr('src'),
            "name":$('.xxx b').text()
        }],
        "url":$(location).attr('href'),//获取当前页面链接
        "name":$('.xxx b').text()
     }
     var script = document.createElement('script');
  script.type = 'application/ld+json';
  script.text = JSON.stringify(jsonData);
  $('head').append(script);//在head插入以上结构化数据
</script>

这个做好了发现在单页面比如详情页，关于我们那些就很管用，但是对于列表页就有点难搞了；因为结构化数据里面都是对象数组，有些数据要循环输出的，比如列表页。以下来个进阶版的；

<script type="text/javascript">
     var DemoData={
        "@context": "https://schema.org/",
        "@type": "ItemList",
        "itemListElement": [],
        "url":$(location).attr('href'),//获取当前页面链接
        "name":$('.xxx b').text()
     }
//注意 for循环里面的var i必须是等于1，等于0的话下面nth-child('+i+')=>nth-child(0)这时候这条数据会为空，以及i <= $('.xxx').length;的时候必须也是 <=,如果不是的话会少一条数据。
             for (var i = 1; i <= $('.xxx').length; i++) {
               DemoData["itemListElement"].push({
				            "@type": "ListItem",
				            "position": i,
				            "url":$('.xxx li:nth-child('+i+') a').attr('href'),//获取对应的url链接
				            "image":$('.xxx li:nth-child('+i+') img').attr('src'),//获取对应的img路径
				            "name":$('.xxx li:nth-child('+i+') b').text()//获取对应的文本
				        });
            }
            console.log(DemoData);//打印观察
  var script = document.createElement('script');
  script.type = 'application/ld+json';
  script.text = JSON.stringify(DemoData);
  $('head').append(script);
</script>