Hugo 站点不显示 og:image 和 og:description

Question

og:image 和 og:description 没有出现在 whatsapp 和 fb 分享中，

回购 link

我试图将 og:image 保持在 300*300，

已尝试清除缓存

这是代码

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=egde">
    <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
    <meta name="generator" content="Hugo 0.55.6">
    <title>{{ if .Title }}{{ .Title }}{{ end }}</title>
    {{ if .Params.Description }}
    <meta name="description" content="{{ .Params.Description }}">
    {{ else if .Site.Params.Description }}
    <meta name="description" content="{{ .Site.Params.Description }}">
    {{ end }}
    {{ if .Params.Keywords }}
    <meta name="keywords" content="{{ .Params.Keywords }}">
    {{ else if .Site.Params.Keywords }}
    <meta name="keywords" content="{{ .Site.Params.Keywords }}">
    {{ end }}
    <!-- og meta tags -->
    <meta property="og:url" content="{{.Site.BaseURL}}">
    <meta property="og:image" content="{{.Site.BaseURL}}images/ogimage.png">
    {{ if .Params.Description }}
    <meta property="og:description" content="{{ .Params.Description }}">
    {{ else if .Site.Params.Description }}
    <meta property="og:description" content="{{ .Site.Params.Description }}">
    {{ end }}
    {{ if .Params.Keywords }}
    <meta property="og:keywords" content="{{ .Params.Keywords }}">
    {{ else if .Site.Params.Keywords }}
    <meta property="og:keywords" content="{{ .Site.Params.Keywords }}">
    {{ end }}
    <!-- favicons -->
    <link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
    <link rel="manifest" href="/images/favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/images/favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/fontawesome-free-5.9.0-web/css/all.min.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="/css/grayscale.css">
    <link rel="stylesheet" href="/fancybox-2.1.7/jquery.fancybox.min.css">

</head>

请帮我解决这个问题，我所有的hugo网站都是这样的

Answer 1

答案如下：

我将 og_image = "images/og_image.png" 添加到 config.toml 文件中，

下面的代码在partials/head.html

<title>{{ if .Title }}{{ .Title }}{{ end }}</title>
{{ if .Params.Description }}
<meta name="description" content="{{ .Params.Description }}">
{{ else if .Site.Params.Description }}
<meta name="description" content="{{ .Site.Params.Description }}">
{{ end }}
{{ if .Params.Keywords }}
<meta name="keywords" content="{{ .Params.Keywords }}">
{{ else if .Site.Params.Keywords }}
<meta name="keywords" content="{{ .Site.Params.Keywords }}">
{{ end }}
<!-- og meta tags -->
<meta property="og:title" content="{{ if .Title }}{{ .Title }}{{ end }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{.Site.BaseURL}}">
{{ if .Params.Description }}
<meta property="og:description" content="{{ .Params.Description }}">
{{ else if .Site.Params.Description }}
<meta property="og:description" content="{{ .Site.Params.Description }}">
{{ end }}
{{ if .Params.Keywords }}
<meta property="og:keywords" content="{{ .Params.Keywords }}">
{{ else if .Site.Params.Keywords }}
<meta property="og:keywords" content="{{ .Site.Params.Keywords }}">
{{ end }}
{{ if .Params.og_image }}
<meta property="og:image" content="{{.Site.BaseURL}}{{ .Params.og_image | relURL 
}}" />
<meta property="og:image:secure_url" content="{{ .Params.og_image | absURL }}" />
{{ else }}
<meta property="og:image" content="{{.Site.BaseURL}}{{ .Site.Params.og_image | 
relURL }}" />
<meta property="og:image:secure_url" content="{{ .Site.Params.og_image | absURL }}" 
/>
{{ end }}

(og_image 位置: themes/yourtheme/static/images/og_image.png)

我的网站link 示例： https://www.tensketch.com/

WhatsApp preview og_image

Hugo 站点不显示 og:image 和 og:description

Hugo sites doesn’t display og:image and og:description

meta-tags

hugo

答案如下：

参考文献：