代码之家 › 专栏 › 技术社区 › Hooman Bahreini

在HTML中添加指向外部网站的链接及其摘要

html javascript

Hooman Bahreini · 技术社区 · 7 年前

在Facebook中,当我添加一个指向某个网站的链接时,它会自动从外部网站带来一些概要(文本和图像),并将其添加到页面…

像这样:

怎么能做到?我只是不知道从哪里开始,也不知道在谷歌上找到一个关于这个的教程。

1 回复 | 直到 7 年前

Tyler Roper 7 年前

你要找的是 打开图形元标记 . 把这些放在 <head> 然后,Facebook可以使用这些信息生成有用的预览。

要将网页转换为图形对象,需要向网页中添加基本元数据。我们已经将协议的初始版本建立在RDFA上,这意味着您将添加 <meta> 中的标签 <头& 你的网页。每个页面所需的四个属性是:

OG:标题 -对象的标题,如“岩石”。

OG:类型 -对象的类型,例如“video.movie”。根据您指定的类型,还可能需要其他属性。

OG:图像 -应该表示图形中对象的图像URL。

OG:URL -对象的规范URL,将用作其在图形中的永久ID,例如“ http://www.imdb.com/title/tt0117500/ “。

例如,以下是IMDB上Rock的开放图形协议标记:
<html prefix="og: http://ogp.me/ns#">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
    <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
    ...
  </head>
  ....
</html>

以上摘录以及其他属性和信息可在此处找到: The Open Graph protocol .

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前