0

在 Hugo 中使用 Open Graph 提升分享效果

 2 years ago
source link: https://wocai.de/post/2020/02/%E5%9C%A8-hugo-%E4%B8%AD%E4%BD%BF%E7%94%A8-open-graph-%E6%8F%90%E5%8D%87%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

一直以来，我的 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放在一个区块里。

预览效果 #

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

预览效果


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK