This is how it is implemented in learn.javascript.ru , when you insert a link into messages, for example, or in a post on a wall:
enter image description here
And so on my blog:
enter image description here
Apparently it is somewhere in the headers html is prescribed for the site to be indexed by robots, but did not find information about this. How is this done?

    2 answers 2

    You need to use the OPEN GRAPH protocol as an example (for different systems)

     <head> <meta property="og:type" content="profile"/> <meta property="profile:first_name" content="Имя"/> <meta property="profile:last_name" content="Ѐамилия"/> <meta property="profile:username" content="Ник"/> <meta property="og:title" content="НазваниС страницы"/> <meta property="og:description" content="ОписаниС"/> <meta property="og:image" content="https://website.com/image250X250.png"/> <meta property="og:url" content="http://www.site.com"/> <meta property="og:site_name" content="НазваниС сайта"/> <meta property="og:see_also" content="http://www.website.com"/> <meta property="fb:admins" content="Facebook_ID"/> <meta itemprop="name" content="НазваниС сайта"/> <meta itemprop="description" content="ОписаниС сайта"/> <meta itemprop="image" content="https://website.com/image250X250.png"/> <meta name="twitter:card" content="summary"/> <!-- Π’ΠΈΠΏ ΠΎΠΊΠ½Π° --> <meta name="twitter:site" content="НазваниС сайта"/> <meta name="twitter:title" content="НазваниС страницы"> <meta name="twitter:description" content="ОписаниС"/> <meta name="twitter:creator" content="Π°Π²Ρ‚ΠΎΡ€"/> <meta name="twitter:image:src" content="https://website.com/image250X250.png"/> <meta name="twitter:domain" content="website.com"/> </head>

      As far as I know, such things are set through meta tags for micromarking. The image is set via itemprop="image" :

       <meta itemprop="image" content="http://your-link.png">