Meta tags for social networks. Beautiful reposts and snippets of links. Users exchange links on social networks and instant messengers. Websites and applications create a beautiful snippet about the page to which these links point. You can improve the appearance of this block and increase its clickability. This will allow you to get more traffic and increase the visibility of your site.
Open Graph
In addition to personal correspondence, a link to your site can be placed in a group or on a wall. Therefore, it is important to take care of the appearance of the snippet in advance.
The components that will make up the snippet are specified using meta tags in the open graph format. They should be placed in the ‘
` section.<meta property="og:type" content="website" />
<meta property="og:title" content="Page title" />
<meta property="og:description" content="Page og:description" />
<meta property="og:image" content="https://website.com/image1200х630.png " />
<meta property="og:url" content="http://www.site.com" />
<meta property="og:site_name" content="Site name" />
The og:type tag is the page content type. The default is `website’. The og:title tag is the snippet title. Must contain a title no longer than 95 characters. The og:description tag is the snippet description. Must contain a description title of no more than 297 characters. The og:image tag must point to a square image with a size of at least 1200x630 pixels. og tag:the url of the canonical link to the page. The user can post a link with UTM tags and a hash string. You can specify a canonical URL in this parameter. Tag og:site_name is the name of your site.
You can test the page using the official tool from Facebook* https://developers.facebook.com/tools/debug. Official documentation [https://developers .facebook.com/docs/sharing/webmasters/](https://developers.facebook.com/docs/sharing/webmasters / “Facebook’s official Open Graph documentation.”)
Website Pinterest.com It also uses the Open Graph format. You can test the page using the official tool from Pinterest [https://developers.pinterest.com/tools/url-debugger/](https://developers.pinterest.com/tools/url-debugger / “The official tool from Pinterest.”). Official documentation [https://developers.pinterest.com/docs/rich-pins/articles/](https://developers.pinterest.com/docs/rich-pins/articles / “Official Open Graph documentation from Pinterest.”)
To set the content for displaying a snippet on Twitter, place the following tags in the ~
section~:<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@site_account" />
<meta name="twitter:title" content="Page title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:creator" content="@author_account" />
<meta name="twitter:image:src" content="https://website.com/image1024x512.png" />
The twitter:card tag is set to summary by default.
The twitter:site tag is an optional parameter that links to the site’s twitter account.
Twitter tag:title — snippet title. Must contain no more than 70 characters of text.
Twitter tag:description — snippet description. Must contain no more than 200 characters of text.
The twitter:creator tag is an optional parameter that links to the Twitter of the author of the page content.
The twitter tag:image:src should point to an image no larger than 5Mb.
You can test the page using the official tool from Twitter https://cards-dev.twitter.com/validator . Official documentation https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
A little trick: You can update the preview image. To do this, follow these steps: use the page testing tool for the link where you want to update the image, then open the window for adding a new tweet and paste the link there, wait for the preview to load (if you see the old version, then that’s fine.). It’s not necessary to publish a tweet. After a while, twitter will update the link preview for all already published tweets.
Messengers, Bookmarks, RSS aggregators, etc.
There is also a set of basic meta tags that are used not only by various programs, but also by search engines. Place the following meta tags in the ~
section~:<meta itemprop="name" content="Page title" />
<meta itemprop="description" content="Page description" />
<meta itemprop="image" content="https://website.com/image800x600.png" />
The itemprop=”name” tag must contain text less than 140 characters long. The itemprop=”name” tag must contain text less than 185 characters long. The itemprop=”name” tag must point to an image with a size of at least 800x600 pixels.
Using these meta tags, your site will look attractive not only on social networks, but also in instant messengers and various programs.
*The social network is banned on the territory of the Russian Federation