Meta tags, is there to set the image of the site?

I have a question, I use the meta tags to enter the description of the site, the author, keywords etc. I would like to know, is there any meta tag to set the website image? For when for example I am sharing the site in a social network, is displayed this image chosen aggregated with the link, example the print below: insert the description of the image here

As you may notice when sharing this link or any other is always displayed an aggregate image, dai wanted to know how did I define this image?

Author: WPfan, 2020-12-24

1 answers

Open Graph Protocol

As already said in the comments, the engine will depend more on who uses it than this being a standard in HTML. But there are some patterns used by the web. On my sites, for example, I usually use the Open Graph Protocol to do this.

In it, you basically use property to set the desired attribute and content to set the value. Every property in the 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 services, such as whatsapp, telegram, and slack, often use this information to preview content.

If you want to test this while developing your website, you can use the Open Graph Preview extension to help you with this task.

Example:

Open Graph Preview

About the picture

Specifically answering your question about the image to be displayed, you must 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 Cards

Twitter also uses its own metatags for this information on its website. You can check out the documentation:

 1
Author: Wallace Maxters, 2020-12-24 19:41:04