一直以来,我的 blog 分享到社交平台中的时候一直不能被很好的解析成卡片,只能展示成链接,应该怎么优化呢?

经过查询,发现官方教程 中有相关的指导。

里面写了怎么使用 meta 标签来标记卡片的内容。翻到最后一段,写着他们和 Open Graph 的关系,原文翻译过来是这么说的:

这个标签和 Open Graph 看起来很相似,他们也是基于同样的 Open Graph 协议的约定。使用 OG 标签描述页面的时候,也很容易在不额外复制标签的情况下生成分享卡片。

当解析器找不到卡片标签的时候,它就会解析 OG 协议的标签。这样就可以独立定义两者,最大程度的减少重复标记。

看到这里我立马去查了 Open Graph 的官网,里面写的很详细:

基本的标签 #

基本的标签包括 title,type,image,url 四个。写的时候别忘了html开头的 prefix属性。

官网示例如下:

<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

一些其他的标签 #

这里还有一些标签会比较有用,比如:

  • og:description:描述
  • og:locale:文章中使用的语言,默认是 en_US

别的还有不少,比如 audio,video之类的,作为blog基本用不上了。

在hugo中使用标签 #

meta 标签需要在页面模板中进行修改,对于主题,应该在 themes/your-theme/layouts/ 下的某个html文件中。

我摘选以下我的 blog 的头部:

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Title -->
  <title>title部分</title>
  <!-- Meta -->
  <meta name="description" content="{{ .Summary }}">
  <meta name="author" content="{{ .Params.author | default .Site.Params.author }}">
  <meta content="{{ delimit .Keywords ", " }}" name="keywords">
  <!-- Styles -->
  <link href="{{ $mainStyles.RelPermalink }}" integrity="{{ $mainStyles.Data.Integrity }}" media="screen" rel="stylesheet">
  <!-- Favicons -->
  <link rel="icon" href="{{ .Site.Params.favicon }}"> 
  <link rel="apple-touch-icon" href="{{ .Site.Params.appleTouchIcon }}">
  <!-- Generator -->
  <meta name="generator" content="Hugo {{ .Hugo.Version }}">
  <!-- RSS -->
  <link rel="alternate" type="application/atom+xml" href="{{.Site.BaseURL}}index.xml" title="{{ .Site.Title }}">
</head>

按照 Open Graph 的要求,改完之后长这样(这里隐藏不相关的部分):

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}" prefix="og: http://ogp.me/ns#">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Title -->
  <title>title部分</title>
  <!-- Meta -->
  <meta name="description" content="{{ .Summary }}">
  <meta name="author" content="{{ .Params.author | default .Site.Params.author }}">
  <meta content="{{ delimit .Keywords ", " }}" name="keywords">
  <!-- Open Graph -->
  {{- if eq .Kind "page" }}
  <meta property="og:title" content="{{ .Title }}" />
  <meta property="og:type" content="blog" />
  <meta property="og:url" content="{{ .Permalink }}" />
  {{- if .Params.album -}}
  <meta property="og:image" content="{{ .Params.album }}" />
  {{ end }}
  <meta property="og:description" content="{{ .Params.Summary }}" />
  <meta property="og:locale" content="{{ .Site.LanguageCode }}" />
  {{ end }}
</head>

可以看出这里有几个特殊的判断:

  1. 只有在页面类型为 page 的时候才展示 OG 标签。
  2. 只有页面中加入了 album 参数,才展示缩略图。这个字段需要加在文章的信息区,和title放在一个区块里。

预览效果 #

看起来还是很不错的,我要的都展示出来了。

预览效果