首页 > 其他分享 >OGP协议的使用

OGP协议的使用

时间:2024-02-20 16:34:27浏览次数:19  
标签:协议 网页 体验 主图 OGP 使用 open 页面

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,使用,open,页面
From: https://www.cnblogs.com/lori/p/18023421

相关文章

  • postman获取响应报文中的token值,并增加到下个请求的请求头,使用场景
    一、获取token登陆之后才能获取token,所以在断言中写脚本第一步:重点就是解析响应报文,然后自己看响应的json中的key取值,我的token值的key是datavarjsondata=JSON.parse(responseBody)varloginToken1=jsondata.data打印下就是console.log(loginToken1)第二步:赋值给全局变......
  • iframe 使用 postMessage 传递信息,addEventListener监听返回信息,并使用removeEventLis
    BUTTON发送消息selectButton.addEventListener('click',()=>{      iframe.contentWindow.postMessage({        event_id:"select_media",        return_type:'media'      },'*');   ......
  • 使用pymysql模块操作MySQL
    第一步:安装pipinstallpymysql第二步:使用方式#导入模块importpymysql#建立连接conn=pymysql.connect(user='root',password="root",host='127.0.0.1',database='cars')#创建游标,查询数据默认为元组类型cursor=conn.cursor......
  • c#使用webView2 访问本地静态html资源跨域问题 || Cors
    背景在浏览器中访问本地静态资源html网页时,可能会遇到跨域问题如图。 是因为浏览器默认启用了同源策略,即只允许加载与当前网页具有相同源(协议、域名和端口)的内容。WebView2默认情况下启用了浏览器的同源策略,即只允许加载与主机相同源的内容。所以如果我们把静态资源发布到ii......
  • ARL分析与进阶使用
    在使用ARL(AssetReconnaissanceLighthouse资产侦察灯塔系统,项目地址地址为https://github.com/TophantTechnology/ARL)的时候,有两个问题比较困扰我:1.ARL使用Fofa导入数据的时候怎么降重?2.如何自己手动编写Poc?在网上查阅了一些相关资料后,我发现并没有有师傅写的很清晰,于是诞生......
  • OpenHarmony JS和TS三方组件使用指导
    OpenHarmonyJS和TS三方组件介绍OpenHarmonyJS和TS三方组件使用的是OpenHarmony静态共享包,即HAR(HarmonyArchive),可以包含js/ts代码、c++库、资源和配置文件。通过HAR,可以实现多个模块或者多个工程共享ArkUI组件、资源等相关代码。HAR不同于HAP,不能独立安装运行在设备上,只能作......
  • 新版VSC++安装QuantLib量化工具包安装及其使用
    1.下载安装boosthttps://boostorg.jfrog.io/artifactory/main/release/建议安装与当前电脑VS版本年份差不多的boost自行设置安装路径2.去Github下载开源代码QuantLibhttps://github.com/lballabio/QuantLib/releases下载解压3.安装VS安装C++window桌面开发环境!4.打......
  • 代理池的使用
    搭建并使用代理的步骤1搭建免费代理池项目下载地址:https://github.com/jhao104/proxy_pool2使用虚拟环境安装依赖3修改配置文件中的redis配置DB_CONN='redis://127.0.0.1:6379/2'4启动爬虫获取免费代理并存入redispythonproxyPool.pyschedule5启动web服......
  • 使用Java将视频中某一帧抽取为封面图片
    由于业务需求需将视频中的某帧进行截取作为该视频封面,网上太多教程过于复杂麻烦,经本人研究发现可以使用Java调用FFmpeg来进行处理。/***获取指定的视频文件后进行封面截图为png并保存到指定目录**@paramvideoFile视频媒体文件*@paramfileName文件名*/publicS......
  • IDEA使用过程中src文件夹显示不出来的解决方法
    IDEA加载项目没有src目录_idea导入项目没有src-CSDN博客总结:删除本地项目目录中的idea文件夹后重新打开项目......