Question

og：image和og：description未出现在whatsapp和fb共享中，

回购链接

我试图将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>

请帮助我，我所有的雨果网站都是这样

Answer 1

这是答案：

我在{strong> config.toml 文件中添加了og_image = "images/og_image.png"，

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）

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

WhatsApp preview og_image

雨果网站未显示og：image和og：description

1 个答案:

这是答案：

参考文献：