1
I have a question, I use the meta tags to insert the description of the site, the author, keywords etc. I would like to know, is there any meta tag to define the image of the site? For when for example I am going to share the site on a social network, is displayed this chosen image aggregated with the link, example the print below:
As you can notice when sharing this link or any other image is always displayed an aggregated image, so I wanted to know how I defined this image?
1
As already stated in the comments, the mechanism will depend more on who uses it than it will be a standard in HTML. But there are some patterns used by the web. On my websites, for example, I use Open Graph Protocol to do this.
In it, you basically use the property to define the desired attribute and content to set the value. Each property in Open Graph Protocol usually comes prefixed by og:.
For example, you can use the code below to test this.
<meta property="og:title" content="Wallace Maxters" />
<meta property="og:description" content="Um blog com dicas, tutoriais e informações sobre programação">
<meta property="og:url" content="https://exemplo.com/" />
<meta property="og:image" content="http://exemplo.com/assets/img/bg.jpg" />
<meta property="og:type" content="website" />
Some social networks and some services, such as Whatsapp, Telegram and Slack, usually use this information to assemble the content preview.
If you want to test this while developing your website, you can use the extension Open Graph Preview to help you in this task.
Example:
Specifically answering your question about the image to be displayed, you should use the property called og:image. It defines which image should be used as a preview of the content. Note that the full url has to be placed to work.
Twitter also uses its own metatags for this information on its website. You can check the documentation:
Thank you very much Wallace was able to be very clear and he took away all my doubt about that!!!
Browser other questions tagged html5 meta-tags
You are not signed in. Login or sign up in order to post.
Each network/search engine has its own metatags, just looking up the network documentation. This is not an HTML standard per se. Just look at the source of the pages that have the desired resource and give an inspected, to have a starting point.
– Bacco
@Bacco understood, I thought it was possible to define this more succinctly and standardized!
– WPfan
There are some posts on the site about specific networks, I think, but it makes up for you to search Opengraph from facebook, and Google meta tags to start with (which are even repurposed by third-party stuff). You also have the "related links" in the margin of the question
– Bacco
I think this is the Open Graph Protocol. You can check it out here. This is og:image.
– Wallace Maxters