OGP协议是一套Metatags的规格，用来标注页面，告诉我们你的网页快照。帮助社交app高效并准确的获取网页中的核心链接、标题、主图、正文摘要等信息，使得该网页在社交分享中有更好的展现体验。

如果网页不支持OGP，那么基于算法和规则来提取网页中标题、主图、正文摘要，准确性无法做到100%，体验也不能充分保证。尤其是有部分页面html采用前端js渲染，而不是服务端渲染，会导致无法提取主图、正文摘要，链接卡片体验感不好。

如何适配Open Graph Data

只需要在页面的HTML标签中增加以下meta标签即可

<head>

<!-- Open Graph data -->

<meta property="og:title" content="Title Here" />

<meta property="og:url" content="http://www.example.com/" />

<meta property="og:image" content="http://example.com/image.jpg" />

<meta property="og:description" content="Description Here" />

</head>

重要：出于性能和体验考虑，链接转卡片服务不支持执行HTML中的js，上述Metatags必须在服务端渲染。

OGP在钉要消息上的应用如apple官网

钉钉相关OGP的介绍

https://open.dingtalk.com/document/orgapp/message-card

OGP参考：

https://moz.com/blog/meta-data-templates-123?spm=ding_open_doc.document.0.0.7f0725b2ttBqfP

http://ogp.me/?spm=ding_open_doc.document.0.0.7f0725b2ttBqfP

OGP协议的使用的更多相关文章

  1. 腾讯ISUX网页前端代码分析

    看了一下腾讯ISUX网页,无论是pc端还是移动端,展示都挺好看的,先对其代码进行分析如下: 1,先看前三行代码 <!DOCTYPE html> <!-- 腾讯 ISUX 是腾讯集团核 ...

  2. 前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？

    目录 1.交互实现 1.1 meta标签:自动刷新/跳转 1.2 title标签:消息提醒 2.性能优化 2.1 script标签:调整加载顺序提升渲染速度 2.2 link标签:通过预处理提升渲染速 ...

  3. JAVA基础知识之网络编程——-TCP/IP协议，socket通信，服务器客户端通信demo

    OSI模型分层 OSI模型是指国际标准化组织(ISO)提出的开放系统互连参考模型(Open System Interconnection Reference Model,OSI/RM),它将网络分为七 ...

  4. c# TCP/IP协议利用Socket Client通信(只含客户端Demo)

    完全是基础,新手可以随意看看,大牛可以关闭浏览页了,哈哈. TCP/IP协议 TCP/IP是一系列网络通信协议的统称,其中最核心的两个协议是TCP和IP.TCP称为传输控制协议,IP称为互联网络协议. ...

  5. HTTP协议系列(1)

    一.为什么学习Http协议       首先明白我们为什么学习HTTP协议,也就是说明白HTTP协议的作用.HTTP协议是用于客户端与服务器之间的通讯.明白了HTTP协议的作用也就知道了为什么要学习H ...

  6. 重温Http协议--请求报文和响应报文

    http协议是位于应用层的协议,我们在日常浏览网页比如在导航网站请求百度首页的时候,会先通过http协议把请求做一个类似于编码的工作,发送给百度的服务器,然后在百度服务器响应请求时把相应的内容再通过h ...

  7. 协议森林17 我和你的悄悄话 (SSL/TLS协议)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 转载请先与我联系. TLS名为传输层安全协议(Transport Layer Protocol),这个协议是一套加密的 ...

  8. 协议森林16 小美的桌号（DHCP协议）

    作者:Vamei 出处:http://www.cnblogs.com/vamei 转载请先与我联系. DHCP协议用于动态的配置电脑的网络相关参数,如主机的IP地址,路由器出口地址.DNS域名服务器地 ...

  9. 简约之美Jodd-http--深入源码理解http协议

    Jodd 是一个开源的 Java 工具集, 包含一些实用的工具类和小型框架.简单,却很强大! jodd-http是一个轻巧的HTTP客户端.现在我们以一个简单的示例从源码层看看是如何实现的? Http ...

  10. 【JavaScript】javascript中伪协议(javascript:)使用探讨

    javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行. 比如下面这个死链接: <a href="javasc ...

随机推荐

  1. 【一文秒懂】Ftrace系统调试工具使用终极指南

    [一文秒懂]Ftrace系统调试工具使用终极指南 1.Ftrace是什么 Ftrace是Function Trace的简写,由 Steven Rostedt 开发的,从 2008 年发布的内核 2.6 ...

  2. 使用JavaStream将List转为Map

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 使用Java Stream将List转换为Map ...

  3. 快速定位Java应用卡顿的原因

    快速定位Java应用卡顿的原因 背景 同事的环境说出现了一周的卡顿现象. 元旦加班期间告诉我时已经是2024.1.1下午五点了. 当时没有来得及去查看. 上班之后发现问题很简单. 不过为了能够指导一下 ...

  4. [转帖]JVM性能调优工具2之jcmd详解（覆盖全网最全的jcmd命令与说明文档）

    上篇文章里<JVM常用性能调优工具详解1>我们已经探究了jps.jstat等监控工具,以及jinfo.jmap.jstack.jhat等故障排查工具,这里我单独拿出一篇文章,特别介绍jcm ...

  5. [转帖]ARM内核全解析，从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57

    https://www.cnblogs.com/senior-engineer/p/8668723.html 前不久ARM正式宣布推出新款ARMv8架构的Cortex-A50处理器系列产品,以此来扩大 ...

  6. [转帖]TIDB - 使用BR工具进行数据热备份与恢复

    一.BR工具 BR 全称为 Backup & Restore,是 TiDB 分布式备份恢复的命令行工具,用于对 TiDB 集群进行数据备份和恢复.BR 只支持在 TiDB v3.1 及以上版本 ...

  7. [转帖]Alertmanager 部署配置

    https://www.cnblogs.com/winstom/p/11940570.html 目录 前言 源码安装 配置 启动 配置prometheus监控Alertmanager 修改promet ...

  8. [转帖]Jmeter学习笔记（八）——监听器元件之聚合报告

    https://www.cnblogs.com/pachongshangdexuebi/p/11507298.html 1.聚合报告添加 聚合报告是常用的监听器之一,添加路径: 点击线程组->添 ...

  9. [转帖]VMware Workstation PRO 17.0.2正式版+激活密钥

    https://www.isharepc.com/36181.html VMware Workstation PRO 17是一个简化的桌面虚拟化应用程序. 它在同一台计算机上运行一个或多个操作系统而无 ...

  10. [转帖]微服务集成skywalking实现全链路日志追踪方案

    目录 1.安装部署skywalking 1.1 环境准备 1.2 部署步骤 2.微服务整合skywalking实现链路监控 2.1 下载skywalking官方版本 2.2 将微服务引入skywalk ...