首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

在Hugo中将og:image添加到特定页面,需要进行以下步骤:

  1. 确保你已经安装了Hugo,并且已经创建了你的网站项目。
  2. 在Hugo的网站项目中,找到你想要添加og:image的特定页面的Markdown文件。
  3. 在Markdown文件的头部,添加以下元数据(metadata):
代码语言:txt
复制
---
title: Your Page Title
date: 2022-01-01
og_image: /path/to/your/image.jpg
---

在上述元数据中,og_image是你要添加的og:image的路径。确保路径是相对于网站根目录的。

  1. 在你的Hugo主题中,找到对应的模板文件,通常是single.htmlsingle.html的变体。
  2. 在模板文件中,找到显示页面内容的部分,一般是{{ .Content }}
  3. 在该部分之前或之后,添加以下代码:
代码语言:txt
复制
{{ with .Params.og_image }}
<meta property="og:image" content="{{ . }}">
{{ end }}

上述代码会检查页面的元数据中是否定义了og_image,如果有,则会在页面的HTML中添加一个<meta>标签,指定og:image的内容。

  1. 保存并重新生成你的Hugo网站。

现在,你的特定页面应该已经添加了og:image。当你分享该页面的链接到社交媒体平台时,平台会自动获取并显示该页面的og:image作为缩略图。

推荐的腾讯云相关产品:腾讯云对象存储(COS)。

腾讯云对象存储(COS)是一种安全、低成本、高可扩展的云存储服务,适用于存储大量非结构化数据,如图片、音视频、文档等。你可以将你的og:image上传到腾讯云对象存储,并在Hugo的元数据中指定该图片的COS路径。

