Google Search Central (Google搜索支持的结构化数据标记)SEO开发设置

Google会根据结构化数据了解网页上的椰蓉，从而优化SEO排名。搜索引擎优化 (SEO) 是提高网站网页在搜索引擎上的曝光度以吸引更多相关流量的过程。

应用场景

海外独立站
新闻网站
所有需要SEO排名的网站基本都试用
当然众多关于SEO的方法这只是其中一点，合理优化添加Google结构化标记搜索会增加你网站的搜索排名

添加结构化数据前配置准备

关于移动网站和优先将移动版网站编入索引的最佳实践

Google 主要使用通过智能手机代理抓取的移动版网站内容进行索引编制和排名。这称为优先将移动版网站编入索引。

注意：如果您的网站pc和wap端是两个路由且两套代码的话，设置移动端优先的话需要在pc端的<head>里面添加 <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">。如果验证结构化数据(智慧型手机)搜索不到时，可以检查一下是否是这段代码指向的移动端链接错误。

创建适合移动端设备的网站

自适应：通过相同的网址提供相同的HTML代码，不考虑所有设备，但可以根据屏幕大小以不同的方式呈现。建议采用自适应设计，因为这是最容易实现和维护的设计模式。
动态提供内容：无论用户使用蓝牙设备，都使用相同的网址。配置依赖于user-agent嗅探和Vary: user-agentHTTP这种响应标头来向不同的设备提供不同版本的HTML。

单独的网址：利用单独的网址指向不同设备，主要区分wap和pc。与动态提供内容相同，这种配置依赖user-agent和VaryHTTP 标头将用户重定向到适合设备的相应网站版本。

// pc端代码示例
/* 此示例中，桌面版网站网址为https://example.com/。 */
<link rel="canonical" href="https://example.com/">
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">
<link rel="alternate" hreflang="es" href="https://example.com/es/">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="th" href="https://example.com/th/">

// wap端代码示例
/* 此示例中，移动版网站网址为https://m.example.com/。 */
<link rel="canonical" href="https://example.com/">
<link rel="alternate" hreflang="es" href="https://m.example.com/es/">
<link rel="alternate" hreflang="fr" href="https://m.example.com/fr/">
<link rel="alternate" hreflang="de" href="https://m.example.com/de/">
<link rel="alternate" hreflang="th" href="https://m.example.com/th/">

确保Google能访问并呈现您的内容

在移动版网站和桌面版网站上使用相同的robots meta标记。 如果您在移动版网站上使用不同的robots meta标记（尤其是noindex或nofollow标记），那么您的网站启用“优先将移动版网站编入索引”机制后，Google 可能无法抓取您的网页将其编入索引。
不要依赖用户交互来延迟加载主要内容。Google 不会加载需要用户交互（例如滑动、点击或输入）才能加载的内容。确保 Google 能够看到延迟加载的内容。
允许Google抓取您的资源。某些资源在移动版网站上的网址相反在桌面版网站上的网址。如果您想让Google抓取您的网址，请确保您没有使用规则引人注目相应disallow网址。

确定桌面版网站和移动版网站具有相同的内容

确保移动版网站所含内容与桌面版网站所含内容相同。
在移动版网站上使用与桌面版网站相同的明确且有意义的标题。

添加架构化数据

对应官方文档

定义结构化数据的类型

关于结构化数据和JSON-LD
结构化数据提供一种标准化页面信息并对页面内容进行分类的方法。JSON-LD 用于采用简单的面向JavaScript的对象表示法的数据，是Google结构化数据的首选格式。JSON-LD 应该位于页面或页面的 <script>元素内。<head> <body>

提示： JSON-LD区分大小写。确保使用与示例相同的外壳

定义结构化数据的类型，步骤如下：

在 index.html，创建<script>类型设置为application/ld+json页面中的<head>中的元素。
```
<head>
    <script type="application/ls+json">
    </script>
</head>
```

在元素内部，通过设置来<script>告诉Google您正在使用schema.org结构化数据。@context``http://schem

<head>
    <script type="application/ls+json">
    {
        "@context": "http://schema.org/"            // 固定格式
    }
    </script>
