如何自定义在社交媒体网站上发布网站URL时显示的图像

时间:2018-05-20 08:29:38

标签: html url sharing

我已经看到,当我们放置网站的网址时,会显示该网址的图片。示例包括社交媒体网站,如Google+,Facebook,Instagram。我需要知道如何将这样的图像添加到我的网站。是否应该应用某个标记或脚本来显示该图像?

当我分享我的网站链接时,我不会得到这样一个。我需要知道为什么以及如何做到这一点。

2 个答案:

答案 0 :(得分:1)

这些社交网站使用

OG标签如下:

站点信息OG标签开始

<meta property="og:site_name" content="$site_name" />
<meta property="og:url" content="$site_url" />
<meta property="og:type" content="website" />
<meta name="title" property="og:title" content="$the_title" />
<meta name="image" property="og:image" content="$site_logo"/>
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta name="description" property="og:description" content="$site_description" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" description="@username" />
<meta name="twitter:title" content="$the_title" />
<meta name="twitter:description" content="$site_description" />
<meta name="twitter:image:src" content="$site_logo">
<meta name="twitter:domain" content="$site_url">

站点信息OG标签结束

答案 1 :(得分:0)

将以下标记添加到您需要分享的网页的HTML代码的<head>部分:

<link rel="image_src" href="{image}" />
<meta name="twitter:image" property="og:image" content="{image}" />

并将{image}替换为页面图片的网址。

添加标签时,社交媒体网站仍然可以共享没有图像的页面。这是因为网站缓存页面数据。您需要等待清理缓存或手动清理它(某些网站,例如Facebook,提供这种可能性;这是另一个问题的主题)。