腾讯云对象存储产品介绍链接地址:腾讯云对象存储(COS)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 如何MV音频添加到EasyNVR做直播背景音乐?

    EasyNVR已经支持自定义上传音频文件,可以做慢直播场景使用,前两天有一个开发者提出一个问题:想把一个MV音频拿出来放到EasyNVR中去做慢直播。...经过我们共同研究之后,终于想出一个办法,就是先将这个音乐提取出来,再添加进EasyNVR。...我们采用是ffmpeg命令行方法拿到AAC数据,具体命令如下: ffmpeg -i input-video.mp4 -vn -acodec copy output-audio.aac 获取AAC...音频文件在EasyNVR通道管理页面进行添加,如下图: 这样问题就解决了。...不得不说ffmpeg就是强大,ffmpeg是专门用于处理音视频开源库,既可以使用它API对音视频进行处理,也可以使用它提供工具,如 ffmpeg,ffplay,ffprobe,来编辑你音视频文件

    4.1K40

    模型添加到场景 - 在您环境显示3D内容

    在本教程,我们学习如何检索模型并使用按钮触发器将其呈现在场景。一旦显示,我们隐藏焦点方块。...约束 然后,单击Storyboard编辑器左下角第四个图标,新约束添加到场景视图中。定义约束以确保您用户界面适应不同屏幕尺寸或设备方向。设置为0顶部,左,右和底部。...然后,让我们用一个小消息将它添加到场景。...,您添加每个模型追加到数组modelsInTheScene。...结论 经过漫长旅程,我们终于将我们模型添加到我们环境,好像它们属于它。我们在本节也学到了其他有用概念。我们在故事板定制了我们视图,并在代码播放动画。

    5.5K20

    ARKit 简介-使用设备相机虚拟对象添加到现实世界 看视频

    在本课程,您将了解到ARKit,您将学习如何制作自己游乐场。您将能够模型甚至您自己设计添加到应用程序并与它们一起玩。您还将学习如何应用照明并根据自己喜好进行调整。...增强现实 增强现实定义了通过设备摄像头虚拟元素(无论是2D还是3D)集成到现实世界环境用户体验。它允许用户与自己周围环境交互数字对象或角色,以创建独特体验。 什么是ARKit?...无论是动物部位添加到脸上还是与另一个人交换面部,你都会忍不住嘲笑它。然后你拍一张照片或短视频并分享给你朋友。...3Layers 跟踪 跟踪是ARKit关键功能。它允许我们跟踪设备在现实世界位置,位置和方向以及现场直播。...而且,光估计可以被集成以点亮模拟物理世界光源虚拟对象。

    3.7K30

    终结点图添加到ASP.NET Core应用程序

    让我们回到正轨上-我们现在有了一个图形生成中间件,所以让我们把它添加到管道。这里有两个选择: 使用终结点路由将其添加为终结点。 从中间件管道中将其添加为简单“分支”。...通常建议使用前一种方法,终结点添加到ASP.NET Core 3.0应用程序,因此从这里开始。...UseEndpoints()方法调用MapGraphVisualisation("/graph")图形终结点添加到我们ASP.NET Core应用程序: public void Configure...图形可视化工具添加为中间件分支 在您进行终结点路由之前,分支添加到中间件管道是创建“终结点”最简单方法之一。...从集成测试生成终结点图 ASP.NET Core对于运行内存集成测试有很好设计,它可以在不需要进行网络调用情况下运行完整中间件管道和API控制器/Razor页面

    3.5K20

    如何Tableau Server视图嵌入web页面

    Tableau作为可视化数据分析软件佼佼者,数据运算与美观图表完美地嫁接在一起。它程序很容易上手,各公司可以用它将大量数据拖放到数字“画布”上,转眼间就能创建好各种图表。...1、客户端请求数据:当用户访问具有嵌入式 Tableau Server 视图网页时,该客户端会向 Web 服务器发送请求,要求返回页面地址。...4、Web 服务器 URL 传递给客户端:Web 服务器将为视图构建 URL,并将其插入网页 HTML 。Web 服务器 HTML 传递回客户端 Web 浏览器。...6、Tableau Server 兑换票证:Tableau Server 兑换票证,创建会话,将用户登录,从 URL 移除票证,然后嵌入视图最终 URL 发送到客户端。...server视图嵌入自己页面

    3.2K20

    hugo搭建博客笔记

    [image-1653005972193](https://cos.gjcloak.xyz/file/image-1653005972193.png) # 主题安装 可以参阅官网 [themes.gohugo.io...[image-1653006149634](https://cos.gjcloak.xyz/file/image-1653006149634.png) 在生成```Hugo_blog```目录下点击终端...https://github.com/budparr/gohugo-theme-ananke.git themes/ananke 显示done,便是安装好了,最后,先打开config.toml 主题添加到站点配置文件...默认情况下,输出内容位于 站点目录/public/ 目录(可以通过-d/--destination参数修改输出位置,或者在配置文件设置publishdir参数) hugo -D 然后,我是有个测试站点...大神说把hugo换成扩展版就可以了,然后就成功了。 地址:hugo 6、页面加载不出来 hexo是在站点目录,比如Hexo_blog下进行git commit等类似操作

    60430

    WordPress SEO优化:添加OG协议标签

    翻看一些主流网址网页源代码,在 HTTP 头部经常能看到一些 og:type、og:title、og:image meta 标签。这些 OG 是什么东西?有什么用?...meta property="og:description" content="函数get_bloginfo()和bloginfo(),可以获取 WordPress 用户资料与常规设置信息,例如博客标题...//页面所在网站名og:audiosrc //音频地址rr:appid //如果您网站是CONNECT到renren.com,请提供该IDog:videosrc //视频资源链接,例如可是播放视频...flash地址og:width //视频、图片宽度og:height //视频、图片高度og:artist //音乐家og:contentid //内容主体ID,用来标识当前页面主要内容所处HTML...虫子菌下面提供一份代码,将其添加到 WordPress 主题 header.php 文件 head 标签内。

    1K00

    如何在Ubuntu上安装和使用Hugo

    为了使此链接更灵活地进行可能部署,我们创建一个相对符号链接。如果Hugo存储库部署到远程服务器,则只需确保themes目录再次克隆到Hugo父目录: ln -s .....我们可以通过输入以下命令隐藏.gitkeep文件添加到我们每个顶级目录(除了实际.git隐藏目录)之外: for DIR in `ls -p | grep /`; do touch ${DIR}....gitkeep; done 通过输入以下内容,我们可以看到隐藏.gitkeep文件已添加到我们所有目录 ..../content/.gitkeep 我们还希望确保我们渲染网站内容不会添加到源代码管理。实际HTML,JavaScript和CSS资产应该在每次部署时新生成,而不是保存在源代码控制本身。...请设置此项 publishdate:如果您只想在特定日期之后构建页面,则可以将其设置为将来日期 title:页面标题 现在,让我们编辑“关于”页面的标题: +++ categories = ["misc

    6.6K10

    Struts2(二)---页面表单数据提交给Action

    struts2,表单想Action传递参数方式有两种,并且这两种传参方式都是struts2默认实现,他们分别是基本属性注入、域模型注入、其中 ---基本属性注入,是表单数据项分别传入给Action...一些基本基本类型。...---域模型注入,是表单数据项打包传入给Action一个实体对象。 我们继续使用项目Struts2hello Struts实例,在其基础上使用这2方式完成页面向Action参数传递。...具体我们可以在项目首页index.jsp上追加表单,并在表单模拟一些数据,这些数据提交给HelloAction,最后在HelloAction中将接受参数输出到控制台。...由于index.jsp表单请求提交给HelloAction,而HelloAction又会跳转到hello.jsp,因此最终浏览器显示效果如下图: ?

    62710

    SSH项目开发jsp页面放在WEB-INF原因解析

    在一些安全型要求比较高项目开发,我们经常看到jsp页面都被放在WEB-INF下面了。这是出于对安全性考虑, 是为了代码安全。这样实现起来虽然麻烦了点,而且页面跳转很不方便。...所 以还是建议在一些安全性要求比较高项目里使用这种做法!...这是我写一个例子,我就是所有的JSP页面都放在WEB-INF下面,然后按照模块进行分配,course文件夹就是放和 课程信息管理相关JSP页面。...假如我们输入https://localhost:8080/项目名称/page/admin/index.jsp是不可以访 问整个page文件夹都放在WebRoot下面当然可以。 ?...然后分享实现WEB-INF下面页面跳转代码实现过程 假如我们点击下面图片那个开始按钮,跳到主界面 ?

    1.1K10

    如何给网站添加Web Bookmark

    当然 Twitter 也支持 OG 协议OG协议存在于页面meta标签,这些 meta 标签声明就是为了便于其他站点爬虫抓取有效信息用。...以下提到所有配置都是需要放在meta标签。 最基本配置共有四个,也是每个页面所需。四个必须配置分别是: og:title - 在卡片中显示网站标题。...如果页面指定了一个og:image,它应该指定og:image:alt。...配置 到现在为止,我们知道了应该关键信息放到网站meta标签,这里我们采用OG协议。那么现在问题就是如何进行配置,并且需要添加哪些信息?...生成好相应预览图片后,图片放至项目的img目录下面,最终打包后生成路径也就是刚才配置里og:image值。 至此,所有的修改已完成。

    1.5K10

    Hugo搭建博客(二)— Hugo+Github Pages搭建博客

    image.png 使用Hugo已经把博客搭建好了,那应该部署到哪里呢?可以使用VPS、云服务器等,我使用是Github Pages,免费而且也很好用!...base URL了,直接使用hugo命令即可 1.3 推送到Github远程仓库 这步就是public目录添加到远程仓库。... Public Key填写到username.github.io image.png 红色箭头指Allow write access 一定要勾上,否则会无法部署。... Private Key 添加到 username.github.io.myBlog仓库 image.png 这里 Secrets 变量名要一定是: ACTIONS_DEPLOY_KEY, 后面会用到...2.3 本地准备 这一步主要是本地和仓库进行同步,假设Hugo 文章 Repository 名字是 myBlog,myBlog仓库克隆到本地,开始初始化 Hugo 系统,如果本地已经有Hugo 系统

    2.1K54
    领券