如何在社交/消息传递Web应用程序中嵌入HTML页面?

时间:2017-06-02 19:48:07

标签: html5 social microdata

我很难找到有关如何在社交/消息传递Web应用程序中嵌入HTML页面的相关信息。

让我们用现实的例子来澄清我的问题:今天通过在Facebook,Slack或Discord等网络应用程序中粘贴其网址来分享视频,音乐或文章是非常普遍的。 Web应用程序的基本行为是将URL文本转换为HTML链接,以便用户无需复制/粘贴它以打开链接页面。

Web应用程序的更高级行为是自动嵌入链接页面的预览。在文章的情况下,人们通常可以阅读其标题和摘要,也许是一张图片。例如,对于一段音乐,来自Soundcloud的嵌入式播放器可直接供用户使用。来自Youtube,Vimeo等的视频也是如此。

我试图通过查看Youtube / Soundcloud的HTML源代码/ Web应用程序中的任何页面和DOM结构来了解一些底层机制。似乎某些特殊标签提供了有关如何嵌入页面的信息,因此Web应用程序知道链接页面是可嵌入的,并且它从包含页面嵌入版本的特殊URL动态创建<iframe>

以下是一些我怀疑要负责制作可嵌入页面的标签:

<meta itemprop="embedURL" content="..." />

<meta property="twitter:player" content="...">
<meta property="twitter:player:height" content="450">
<meta property="twitter:player:width" content="435">
<meta property="twitter:image" content="preview.jpg">
<meta property="twitter:card" content="player">

<link rel="alternate" type="text/xml+oembed" href="...">

<div itemscope itemid="" itemtype="http://schema.org/VideoObject">
  <link itemprop="url" href="https://www.youtube.com/watch?v=...">
  <meta itemprop="name" content="...">
  <meta itemprop="description" content="...">
  <link itemprop="thumbnailUrl" href="preview.jpg">
  <link itemprop="embedURL" href="https://www.youtube.com/embed/...">
  <meta itemprop="playerType" content="HTML5 Flash">
  <meta itemprop="width" content="1280">
  <meta itemprop="height" content="720">
  <meta itemprop="genre" content="Music">
</div>

然而,我没有找到关于该机制的任何详细文档/说明/规范/标准化,因此我可以将自己的页面嵌入。

你帮我找到了吗?或者告诉我关于该主题谷歌的正确关键词?

它也可能与语义网或微观数据有关,但无论如何我真的需要一些指导。

0 个答案:

没有答案