前端必看:连OG都不知道还好意思说自己开发过H5?(上)

简介: 看到这个标题,也许你会陷入疑惑,什么是开放图谱协议(The Open Graph protocol)?我们为什么似乎很少见到它?它到底有什么用呢?确实,对于很多前端开发来说,开放图谱协议(The Open Graph protocol)是一个比较陌生的概念。

什么是 Open Graph Protocol


Open Graph Protocol(开放图谱协议),简称 OG 协议。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息(Meta Information)标记协议,属于 Meta Tag (Meta 标签)的范畴,是一种为社交分享而生的 Meta 标签,用于标准化网页中元数据的使用,使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。它允许在 Facebook 上,其他网站能像 Facebook 内容一样具有丰富的“图形”对象,进而促进 Facebook 和其他网站之间的集成。


简单来说,该协议就是用来标注页面的类型和描述页面的内容。其灵感来自 Dublin Core[1]、link-rel canonical、Microformats 和 RDFa,虽然有这些不同的技术和模式并且可以组合在一起,但没有一种技术可以提供足够的信息来丰富地表示社交图中的任何网页。Open Graph 协议建立在这些现有技术的基础上,以开发人员使用的简单性为关键目标,并为开发人员提供了一个实施方案,它为许多技术设计决策提供了信息。


看了这么多,好像还是不理解什么是开放图谱协议?


举个简单的例子,当我们分享一个链接(URL)给朋友时,在有的 App 上它只是一个链接,而在有的 APP 上,他却可以包含如下图所示的标题、图片、描述等信息:


48662d5c53fc0842a2f2bc935cc3480b.png


像飞书、WhatsApp、Twitter、Facebook 等社交软件,都会根据链接去抓取你给定 URL 的内容,以确定要包含哪些属性来进行共享展示。你可以通过在页面的头部代码中包含 og:tags 来显式定义属性;如果没有这些显示定义的信息,这些社交软件将在完成对给定 URL 的页面抓取后推断属性,然后使用这些属性信息组装共享框并进行展示。


其实这一切也是依赖于具体 APP 的实现的(是否会根据URL去抓取内容),对于同一 URL,我们可以看看在飞书和微信上的不同形态:


微信(此处手动@微信官方,为啥微信不做链接解析呢?有懂产品的小伙伴给解释一下不?):


5b5338ce5167557f747791e7798cd526.png


飞书:


8b8f15a97464c060936b40733bf82c18.png


为什么需要 OG协议?


我们知道,构建内容和维护网站通常可能需要耗费大量时间,我们当然希望自己的内容能够在社交分享时能够脱颖而出。先来看下有无 OG 协议时,同一个链接被解析的差别:


没有开放图谱协议时:此时社交软件正确地获取了页面的标题和描述,但它所含有的信息有限,看起来并不诱人。


671be2674ebda7220e7426282cea0004.png


有开放图谱协议时:


a349365d0c8b099966d74a958c1770f8.png


互联网上的内容通常至少有一个目标——与他人分享。如果你只是将它发送给一个朋友,有没有开放图谱协议可能不重要。但是如果你想运营、分享或希望它在任何具有丰富预览功能的社交网络或应用程序上共享、传播时,你会希望该预览尽可能抓住别人的眼球。像下面这样丰富而有效的信息将有助于鼓励人们点击查看你的内容。


00d73ac1f7049ee233b201c376f91ab7.png



如果你的内容没有开放谱图协议标签会怎样?也许对于网站内容来说不会有什么影响,但你的内容将很难从互联网上大量其他内容中脱颖而出


如果网页采用 OG 协议,分享结果会结构化展示,这样站点在被链接分享时会有更丰富的内容展现,同时站点的转化率将会提升

相关文章
|
6天前
|
缓存 前端开发 JavaScript
cnblogs——从主题开发浅谈前端性能优化
cnblogs——从主题开发浅谈前端性能优化
14 0
|
8天前
|
前端开发 Oracle Java
【前端学java】java开发的依赖安装与环境配置(1)
【8月更文挑战第8天】java开发的依赖安装与环境配置
26 1
【前端学java】java开发的依赖安装与环境配置(1)
|
1天前
|
缓存 前端开发 JavaScript
高效开发现代 Web 应用:从前端到后端的最佳实践
在开发现代 Web 应用时,前端和后端技术的选择对项目的性能、可维护性和用户体验至关重要。本文将探讨如何通过现代工具和框架来优化前端和后端开发流程。我们将分析前端技术(如 React 和 Vue.js)与后端技术(如 Node.js 和 Django)的集成,并提供实际案例来展示如何实现高效开发。无论是对新手还是经验丰富的开发者,本指南都提供了宝贵的洞见和实用的技巧,以帮助提高开发效率并构建出色的 Web 应用。
|
4天前
|
前端开发 Java C++
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。
8 0
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
|
18天前
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
|
18天前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
16天前
|
JSON 前端开发 JavaScript
革新Admin.NET框架:前端体验飞跃与代码生成自动化的双重革命,引领高效开发新时代!
【8月更文挑战第3天】Admin.NET是一款专为现代企业应用打造的高效框架,凭借强大的后台管理和灵活的扩展性深受开发者喜爱。本文探讨如何优化其前端体验与开发效率。首先,通过采用Flexbox和CSS Grid等技术实现响应式布局重构,确保了不同设备上的一致体验。其次,引入Vue.js或React实现组件化开发,提高代码复用性和维护性。再者,利用Webpack等工具进行性能优化,提升页面加载速度。此外,开发了代码生成器以自动生成CRUD模块,极大提高了开发效率。这些改进使Admin.NET前端开发更高效、灵活且易于维护。
14 0
|
7天前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
9 0
|
2月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
55 2
|
2月前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记