网页共享的工作原理

Photo by 塞巴斯蒂安·杜米特鲁 on 不飞溅

网络浏览是关于连接人们的，就像诺基亚的标语一样。因此，我们经常有朋友互相分享好奇的页面。

可以通过许多不同的方式共享页面链接，例如 Pigeon Mail，但我想您可能更喜欢一些信使或社交网络应用程序。

应用程序为您的保留而战，这意味着一个人共享的链接应该是好奇的、美丽的和信息丰富的。为此，应用程序会检测您消息中的链接并尝试为其创建预览。

Naked Cake in Apps from https://socialsharepreview.com/

这对您的网站有好处，因为它增加了链接的点击和导航。

一个正确的 HTML 文档已经有一些元标记、标记标题等，它们在带有页面的选项卡上作为标题可见。

 <title>中等的</title>

Medium title

HTML 还具有元标记，例如描述、作者等。

 <meta name="description" content="在其最基本的形式中，Medium 上的故事由标题和正文组成。">

这些标签在主要场景（网页视图）中不可见。它们仅用于元目的，用于预览共享链接、屏幕阅读器等。

每个元标记都有一个名称和内容属性，就像 JavaScript 中的键/值对。

为了改善用户体验，预览链接已使用 开放图协议 .

 <meta property="og:title" content="岩石" />  
 <meta property="og:type" content="video.movie" />  
 <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />  
 <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

但是网络的发展速度比协议要快，而且足够大的应用程序可以拥有扩展的基础 HTML 和开放图形标签，例如， “推特：卡” 或“vk:image”属性。

 ...  
 <meta name="twitter:description" content="In its most basic form, a story on Medium consists of a title and a body text.">  
 <meta name="twitter:site" content="[ @中等的](https://twitter.com/Medium) ">  
 ...

From https://dinojoaocosta.medium.com/how-to-make-twitter-preview-your-website-links-5b20db98ac4f

因此，将链接预览添加到您的站点的简单算法是：

1. 添加 HTML 元标记（标题、描述）；
2. 添加 打开图形元标记 ，尽可能多地为您的网站（您可能不想支持所有场景或没有足够的数据供某人使用，例如视频、音频、文章等）；
3. 创建要维护的应用程序列表；
4. 测试并向这些应用程序添加自定义标签。

如何测试 HTML 预览？

测试 HTML 预览很棘手，因为要测试您的下一个版本的 HTML，您需要在网络中发布此 HTML（机器人无法访问您的本地主机）。

另一方面，如果您只是在生产环境中进行测试，机器人可以缓存您损坏的预览，并且在修复此问题后，您无法为地球上的每个应用程序重置缓存。

如何清除应用程序的 HTML 解析缓存？

为了清除缓存，应用程序通常有自己的 API。但这些都不是标准化的，每个应用程序都有其机制。

所以？

要开发和测试 HTML 链接预览，您可以仅在与您在生产中使用的主机不同的某个主机上发布带有元标记的空 HTML。

工具？

是的！幸运的是，人类创造了扩展。其中一些将您的本地主机的元标记发布到网络一小段时间，例如， 打开图形检查器 .

JavaScript 呢？

社交网络和信使应用程序不会从您的页面执行 JavaScript。因此，如果您使用 SPA（单页应用程序）仅执行 JavaScript 客户端（没有服务器端呈现） - 您由 JavaScript 添加的漂亮元数据对爬虫来说是不可见的。您只能在 HTML 模板中添加一些静态的通用元数据。

这对于一些具有不同“对象”的网页来说是非常糟糕的消息，例如文章、电影、歌曲等，因为每个对象都有其独特的元数据，但会有相同描述和图像的预览！

幸运的是，我们有一些不同的酷解决方案来解决这个问题！

这些解决方案我们将在下一篇文章中考虑！敬请关注！

要在没有客户端 JavaScript 的情况下检查任何网页的 HTML，您可以在 ChromeDevTools ，（尝试 F12）设置（然后尝试 F1），调试器部分 - 禁用 JavaScript 标志。重新加载页面并检查 HTML。

Chrome Dev Tools

资源

• 媒体网
• https://dinojoaocosta.medium.com/how-to-make-twitter-preview-your-website-links-5b20db98ac4f
• https://socialsharepreview.com/
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
• https://ogp.me/

再会！

更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1954/52133102