正在从 JS 中获取 URL 元数据

Fetching URL Metadata from JS

大多数社交媒体网站都有一项功能,您可以在其中输入 link,该网站将生成它的 link 预览。请参阅下面来自 Google+

的示例

假设我想构建自己的。我在 Rails 上使用 Ruby 作为 Web 框架,但这无关紧要,因为我想我必须使用 JS 来获取这个 client-side 对吗?

  1. 我在哪里可以找到这些数据?我知道它通常在 <meta> 标签中,但这是标准的吗?当我尝试了几个 link 秒时,只有描述在 <meta> 标签中。图片和标题与元标记中的任何其他内容都不匹配。

  2. 如何异步获取远程文档并解析它的标签?如果有人能给我举个例子,我将不胜感激。

谢谢!

作者可以通过三种常见方式在 HTML 文档中提供此数据(从最不表达到最表达):

  1. head 元素中的元数据: 这是普通的 HTML,即

  2. 微格式: 仍然使用普通的 HTML,但与特定的 class 名称一起使用。 their wiki.

  3. 中描述了所有微格式
  4. 结构化数据: 使用 extending/additional 语法(JSON-LD, Microdata, RDFa, …) and vocabularies (Schema.org, Open Graph Protocol, Dublin Core …)。

您通常会在您的编程语言中找到合适的解析器。

您可能会发现大多数站点都使用开放图谱协议(在 RDFa 中),因为 Facebook 和 Twitter 都使用它。可能后面是 Schema.org(在 JSON-LD/Microdata/RDFa 中),因为这是由主要搜索引擎赞助的。

请注意,2. 和 3. 还允许作者提供有关页面上描述的(或相关的)实体的数据,即并非每个提取的数据都适合 link 预览,因此您必须考虑上下文。