如何使用普通的 html 和 css 添加 url 与其图像的链接或使用其图像获取？ （与社交媒体中的元数据共享链接）
[英]How to add url link with its image or fetching with its image using normal html and css? (Share link with metadata in social media)
问题描述
I want to do the thing which is shown in this image
我想做这张图片中显示的事情
If you see in the above image the container contains the link URL and image which is fetched from that URL... How it is achieved using HTML and CSS? If you see in the above image the container contains the link URL and image which is fetched from that URL... How it is achieved using HTML and CSS?
1 个解决方案
解决方案1
2 已采纳 2020-07-04 13:48:38
Well, to achieve such a thing you need to use the open graph protocol meta tags in your HTML <head> , to enable social media graph read your metadata.好吧，要实现这样的事情，您需要在 HTML <head>中使用开放图协议元标记，以启用社交媒体图读取您的元数据。 There are several tags that are available within the open graph protocol but the main ones are:开放图形协议中有几个可用的标签，但主要的标签是：
-
og:title: The title of your object as it should appear within the graph, eg, "The Rock".og:title：object 的标题，它应该出现在图表中，例如“The Rock”。 -
og:type: The type of your object, eg, "video.movie".og:type：object 的类型，例如“video.movie”。 Depending on the type you specify, other properties may also be required.根据您指定的类型，可能还需要其他属性。 -
og:image: An image URL which should represent your object within the graph.og:image：图像 URL 应该代表图中的 object。 -
og:url: The canonical URL of your object that will be used as its permanent ID in the graph, eg, "http://www.imdb.com/title/tt0117500/".og:url：object 的规范 URL 将在图中用作其永久 ID，例如，“http://www.imdb.com///
<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>
NOTE From the moment that you add these meta tags to your HTML <head> it may take a while (1-2 weeks) until they get read by social media graphs.注意从您将这些元标记添加到 HTML <head>的那一刻起，可能需要一段时间（1-2 周）才能被社交媒体图表读取。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.