HTML问题:如何实现分享URL预览?
zhezhongyun 2024-12-08 20:01 21 浏览
前端功能问题系列文章，点击上方合集↑
序言
大家好，我是大澈！
本文约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 上展示的能力，并提供了一种更好的方式来呈现他们的内容。
结语
建立这个平台的初衷：
- 打造一个仅包含前端问题的问答平台，让大家高效搜索处理同样问题。
- 通过不断积累问题，一起练习逻辑思维，并顺便学习相关的知识点。
- 遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。
感谢关注微信公众号：“程序员大澈”，然后加入问答群，从此让解决问题的你不再孤单！
相关推荐
- 字体缩放(方式一)（字体缩放150%怎么做）
-
通过元素宽度和字数计算得到缩放简单实现如下：/***字体最大为视觉要求大小(maxFontSize)；超出缩小字体显示，最小为minFontSize；最小字体时超出部分使用圆点(...);*p...
- 网页世界隐藏的神秘代码语言，竟能这样改变布局
-
CSS基础：选择器与属性CSS（CascadingStyleSheets）是用于控制网页外观的一门样式表语言。它通过定义HTML元素的显示方式来增强网页的表现力。CSS的选择器允许开发者精确地定位...
- CSS属性值计算过程详解（css属性用来定义元素计算）
-
在CSS中，即使某些属性没有显式声明，浏览器也会通过**属性值计算过程**为每个元素的所有属性赋予最终值。这一过程分为四个关键步骤，以下将逐一解析。1.确定声明值浏览器首先检查所有**直接应用**到...
- 软网推荐:找回调整Windows 10字号功能
-
之前的系统，从WindowsXP到早期版本的Windows10，均有字体大小调整功能，但从创意者版Windows10以来，取消了之前的设置选项，取而代之的是自定义缩放比例设置。使用这个功能调整过...
- Excel中如何设置文本框属性，实例代码讲解
-
Excel不仅可以对数据进行处理，而且也可以图形化数据，直观显示数据表达的内容。本节介绍一个很重要的对象，Characters，字符对象，使用Characters对象可修改包含在全文本字符串中的任...
- CSS 字体样式（css中字体）
-
本节我们来讲字体样式，之前我们学习HTML的时候学过一些用于字体加粗、倾斜的标签，但是使用标签来实现的效果肯定没有我们通过CSS中的样式来的方便。接下来我们会给大家介绍下面这几个属性的使用：通...
- PC网站建设必备代码知识:HTML基础与应用技巧
-
在PC网站建设的相关课程里，代码扮演着至关重要的角色。只有熟练运用正确的代码，我们才能打造出功能完善、用户体验出色的PC网站。接下来，我会详细讲解在PC网站建设环节中必须了解的代码知识。HTML基础代...
- 让你大跌眼镜的疯狂 HTML 和 CSS 技巧
-
今天，分享一个让你大开眼界的技巧。通过使用这个技巧，你可以将整个网页变成一个CSS编辑器。没错，你从未见过这种方法。当我第一次尝试时，我完全被震惊到了。现在，让我们开始吧！步骤1首先，创建一个基础的...
- jQuery EasyUI使用教程:创建一个链接按钮
-
jQueryEasyUI最新版下载>本教程主要为大家展示如何使用jQueryEasyUI创建一个链接按钮。通常情况下，使用“button/”元素来创建一个按钮；使用“a/”元素来创建链接按钮...
- React 19 有哪些新特性?（react100）
-
如果你对React18还不熟悉，欢迎阅读之前的文章《React18全览[1]》最近React发布了V19RC版本，按照惯例，我们对React19的新特性进行一次深度的体验学习...
- Java注解探秘:为什么@PostConstruct能解决你的初始化难题?
-
你是否在Spring项目中遇到过这样的困扰：明明依赖注入已经完成，但某些配置就是无法正常加载？手动调用初始化方法又容易引发空指针异常？这就是@PostConstruct注解大显身手的时候了！@Post...
- AI驱动的表单自动填写（ai置入表格）
-
我们都同意，填写表格是一项枯燥且耗时的任务。如果我们可以创建一个可以为我们填写表格的AI助手，让我们将时间投入到更有建设性的任务中，那会怎样？AI助手将能够通过调用以表单字段为参数的函数来填写表...
- 从零到一:小程序设计新手如何快速上手?
-
开发环境搭建对于小程序设计新手而言，搭建合适的开发环境是首要任务。以小程序为例，其官方提供了功能强大的开发工具——开发者工具。首先，新手需前往官方开发者平台，在页面中找到“工具下载”板块，根据...
- JavaSwingGUI从小白到大神-6(续)（java从小白到大牛怎么样）
-
接上一篇《JavaSwingGUI从小白到大神-6》，因本篇文章3万多字，头条一篇发不完，只能分开发。同事查询面板：CompanyFind.javapublicclassCompanyFind{...
- C# winform界面假死（c#程序假死）
-
针对C#WinForm界面假死问题，以下是分步解决方案：1.使用异步编程（async/await）将耗时操作移至后台线程，保持UI线程响应。步骤：将事件处理函数标记为async。使用Task....
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML中如何键入空格 (27)
- HTML常用标签 (29)
- 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)