让您的网站在 Facebook、Twitter 和 LinkedIn 上可共享

作为一名开发者，当你意识到自己投入了大量时间开发的应用，却没有获得预期的流量时，这绝对是一种令人畏惧的感觉。其实，只要有一点 SEO 方面的帮助，并合理设计你的 HTML，情况就不会如此。在上一篇文章中，我重点介绍了一些唾手可得的 SEO 成果。在这篇文章中，我将介绍一些可以立即添加到 HTML 中的快捷标签，它们可以让页面链接更美观、更易于访问。

开放图谱

Facebook 的团队提出了所谓的“开放图谱协议”（感兴趣可以阅读这里）。它能让你的网站在不同社交媒体平台上拥有一个可共享的版本。你可以轻松指定在状态更新中发布链接时 Facebook 和公司会添加的标题、描述、基本 URL 和缩略图。

自定义这些标签非常重要，因为领英、Facebook 或 Twitter 页面上的空白图片会让您显得不专业，从而降低您的合法性。我们在这里要么合法，要么退出。

令人高兴的是，我将在下面展示的开放图元标记将从您将使用的不同社交媒体平台中延续下来。

基础知识

您必须使用的开放图谱元标签包括标题、描述、类型、网址和图片标签。如果您使用的是像 React 这样的前端框架，则需要查找组件被注入到的 index.html 文件。您需要插入的标签如下所示：

<meta property="og:title" content="[...Title]" /> 
<meta property="og:description" content="[...Description goes here]"/>
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="[...website_url]" />
<meta property="og:image" content="[...website_domain]/[...image_path]" />

标题和描述

标题和描述标签相当简单。如果你想在你的网站上分享博客内容，那么使用这些标签可能会与基本的标题和描述有所不同。

类型

type 标签仅用于指定这是什么类型的对象，在我们的 React App 或网站中，我们需要的是

<meta property="og:type" content="website" />

但你可以想象，这可以用来指定这是否是视频、音频等。开放图形类型的完整列表可以在这里找到。

网址

URL 标签看似简单，但重要的是要知道它应该被称为“规范 URL”。这意味着，您可以将包含相似或相关内容的页面指定到一个最高 URL 下。规范 URL 的用例是，当您的博客文章内容相同，但 URL 不同时。或者，如果您有一些查询内容列表的页面（例如电商页面），通常也需要提供规范 URL。这样做只是为了让 Google 和开放图谱（Open Graph）知道某些页面是相同的。多个 URL 上的相似内容会浪费搜索引擎的时间。

图像

这个标签给我带来了最多的问题，因为你必须为图像的位置指定一个 href。

这是 Facebook 如何解压我的一个作品集项目的示例。我提供的代码如下：

<meta property='og:title' content="Beat Poems | Machine Poetry"/>
        <meta property='og:image' content="https://christianmkastner.com/beat-poems/src/assets/thumbnail.png"/>
        <meta property='og:description' content="Beat Poems makes your poems a little less ordinary. Input a poem and Bongo Cat will do its own spin on your material. Then let Bongo Cat read it aloud, accompanied with some sweet bongos."/>
        <meta property="og:type" content="website" />
        <meta property='og:url' content="https://christianmkastner.com/beat-poems" />

如你所见，我已经获取了所有 Open Graph 元标签，其中 image 标签包含我的基础 URL 内容，以及我想要用作缩略图的图片的相对位置。我使用 Webpack 构建了这个网站，因此打包工具创建了一个 src 文件夹，其中包含一个 assets 文件夹，里面存放的是实际的缩略图。这个标签高度依赖于缩略图的具体位置，因此也高度依赖于你正在处理的内容。

例如，React 应用有一个公共文件夹，你可以在其中输入实际图片和 html 中使用的图标。你也可以将用于开放图的缩略图放在这里。

这些方法确实能提升你的应用或网站的知名度和专业度。制作一些炫酷的东西只是成功的一半。让产品进入用户手中并使其更具吸引力同样重要。

最后要说的是，一些有用的工具可以简化这个过程，比如开放图谱的开发工具，这样你就可以更轻松地看到可共享链接的外观。Facebook、Twitter 和 LinkedIn 这三大社交媒体平台都提供了这些工具：

Facebook调试器

Twitter 卡验证器

LinkedIn 帖子检查器