SEO优化之og:标签

文章目录[隐藏]

SEO 优化 og 标签前言

在我以前搭建小说网站的时候看见小说网站有很多og 标签,当时看着挺奇怪的一般情况下,我们都是使用 TDK 就可以了,今天在编写模板的时候,特地查了一下这些标签。

SEO 优化 og 标签历史

og 标签其实是:Open Graph 通讯协定。此通讯协定早在 2010 年 F8 会议上 Facebook 就公布了,意为:把这种种不同的 Graph 连结起来,将形成 Open Graph。

摘录:Open Graph 通讯协定(Protocol)本身是一种制定一套 Metatags 的规格,用来标注你的页面,告诉我们你的网页代表哪一类型的现实世界物件。另一伙伴网站,即 Amazon 旗下的 Internet Movie Database(IMDb),将用这个 Open Graph Protocol 为每一部电影标注页面。按下 IMDb 上的“赞”按钮,就会自动把那部电影加入 Facebook 使用者 profile 中的“最爱的电影”。

Facebook 已和 Yahoo、Twitter 合作采用 OAuth 2.0 认证标准。Graph API 翻新了 Facebook 的平台程序代码,让 Facebook 里的每个物件都拥有独特的 ID。通过 Open Graph 把其他社交网站建构的网络给连接起来,将创造一个更聪明、更与社交连接、更个人化也更具语意意识的网络。

总结: 使用og 标签会更有利搜索引擎搜索,但没有也不会影响搜索引擎搜索,此项属于加分项。

SEO 优化 og 标签常用标签

// 普通类
og:locale //网站语言
og:type //类型 (常用值:website;article;book;movie)
og:title //标题
og:description //页面的简单描述
og:url //当前内容链接
og:video //视频
og:audio //音频
og:photo //图片
og:product //产品
og:image //缩略图
og:link //链接
og:site_name //页面所在网站名
og:audiosrc //音频地址
rr:appid //如果您的网站是 CONNECT 到 renren.com 的,请提供该 ID
og:videosrc //视频资源链接,例如可是播放视频的 flash 地址
og:width //视频、图片的宽度
og:height //视频、图片的高度
og:artist //音乐家
og:contentid //内容主体的 ID,用来标识当前页面主要内容所处的 HTML 标签的 ID
og:price //产品价格
og:nick //店铺名
og:postfee //运费

// 小说类
og:novel:category // 小说目录
og:novel:author // 小说作者 
og:novel:book_name // 小说书名
og:novel:read_url  // 小说阅读地址
og:novel:status    // 小说状态
og:novel:update_time   // 小说更新时间
og:novel:latest_chapter_name // 小说最新章节
og:novel:latest_chapter_url  // 小说最新章节地址

// 其他
首页一般设置 og:type 为: website
文章页一般设置 og:type 为:article

SEO 优化 og 标签例子 1

<!-- 网站采用什么制作 -->
<meta name="generator" content="本网站采用基于 MIP 规范的 MIPCMS 制作而成。"/>
<!-- 首页使用 website,文章页使用 article -->
<meta property="og:type" content="website">
<meta property="og:title" content="赤域吧">
<meta property="og:site_name" content="页面所在的网站名">
<meta property="og:description" content="赤域资源网">
<meta property="og:url" content="当前内容链接">
<meta property="og:image" content="logo 图">

SEO 优化 og 标签例子 2

<meta property="og:novel:category" content="">
<meta property="og:novel:author" content="天蚕土豆">
<meta property="og:novel:book_name" content="大主宰">
<meta property="og:novel:read_url" content="http://www.biquge.tv/0_1/">
<meta property="og:novel:status" content="连载">
<meta property="og:novel:update_time" content="2017-07-08 20:50:38">
<meta property="og:novel:latest_chapter_name" content="第一千五百五十一章 邪神陨落(大结局)">
<meta property="og:novel:latest_chapter_url" content="http://www.biquge.tv/0_1/3899862.html">
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3的SEO优化可以通过预渲染来实现。预渲染是一种在构建时生成针对特定路由的静态HTML文件的方法,可以将你的前端应用作为一个完全静态的站点。下面是两种实现Vue 3 SEO优化的方法: 1. 使用预渲染插件:你可以使用预渲染插件来生成静态HTML文件。一个常用的预渲染插件是`prerender-spa-plugin`。你可以在构建时简单地生成针对特定路由的静态HTML文件。这样,搜索引擎爬虫就可以直接看到你的页面内容,提高了SEO效果。 2. 默认根节点隐藏:另一种解决方案是在预渲染的HTML文件中默认隐藏根节点,然后在合适的时机再显式出来。这样可以避免在初始加载时显示空白页面,提升用户体验。你可以通过在根节点上添加`v-cloak`指令,并在CSS中设置该指令的样式来实现默认隐藏。 下面是一个示例,演示了如何使用预渲染插件和默认根节点隐藏来实现Vue 3的SEO优化: ```javascript // 配置预渲染插件 const PrerenderSPAPlugin = require('prerender-spa-plugin'); module.exports = { // ...其他配置 configureWebpack: { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/', '/about', '/contact'], // 需要预渲染的路由 }), ], }, }; ``` ```html <!-- 在根节点上添加v-cloak指令 --> <div id="app" v-cloak> <!-- 页面内容 --> </div> <!-- 在CSS中设置v-cloak的样式 --> <style> [v-cloak] { display: none; } </style> ``` 请注意,以上方法只是Vue 3的SEO优化的两种常见方法之一。根据你的具体需求和项目情况,可能还有其他方法可以实现SEO优化

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值