avatar
JiPai Store

为你的网站添加富媒体搜索结果

今天在给网站配置 Open Graph 的时候，意外发现原来谷歌还有一套自己的富媒体数据申明，那些经常出现在搜索结果里的文章、商家页面、增强视频甚至连品牌信息（搜索列表右侧那个）等等都是用这个方式做到的，之前还以为是谷歌特地为他们去做适配来着。 那么，本文教你如何为你的网站也添加富媒体结构数据，顺便水一篇文章。

准备工具

  1. https://search.google.com/test/rich-results?hl=zh-cn
  2. https://developers.google.com/search/docs/appearance?hl=zh-cn
  3. https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=zh-cn

其实看完上面三个地址你就不需要再看下面的了。

那么开始！

首先是结构体的定义，因为需要的太多，所以就不像Open Graph那样是用 meta 来声明的，直接上了一段Json，这里直接给出官方的demo，需要注意的是，这里的demo用的是 Article 对象的声明，我猜大部分读者如果有需要，那么多半是因为博客 :)

如果你需要别的类型的结构体，可以拉到👇下面看官方文档目录。

{
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Title of a News Article",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author":[
    {
      "@type": "Person",
      "name": "Willow Lane",
      "jobTitle": "Journalist",
      "url":"https://www.example.com/staff/willow-lane"
    },
    {
      "@type":"Person",
      "name": "Echidna Jones",
      "jobTitle": "Editor in Chief",
      "url":"https://www.example.com/staff/echidna-jones"
    }
  ],
"publisher":
  {
    "name": "The Daily Bug",
    "url": "https://www.example.com"
  },
    }

如果你的网站是可以手动编辑模版的类型，将结构数据放在<head> 中即可。

<html>
  <head>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Title of a News Article",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "https://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "https://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

而对于像 Next.js这样的现代前端框架而言，请在 Head 组件中添加以下代码，请注意无需使用Next的Script组件，因为这只是单纯的数据，不需要Script组件进行优化，也不会阻塞页面的渲染。（而且你真用了会报错的）。

const structuredData= {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Title of a News Article",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "https://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "https://example.com/profile/johndoe123"
      }]
    }

return (<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(structuredData),
}}
/>
</Head>)

这样就完成了对页面富媒体搜索结果的配置，还有一点值得注意的是，你可以在单个页面上配置多个结构体申明，有多少个申明就写多少个 <script/> 即可。

我想要别的类型

没问题！谷歌目前一共支持这些类型的结构体：

找到你感兴趣的结构体，复制他们的JSON demo，放到自己网站上根据页面内容改改就行。

验证

使用官方的这一工具 https://search.google.com/test/rich-results?hl=zh-cn 你可以轻松地验证你写的结构体是否有效，尤其是某些类型的结构体中某些字段是必填的。

或者偷懒一点，直接将网站部署上线，再将url喂给 search-console 要求更新收录，等一天去看看 菜单中的-> 增强功能-> 活动 页面怎么说。 比如我在一天后就收到了如下报告：

怎么就一个搜索收录啊

总结

就是这样，快去为你的博客也加上搜索增强声明吧！