Open Graph优化SEO

Open Graph(OG)协议作为社交分享优化的核心技术,不仅决定了内容在社交媒体平台的展示效果,还间接影响搜索引擎优化(SEO)的表现。本文将从作用解析、核心标签配置到动态生成策略,全面介绍 Open Graph 的应用。

Open Graph介绍

Open Graph(开放图谱协议)最早由Facebook于提出,旨在通过元数据(Meta Tags)将网页转化为“富媒体对象”,使社交平台能精准抓取标题、描述、图片等信息,提升内容分享的吸引力和传播效率。如今,OG协议已被Facebook、Twitter、LinkedIn、微信等主流平台广泛支持,并成为搜索引擎结构化数据的重要参考。

Open Graph作用

从搜索引擎的官方介绍中我们可以知道,其实 og 标签并不会直接影响搜索引擎的的排名,但是部分SEO人员认为,og 标签会间接影响SEO的效果。

增强社交媒体传播效果

通过优化 og 标签,可以让网页在分享到社交媒体上的时候,呈现更美观的效果,显示的内容也更丰富。这样做的好处是可以有效的提交分享内容在社交媒体的点击率和分享率,给原始网页带来更多的流量,大流量会间接提升搜索引擎对网页的价值评估,从而达到排名上升的效果。

结构化数据

通过完整地定义标题、描述、图片等元素,og 标签可以更好的帮助搜索引擎理解网页上的内容,避免搜索引擎对网页的无效解析。而且在 og 标签定义的信息,可以覆盖搜索引擎从网页中提取的标题等信息。

Open Graph标签

斜面介绍SEO中必须配置的OG标签及其作用:

标签 功能说明 示例
og:title 页面标题,需简洁且包含关键词
og:description 页面描述,突出核心内容
og:image 分享时的预览图
og:url 页面规范链接,避免因URL参数导致重复内容问题
og:type 页面类型(如website、article、product),影响社交平台的展示形式
og:site_name 网站名称,增强品牌曝光

Open Graph配置

og 标签实际上是 meta 标签,也属于网页的元数据定义,所以通过 meta 标签来配置

<head>
  <meta property="og:title" content="页面标题" />
  <meta property="og:description" content="页面描述" />
  <meta property="og:image" content="图片URL" />
  <meta property="og:url" content="页面URL" />
  <meta property="og:type" content="website" />
</head>

网页开发框架和各类CMS都已经内置了对 og 标签的支持,可以查阅文档进行配置。

Open Graph测试

有很多可以测试 og 标签的工具,Facebook也提供了比较完善的测试工具,除了测试 og 标签的效果外,还可以测试分享的网页在Facebook上的流量,这里提供一个比较简单的测试网站,无需登录就可以使用:点击打开Open Graph Debugger。效果如下图所示。

https://static.scung.cn/61dbb36a-d0dd-430c-a25e-3fd511e792fc.png

发布时间:2025-02-22
其他阅读

网页小技巧

分享一些网页开发中实用的UI小技巧,快速完成页面搭建工作。

查看原文

本地部署DeepSeek大模型服务

之前的文章介绍了怎么对接DeepSeek的API实现自己的助手,但是依旧使用的DeepSeek官方服务器,在高峰期还是会出现超长延时的情况,本文介绍另一种思路,通过在本机上部署DeepSeek大模型服务来告别卡顿崩溃。

查看原文

C#中关于字符串的一些特殊点

在C#中,字符串是一个使用比较多的类型,本文会讲到字符串(string)的一些特殊点。

查看原文

静态文件防盗链的一种思路

在我们的系统中,总会有一些资源需要保护起来不被盗走,如果是动态接口可以通过验证权限来保护,静态资源大多需要对外开放,比较难以保护,本文就介绍保护静态文件资源一种思路——那就是使用 HTTP 中 Referer 头。

查看原文

C#扩展方法

一般来说,当我们使用某个类时,需要用到一些特别的方法,但却没有时。一般做法可能是创建一个基于该类的派生类,添加我们想要的方法,但这样做无疑增加了复杂度。所以这时候,扩展方法出现了。

查看原文