</head>

告诉Google您正在描述什么的类型内容。

<head>
    <script type="application/ls+json">
    {
        "@context": "http://schema.org/",            // 固定格式
        "@type": "NewsArticle",                      // 根据网站实际情况填写类型，如Product等
    }
    </script>
</head>

官方示例，根据实际选择自己需要的内容。

<html>
<head>
...
<script type="application/ld+json">
  {
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Party Coffee Cake",
  "image": "https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg",
  "author": {
    "@type": "Person",
    "name": "Mary Stone"
  },
  "datePublished": "2018-03-10",
  "description": "This coffee cake is awesome and perfect for parties."
  ......
}
</script>
</head>
</html>

vue中使用标记

<script>
    methods: {
        creatLdJson(obj, _url) {
          let _metaKeyword = obj.metaKeyword.split(",");
          const jsonLdData = {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            name: "橙新闻",
            description: obj.description,
            url: _url,
            keywords: _metaKeyword,
            mainEntityOfPage: _url,
            datePublished: obj.releaseDate,
            headline: obj.title,
            image: {
              "@type": "ImageObject",
              url: obj.typeImg,
            },
            author: {
              "@type": "Person",
              name: obj.author,
              url: "https://www.orangenews.hk/",
            },
            publisher: {
              "@type": "Organization",
              name: "橙新聞-OrangeNews.hk",
              url: "https://www.orangenews.hk/",
              logo: {
                "@type": "ImageObject",
                width: 210,
                height: 90,
                url: "https://www.orangenews.hk/static/orange/img/logo.png",
              },
            },
          };
          const script = document.createElement("script");
          script.type = "application/ld+json";
          script.innerText = JSON.stringify(jsonLdData);
          document.head.appendChild(script);
        },
    }
</script>

验证结构化数据

输入您的网址验证，注意切换切换一下检查工具，看看是否都能够搜索到。

搜索到说明结构化数据添加成功

验证失败错误排查

错误类型，检查工具选择桌机时可以搜索到，选择智慧手机时搜索不到。可以参考优先支援手机端策略检查。
检查数据配置：
- 确定移动版网站和桌面版网站包含相同的格式化数据。 如果您需要确定应向移动版网站优先添加哪些类型的格式化数据，请从Breadcrumb、Product以及VideoObject格式化开始数据。
- 在重构数据中使用正确的网址。确保将移动版网站上的重构数据中的网址更新为移动版网址（如有测试环境注意链接是否正确，测试环境是否配置结构化数据）。
- 如果您使用了数据标注工具，请在移动版网站上训练它。如果您使用数据标注工具提供填写数据，请定期在数据标注工具信息中心检查是否存在填写错误。
确保网站两个版本的元数据相同
- 确保在网站的两个版本上使用相同的title元素和元描述。
网页上noindex标记：导致问题的原因：noindex标记禁止将某些移动版本网页编入索引。

解决问题：在移动版网站和桌面版网站上使用相同的robots meta标记。不要在移动版网页上使用noindex标记（否则，当您的网站启用“优先将移动版网站编入索引”后，Google 无法将您的网页编入索引）。
其它参考官方文档排错

开发总结

关于Google Search Central 结构化数据标记的文档不是很多，只有参考官网设置，需要认真学习读细。
添加元标记很简单，难点在于添加完后搜索不出来时bug的排查，我们的网站因为pc和wap端是两个网址分开的，再添加完结构化标记后验证结构化数据就始终智慧型手机搜索不到，而使用桌机搜索时可以搜索到。查看了文档和示例代码时没有注意到**移动端优先编入索引**，然后就将wap端的代码加入结构化数据标记并部署。
然而部署后检查还是搜索不到，就很纳闷。
直到看到需要在pc端添加指定wap链接的link才反应过来，加上link标签并规范化在两端写好对应的网址，就可以完美的搜索到。
在数据标记的时候尽量简单明了，不要有重复的数据出现，页面没有的信息不要出现。
每个页面的标题尽量不要相同，如果必须相同，那么请将描述(description)区分开，不要一致，否则影响搜索排名。