HTML问题:如何实现分享URL预览?
zhezhongyun 2024-12-08 20:01 55 浏览
前端功能问题系列文章，点击上方合集↑
序言
大家好，我是大澈！
本文约2100+字，整篇阅读大约需要3分钟。
本文主要内容分三部分，如果您只需要解决问题，请阅读第一、二部分即可。如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。
感谢关注微信公众号：“程序员大澈”，然后加入问答群，从此让解决问题的你不再孤单！
1. 需求分析
为了提高用户对页面链接分享的体验，需要对分享链接做一些处理。
以 Telegram(国外某一通讯软件) 为例，当在 Telegram 上分享已做过处理的链接时，它会自动尝试获取链接的预览信息，包括标题、描述和图片。
如此当接收者看到时，可以立即获取到分享链接的一些重要信息。这有助于接收者更好地了解链接的内容，决定是否点击查看详细内容。
2. 实现步骤
2.1 实现前的说明
对于URL分享预览这个功能问题，在项目中挺常用的，只不过今天我们是以一些框架分享API的底层原理角度来讲的。
实现这种功能的关键，是在分享的链接中嵌入适当的元数据信息，应用软件会自动解析，请求分享链接的预览信息，并根据返回的元数据生成预览卡片。
对于国内的应用软件，目前我试过抖音，它可以实现分享和复制粘贴都自动解析，而微信、QQ等只能实现分享的自动解析。
对于国外的应用软件，我只实验过Telegram，它可以实现分享和复制粘贴都自动解析，但我想Facebook、Twitter、Instagram这些应用应该也都是可以的。
2.2实现代码
实现URL链接的分享预览，你可以使用Open Graph协议或Twitter Cards，然后在 HTML 的<head>标签中，添加以下meta标签来定义链接预览的信息。
使用时，将所有meta全部复制过去，然后根据需求进行自定义即可。
还要注意两点，确保你页面的服务器正确配置了 SSL 证书，以及确保链接的URL有效（即：服务器没有做白名单限制）。
<head>
<!-- Open Graph 协议 -->
<meta property="og:title" content="预览标题">
<meta property="og:description" content="预览描述">
<meta property="og:image:width" content="图片宽度">
<meta property="og:image:height" content="图片高度">
<meta property="og:image" content="预览图片的URL">
<meta property="og:url" content="链接的URL">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="预览标题">
<meta name="twitter:description" content="预览描述">
<meta property="twitter:image:width" content="图片宽度">
<meta property="twitter:image:height" content="图片高度">
<meta name="twitter:image" content="预览图片的URL">
<meta name="twitter:url" content="链接的URL">
</head>下面我们做一些概念的整理、总结和学习。
3. 问题详解
3.1什么是Open Graph协议？
Open Graph协议是一种用于在社交媒体平台上定义和传递网页元数据的协议。它由 Facebook 提出，并得到了其他社交媒体平台的支持和采纳。Open Graph 协议旨在标准化网页上的元数据，使网页在社交媒体上的分享和预览更加一致和可控。
通过在网页的 HTML <head> 标签中添加特定的 meta 标签，使用 Open Graph 协议可以定义和传递与网页相关的元数据信息，如标题、描述、图片等。这些元数据信息可以被社交媒体平台解析和使用，用于生成链接预览、分享内容和提供更丰富的社交图谱。
使用 Open Graph 协议，网页的所有者可以控制链接在社交媒体上的预览内容，确保链接在分享时显示的标题、描述和图片等信息准确、有吸引力，并能够准确传达链接的主题和内容。这有助于提高链接的点击率、转化率和用户体验。
Open Graph 协议定义了一组标准的 meta 标签属性，如 og:title、og:description、og:image 等，用于提供链接预览所需的元数据信息。通过在网页中添加这些 meta 标签并设置相应的属性值，可以实现链接预览在社交媒体平台上的一致展示。
需要注意的是，Open Graph 协议是一种开放的标准，并不限于 Facebook 平台。其他社交媒体平台，如 Twitter、LinkedIn 等，也支持使用 Open Graph 协议定义和传递网页元数据，以实现链接预览的一致性。
3.2 什么是Twitter Cards？
Twitter Cards 是一种由 Twitter 推出的功能，它允许网站所有者在他们的网页上定义和传递特定的元数据，以便在 Twitter 上分享链接时生成更丰富和吸引人的预览卡片。通过使用 Twitter Cards，网页链接在 Twitter 上的分享可以展示标题、描述、图片、链接和其他相关信息，以提供更具吸引力和信息丰富的链接预览。
Twitter Cards 提供了多种类型的卡片，以适应不同类型的内容和需求。以下是 Twitter Cards 的一些常见类型：
- Summary Card：Summary Card 类型的卡片包含一个标题、描述和可选的图片。它适用于分享文章、博客帖子等内容。
- Summary Card with Large Image：Summary Card with Large Image 类型的卡片与 Summary Card 类型类似，但图片尺寸更大，更突出地展示在卡片上。
- App Card：App Card 类型的卡片用于分享移动应用程序的信息。它包含应用的名称、图标、描述和下载按钮，以便用户可以直接从预览卡片中下载应用。
- Player Card：Player Card 类型的卡片用于分享包含媒体播放器的内容，如音频文件、视频等。它允许在预览卡片上直接播放媒体内容。
通过在网页的 HTML <head> 标签中添加特定的 meta 标签，使用 Twitter Cards 可以定义和传递与链接预览相关的元数据信息，如标题、描述、图片、链接等。这些元数据信息将被 Twitter 解析和使用，用于生成链接预览卡片。
使用 Twitter Cards 可以使链接在 Twitter 上的分享更加吸引人和信息丰富，提高链接的点击率和用户参与度。它为网站所有者提供了更多控制链接在 Twitter 上展示的能力，并提供了一种更好的方式来呈现他们的内容。
结语
建立这个平台的初衷：
- 打造一个仅包含前端问题的问答平台，让大家高效搜索处理同样问题。
- 通过不断积累问题，一起练习逻辑思维，并顺便学习相关的知识点。
- 遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。
感谢关注微信公众号：“程序员大澈”，然后加入问答群，从此让解决问题的你不再孤单！
相关推荐
- Python入门学习记录之一:变量_python怎么用变量
-
写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...
- python变量命名规则——来自小白的总结
-
python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...
- Python入门学习教程:第 2 章 变量与数据类型
-
2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...
- 绘制学术论文中的“三线表”具体指导
-
在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...
- Python基础语法知识--变量和数据类型
-
学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...
- 一文搞懂 Python 中的所有标点符号
-
反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...
- Python变量类型和运算符_python中变量的含义
-
别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...
- 从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序
-
在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...
- Python中下划线 ‘_’ 的用法，你知道几种
-
Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...
- 解锁Shell编程:变量_shell $变量
-
引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...
- 一文学会Python的变量命名规则!_python的变量命名有哪些要求
-
目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...
- 更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for
-
src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...
- C++第五课:变量的命名规则_c++中变量的命名规则
-
变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....
- Rust编程-核心篇-不安全编程_rust安全性
-
Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...
- 探秘 Python 内存管理:背后的神奇机制
-
在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- opacity 属性 (32)
- transition 属性 (33)
- 1-1. 变量声明 (31)