分享链接到外网软件,og等meta动态展示值

本文探讨了如何利用Open Graph (OG) 协议实现动态内容在社交媒体上的富文本预览,针对前后端分离项目的特殊挑战提出了解决方案。
部署运行你感兴趣的模型镜像

前段时间公司一个海外项目需要把链接分享到某App,某book等软件上,分享到聊天框的时候想要展示富文本(图片,标题,简介),如果在微信和qq上是有对应的api直接调取传参即可,但是外网的几个软件则需要Open Graph Protocol协议,也就是

<meta property="og:type" content="website">
<meta property="og:title" content="xxx">
<meta property="og:image" content="https://xxx.png"> 
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="400">
<meta property="og:description" content="xxxxxxxx">

如果要展示的东西是静态的,那么如上即可,app分享的链接就是对应的页面,那么问题来了,动态展示的话这样操作是无效的,因为如今大部分项目都是前后端分离,og等meta标签是提供给爬虫去爬的,而爬虫有一个特点是不会执行你的js脚本,单靠前端赋值那么你的动态就会失效,最终爬出来的是空白,因此要解决这个问题就要从服务器方面入手,我用的方法是,分享的链接改为调取后台的接口,接口返回一个只含meta标签和一段跳转原分享页面的脚本内容,就是说展示给爬虫和最终打开看到的不是一个页面。

 当然,要是你的项目是前后端不分离,或者使用ssr的,可以忽略了,因为你基本不会遇到这个问题

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

### 改变 Meta Itemprop 和 Meta Property 标签对 SEO 和结构化数据的影响 改变 `meta itemprop` 和 `meta property` 标签的会对网页的搜索引擎优化(SEO)和结构化数据产生多方面的影响。以下是具体分析: #### 1. **搜索引擎抓取与索引** 搜索引擎通过爬虫程序抓取网页内容,并解析其中的元数据以生成搜索结果摘要。如果更改了 `meta itemprop` 或 `meta property` 的,可能会导致以下变化: - 搜索引擎生成的标题、描述或缩略图可能发生变化[^1]。 - 如果新的不符合规范(例如 Schema.org 标准),搜索引擎可能无法正确理解网页内容,从而降低其在搜索结果中的排名[^3]。 #### 2. **用户点击率(CTR)** `meta property="og:title"` 和 `meta property="og:description"` 等标签通常用于社交媒体分享时生成预览信息。这些标签的会影响用户在社交媒体上的第一印象,进而影响点击率。例如: - 更改 `og:title` 可能会改变社交媒体分享时显示的标题[^2]。 - 更改 `og:image` 或 `og:description` 会影响分享卡片的视觉效果和吸引力。 #### 3. **结构化数据的有效性** 结构化数据是搜索引擎理解网页内容的重要方式之一。如果修改了 `itemprop` 或 `property` 标签的,可能会导致以下问题: - 如果新不符合 Schema.org 定义的标准,结构化数据可能无效,从而影响富媒体搜索结果的展示[^1]。 - 使用 JSON-LD 格式替代部分元数据可以提高兼容性和可维护性,但需要确保两者同步更新以避免冲突[^1]。 #### 4. **用户体验** 合理的 `meta` 标签可以提升用户的搜索体验。例如: - 更准确的 `meta name="description"` 可以帮助用户快速了解网页内容[^3]。 - 不恰当的修改可能导致误导性描述,降低用户体验和信任度。 #### 示例代码 以下是正确的 `meta` 标签设置示例,供参考: ```html <meta itemprop="name" content="网站名稱或標題"> <meta itemprop="image" content="要顯示的縮圖網址"> <meta itemprop="description" content="網頁描述"> <meta property="og:title" content="網站名稱或標題"> <meta property="og:url" content="網址"> <meta property="og:image" content="要顯示的縮圖網址"> <meta property="og:description" content="網頁描述"> ``` ### 注意事项 - 在修改 `meta` 标签之前,建议使用工具(如 Google 结构化数据测试工具)验证当前配置是否有效[^1]。 - 确保所有相关标签保持一致性,以避免混淆搜索引擎爬虫程序[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值