将 og: image 添加到 Hugo 中的特定页面答案

【问题标题】：Add og: image to specific pages in Hugo将 og: image 添加到 Hugo 中的特定页面
【发布时间】：2019-01-09 11:20:25
【问题描述】：

我刚刚收到了一个雨果网站。我需要添加一个 og:image 比如说示例 www.site.com/page1 以及子页面 www.site.com/page1/something 和几十个项目......

我正在阅读文档并找到了这个。

// First in config.toml use the following:
baseURL = "//example.com" [params] og_image = "/some-image.jpg"

// Then in a post’s frontmater set a parameter for the OpenGraph image
og_image = "/images/1.jpg"

// And in the HEAD partial put the following:
> {{ if .Params.og_image }} > `` > `` > {{ else }} > `` > `` > {{ end }}
// And that’s it.

我无法理解在 params 中输入的内容。 > `` > 是什么意思我应该在哪里包含meta-tag，你能解释一下吗？我以前从未使用过 Hugo，文档有点奇怪......基本上，对于这样的每个页面和子页面，我想为 og:image 使用图像..

目前在我的config.yaml，我有：

baseurl: "www.site.com/"

标题中的答案 {{ .Hugo.Generator }}

    {{ if isset $.Params "ogtype" }}
    <meta property="og:type" content="{{ .Params.ogtype }}">
    {{ end }}

    {{ if isset $.Params "ogimage" }}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@siteLtD">
    <meta property="og:title" content="{{ .Params.title }}">
    <meta property="twitter:title" content="{{ .Params.title }}">
    <meta property="og:image" content="{{ .Params.ogimage }}">
    <meta property="twitter:image" content="{{ .Params.ogimage }}">
    {{ else }}
    <meta property="og:image" content="www.site.com/images/site-ogi.png">

如果您能指导我实际需要包含哪些内容以使子页面获得特定图像，那将非常感谢！

【问题讨论】：

标签： image seo meta hugo

【解决方案1】：

您需要在config.yaml 中指定您的图片。然后我假设您的主题的“帖子”前题也包含一个 og 参数。头部部分在设置后获取这些参数。然后取决于您的模板和配置，例如：

{{ with .Params.images }}{{ range something . }}
  <meta property="og:image" content="{{ . | absURL }}" />
{{ end }}

见：https://gohugo.io/templates/internal/#configure-open-graph &https://gohugo.io/variables/page/

另外，由于您是 Hugo 的新手，我建议您阅读有关模板、使用部分等的文档，以更好地了解在哪里使用 meta-tag 和其他最佳实践，因为这也可能因主题而异主题。这也应该有帮助：http://brendan-quinn.xyz/post/working-with-hugos-internal-partial-templates-facebook-and-open-graph/

【讨论】：