Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >优化property=og标签,让你的网站在搜索引擎面前更优雅

优化property=og标签,让你的网站在搜索引擎面前更优雅

作者头像
德顺
发布于 2023-08-25 05:42:21
发布于 2023-08-25 05:42:21
2.4K05
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:5
代码可运行

property=og 标签是一种开放内容协议(Open Graph Protocol)的标签,它可以让网页成为一个“富媒体对象”,并被其他社会化网站如Facebook、百度、谷歌等引用和展示。property=og 标签可以提高网页的传播效率和用户体验,也有利于 SEO 优化。

property=og 标签的使用方法是,在 <head> 中添加 <meta property="og:xxx" content="yyy"/> 的形式,其中 xxx 表示属性名,yyy 表示属性值。常用的属性名有:

Meta Property=og 协议的作用

  1. 能够正确被蜘蛛抓取您的内容到百度、360、搜狗等网页搜索;
  2. 帮助您的内容更有效的在百度、360、搜狗结构化展现;
  3. 能够正确的分享您的内容到SNS网站;
  4. 帮助您的内容更有效的在SNS网络中传播;

Meta Property=og 主要标签属性

og:title 网页标题

og:type 网页类型(常用值:article 、book 、movie 、video 、website

og:image 网页的主要图片

og:author 作者名称

og:url 网页的地址

og:release_date 发布时间

og:description 网页的简介

og:site_name 页面所在网站名

og:videosrc 视频或者Flash地址

og:audiosrc 音频地址

og:site_name 网站名称

og:locale 网页语言

不支持 keywords

可以和 name 搭配使用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<meta name="description" property="og:description" content={SITE.description} />
<meta name="keywords" content={SITE.keywords} />

简单示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<meta property="og:title" content="property=og标签的含义及作用-w3h5前端资源网"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="https://w3h5.com/og-image.jpg"/>
<meta property="og:url" content="https://w3h5.com/og-article.html"/>
<meta property="og:description" content="本文介绍了property=og标签的概念、用法和优势,以及如何在WordPress中添加该标签。"/>
<meta property="og:site_name" content="w3h5前端资源网"/>
<meta property="og:locale" content="zh_CN"/>

property=og标签的注意

一个网页可以重复使用同样的 property=og 标签,但要用 og:type 标签将其分割,表示不同的内容段落。

property=og 标签不等同于 meta name 标签,两者针对的对象不一致,功能不同。如果要使用 property=og 标签,应同时赋值 meta name 和 title 标签。

property=og 标签应根据网页的实际内容和目标进行合理设置,避免过度优化或误导用户。

文章结尾:

property=og 标签是一种简单而有效的 SEO 工具,可以帮助网站提升在社会化网络和搜索引擎上的表现。如果您想了解更多关于 property=og 标签或其他 SEO 相关的知识,请继续关注本站的 SEO 分类。

未经允许不得转载:w3h5-Web前端开发资源网 » 优化property=og标签,让你的网站在搜索引擎面前更优雅

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
WordPress SEO优化:添加OG协议标签
翻看一些主流网址的网页源代码,在 HTTP 头部经常能看到一些 og:type、og:title、og:image 的 meta 标签。这些 OG 是什么东西?有什么用?针对这些问题,虫子菌为你整理了以下资料。
Yangsh888
2022/08/15
1.3K0
新网站如何做好SEO优化 尽快被收录
对于新网站,百度等搜索引擎会有一定的扶持,所以在网站上线之前一定要做好规划,为了网站往什么领域发展、所涉猎的内容等都要提前想好。
德顺
2019/11/13
1.1K0
网站SEO优化:Meta标签如何书写?Vue项目怎么优化Meta标签?
什么是Meta标签呢?这可不是最近很火的“元宇宙”或是FB。Meta标签,或者说Meta元素,是HTML内head标签的一部分。通常用于指定页面描述、关键字以及未在其他head元素、属性中提供的其他元数据。间接参与浏览器页面渲染,或者为搜索引擎的爬虫提供引导(进而让搜索引擎更好收录网站)。
Mintimate
2022/01/20
4.3K5
网站SEO优化:Meta标签如何书写?Vue项目怎么优化Meta标签?
Typecho关于seo的一些优化
关于typecho的收录优化,一个是文章seo和搜索优化,另一个就与博客加载速度相关了,至于之后还不收录,那就是百度太高冷了,我这小站不配了。
qiangzai
2021/12/21
1.5K1
Typecho关于seo的一些优化
利用og富媒体标签,提升网站在搜索引擎中的竞争力
HI,最近更新的有些频繁,没办法事情即便工作再多有问题就得处理,有客户咨询我,主题SEO功能优化的怎么样,我说主题模板均是SEO标准化达标的,还增加了OG富媒体标签功能,又问我什么是OG富媒体标签,好吧,今天我要为大家详细介绍一个对SEO具有重要意义的神奇元素——OG标签。它不仅能为我们的网站带来诸多优势,还能让我们在激烈的竞争中脱颖而出。
李洋博客
2024/03/20
3850
利用og富媒体标签,提升网站在搜索引擎中的竞争力
掌握这些搜索引擎规则,让你的工作和生活事半功倍
搜索引擎都有自己的一套搜索规则,熟悉这套规则并好好利用,就可以达到事半功倍的效果。
德顺
2019/11/13
1.6K0
掌握这些搜索引擎规则,让你的工作和生活事半功倍
谷歌、百度等搜索引擎,规则命令语法大全
只要我们上网就离不开搜索引擎,百度、谷歌、360搜狗等。虽然用的很多,但很少会有人去关注搜索引擎的规则命令语法,好好利用这些规则,可以找到自己更想要的结果!
德顺
2023/08/24
1.1K0
谷歌、百度等搜索引擎,规则命令语法大全
详谈WordPress 360&百度搜索引擎展现出图策略
博客一直佛系seo,不过还好一直稳步提升。随着权重稳定,在百度的出图率也提升了很多。今天就来聊一聊百度收录提交和搜索引擎出图的个人部分见解。区别于百度出图佛系,360则有具体的细则说明。并给出了适配规范。至于搜狗应该也是蛮佛系的吧。不怎么管搜狗,部分也有图。
AlexTao
2020/04/21
1.2K0
详谈WordPress 360&百度搜索引擎展现出图策略
读Google搜索引擎优化 (SEO) 指南的几点收获
今天闲来无事,搜了一下 Google 的 搜索引擎优化 (SEO) 指南,有几点收获比较深,记录一下。
德顺
2023/12/13
2480
Open Graph协议是由Facebook推出的元数据协议
简介: Open Graph协议是由Facebook推出的元数据协议,用于标准化网页内容在社交网络中的呈现方式。它通过在网页HTML头部添加特定meta标签来实现。
西里网
2025/05/15
550
网站搜索引擎 Meta元标签的详细介绍
Meta元标签位于网页源代码之间,它是用来在HTML文档中模拟HTTP协议的响应头报文。
华专网络
2024/12/19
1590
网站搜索引擎 Meta元标签的详细介绍
Nuxt3 实战 (十二):SEO 搜索引擎优化指南
4、/pages/ 目录中可以使用 definePageMeta 来根据当前路由设置元数据
白雾茫茫丶
2024/06/26
7920
Nuxt3 实战 (十二):SEO 搜索引擎优化指南
如何给网站添加Web Bookmark
在查看阮一峰老师最新的周刊时,发现了一个很好玩的工具bookmark.style/,作用就是输入网站,会根据网站上的信息生成精美的分享卡片,可以保存成图片并进行分享。
每周聚焦
2022/05/12
1.1K0
meta标签大全(荐)
5、IOS中Safari设置保存到桌面图标: 这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,so,尺寸和iphone上的一致,是57*57px
White feathe
2021/12/08
8300
Web前端如何进行SEO结构优化
做前端的肯定离不开SEO,无论您是专职的SEOer还是其他什么别的,只要设计到前端就避不开SEO,大大小小做了几十个企业网站和个人博客网站建设的我,对与SEO仍然出于小白阶段,虽说前段时间博客也终于达到了2+,但是最近又回到了1。。。挺惨的哈,结合百度资料、CSDN等权威信息,介绍一下关于网页前端SEO结构性优化的文章,供参考,并共勉!
李洋博客
2021/06/15
1K0
meta 标签知多少
meta 标签提供该页面的一些信息,比如针对搜索引擎和更新频度的描述和关键词,它还可以控制页面缓冲、响应式窗口等,定义 meta 标签有利于网站 SEO(有利于搜索引擎访问),对于响应式窗口也起着作用,因此 meta 标签是 HTML 中很重要的一个标签。在生成默认的 HTML 文档结构时,通常会有两个 meta 标签:
多云转晴
2020/02/19
1.1K0
meta 标签知多少
SEO优化实战
IMWeb前端团队
2018/01/08
1.7K0
SEO优化实战
如何给网站添加Web Bookmark
在查看阮一峰老师最新的周刊时,发现了一个很好玩的工具https://bookmark.style/[1],作用就是输入网站,会根据网站上的信息生成精美的分享卡片,可以保存成图片并进行分享。
chuckQu
2022/08/19
1.6K0
如何给网站添加Web Bookmark
如何做好Bing必应搜索引擎SEO优化,实现秒收录第三点很重要
必应搜索在国内的市场份额占比可能不算大,但是一些站点大概也有10%-20%左右的流量占比,所以不容忽视,所以做好了这个必应搜索,也能获取到比较不错的流量。其次就是很多站百度很难收录,收录慢等问题比较严重,其他的搜狗,so什么的就更不用说了。
wordpress建站吧
2022/04/11
4.6K0
如何做好Bing必应搜索引擎SEO优化,实现秒收录第三点很重要
搜索引擎优化(SEO) 基础常识
在移动互联网迅猛发展的今天,各种APP、小程序满天飞,针对网页的搜索引擎优化(SEO)对于现今的企业来说已经不是头等重要的事情了。但是如果公司的SEO做得好的话,确实可以节约很大一部分宣传开支,因此,并不能说明它是完全没有作用的工作。只是在我看来,重要性确实下降了很多。
FungLeo
2020/02/23
1K0
相关推荐
WordPress SEO优化:添加OG协议标签
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验