问题
I have seen that when we put a url of a website, an image appears for that URL. Examples include social media sites Like Google+, Facebook, Instagram. I need to know how to add such an image to my website. Is there a certain tag Or script that should be applied to show that image?
When I share my website link I don't get such a one. I need to know why and how to do it.
回答1:
OG tags are used by these social sites as below:
Site info OG tags Start
<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">
Site info OG tags End
回答2:
Add the following tags to the <head> section of the HTML code of the page you need to share:
<link rel="image_src" href="{image}" />
<meta name="twitter:image" property="og:image" content="{image}" />
And replace {image} with the URL of the page image.
When you add the tags, Social Media sites can still share the page without an image. It happens because sites cache pages data. You need to wait the cache to be cleaned or clean it manually (some sites, e.g. Facebook, provide this possibility; it is a topic for another question).
来源：https://stackoverflow.com/questions/50433001/how-to-customize-the-image-shown-when-posting-a-url-of-a-website-on-social-media