html - 如果用户将链接添加到状态消息，Facebook 会从网站加载哪些内容

Question

我正在开发一个新站点 ATM，它具有传统图像 + div 和帖子文本结构。当用户在 Facebook 状态更新中添加指向该站点的链接时，Facebook 仅显示该链接，而不会显示该站点的文本或图像。如果用户向状态消息添加链接，我想知道 Facebook 从站点加载了哪些内容？选择了哪些 html 标签以及如何更改我的 HTML 以便 Facebook 加载预览图像和文本。

其他网站:

我的网站:

Answer 1

迟到总比不到好...

它在 Facebook documentation 中:

In order to make sure that the preview is always correctly populated, you should add the tags shown below to the element in your HTML code. If you don't tag your page, Facebook Share will grab the title of your page as specified in the tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the element in your page:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

So an example news story could have the following:

<meta property="og:title" content="Smith hails 'unique' Wable legacy"/>
<meta property="og:description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />

As shown, og:title contains the preview title, og:description contains the preview summary and og:image contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out.

The title and description tags are the minimum requirements for any preview, so make sure to include these two.

The og:image is the URL to the image that appears in the Feed story. The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.