使用Rich Preview元标记作为图像html CSS [英] Using Rich Preview meta tags as images html css
问题描述
当您通过文本，facebook消息或任何主流消息客户端发送链接时，您会注意到它会生成丰富的预览".这基本上是您所链接的网站弹出的图像.
When you send a link via text, facebook message, or any mainstream messaging client you'll notice it generates a "rich preview". This is basically an image that pops up of the website you are linking.
例如，我了解如何设置此属性
I understand how to set this property, for example
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
但是我想知道如何使用它.
but I want to know how to use it.
我要做的是设置一个带有链接表的网站，我希望每个链接不仅是文本链接，而且是正方形图像.我希望像在消息传递客户端中一样，基于链接将这些图像生成为丰富的预览.
What I'm trying to do is setup a website with a table of links and I want each link to not be just a text link, but a square image. I want those images to be generated based on the links as rich previews just like in messaging clients.
(如果有帮助，我想从Google相册中提取图片，所以我希望丰富的预览将是相册的封面，标题将是相册的名称)
(If it helps I'm trying to pull from google photos albums, so I'm hoping the rich preview will be the album cover and the title will be the name of the album)
例如:我想从中获取专辑标题和封面图像 https://photos.app.goo.gl/5VogRQ6CvoVOJKpq1
Ex: I want to obtain, album title, and cover image from https://photos.app.goo.gl/5VogRQ6CvoVOJKpq1
我也想使用标题和描述，但是我确定过程是相同的.
I would also like to use the title and description but I'm sure the process is the same.
推荐答案
像Facebook和Twitter这样的大公司都有自己的蜘蛛，它们会定期抓取Web并查看网站的DOM.如果他们看到相关标签，就会自动生成各自的预览".
The big companies like Facebook and Twitter all have their own spiders that periodically crawl the web looking at the DOM of websites. If they see the relevant tags, they'll generate their respective 'preview' automatically.
从字面上看，您需要做的只是在头部加上正确的<meta>标签.您已经在上面的示例中演示了 OpenGraph 协议，该协议已在大多数网站中使用
Literally all you need to do is have the right <meta> tags in your head section. You've demonstrated the OpenGraph protocol in your sample above, which is used by most sites.
根据OpenGraph的基本标签是:
The basic tags, according to OpenGraph are:
og:title-对象的标题，因为它应该出现在图形中，例如"The Rock".
og:title- The title of your object as it should appear within the graph, e.g., "The Rock".
og:type-对象的类型，例如"video.movie".根据您指定的类型，还可能需要其他属性.
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image-一个图像URL，该URL代表图形中的对象.
og:image - An image URL which should represent your object within the graph.
og:url-您的对象的规范网址，将用作图形中的永久ID，例如http://www.imdb.com/title/tt0117500/.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.
还有很多其他的，尽管这些是您需要的主要内容.
There's a number of others, though those are the main ones that you need.
站点通常会定义自己的前缀.例如，Twitter还使用自定义twitter:前缀来允许 一些扩展功能 .
Sites often define their own prefixes though. Twitter, for example, additionally uses a custom twitter: prefix to allow for some extended functionality.
Facebook有 调试工具 ，提交您的URL，以使他们强行更新其预览，Twitter拥有自己的 卡片验证器 ，这也会强制抓取该网站.
Facebook has a debug tool through which you can submit your URL to have them forcibly update their preview, and Twitter has their own card validator which will also forcibly crawl the site.
只需等待有问题的网站爬网您自己的网站，或通过相应的工具手动提交您的网站，即可制作您的预览.此预览适用于尝试与您的网站进行热链接的任何人，而不仅仅是您作为使用该工具的人.
Simply wait for the site in question to crawl your own website, or submit your site manually through a respective tool, and your preview will be crafted. This preview will apply to anyone who attempts to hotlink to your website, not just you as the person who used the tool.
希望这会有所帮助！
这篇关于使用Rich Preview元标记作为图像html CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
