What is Open Graph markup and how to implement it

[mostakimvip06]

Open Graph markup is needed so that the site looks good when reposted on social networks. Today we will tell you more about its features, how to use it and how to implement it to attract traffic to the site.
Why do we need Open Graph markup?
One way to get new visitors to your site is to place sharing buttons. Visitors to your site will be able to repost on social networks, and new visitors will come through them.

This is all well and good, but it may not work if the reposted post is unattractive. And it will be if Open Graph markup is not set up.

Now, imagine that your client sends her friend a link recommending your manicure courses. In general, the lack of markup is not a big deal, she will be able to share the link. But if there is no markup, any service will create it itself using meta tags. However, in this case, the image that is placed first on the page will be taken for the preview, most often it is the company logo, the Title content will be taken for the title, and the Description tag will be taken for the description .

You will get something like this:

retwwas.png

Something came out in the end, but it could have been more beautiful . It's probably israel whatsapp data even a bit offensive if when reposting manicure courses, it shows not a beautiful photo of nails or the learning process, but a logo in not the best quality or in the wrong location.

And it could be like this:

hbfvdas.png

Or like this:

asaff.png

Therefore, we recommend implementing Open Graph markup on your website, especially on pages that may be frequently shared: services, rates, promotions, and so on.

Customization Features
For micro-markup to work, you need to write additional tags in the code blocks. They are the ones that participate in the process of creating a post preview.

Here are the main tags:

og:type . Content type. This could be an article, a movie, an image, a person's profile.
og:title . Page title. Similar to title.
og:url . The email address of the page.
og:image . The address of the image used for the preview.
Let's pay attention to the last tag settings, as there are some nuances here. Different networks have different previews and image parameters. If your company has VK , Twitter and Odnoklassniki , it is better to specify tags for each network: vk:image , twitter:image , ok:image . Each will "take" its own tag when reposting.

So, popular social networks recommend using the following image sizes :

VK . Minimum size is 510x228 pixels.
Twitter . Any size is acceptable for a post, but the weight should not exceed 5 MB.
Odnoklassniki . The maximum image size for a post is 1680x1680 px. In the feed, images are automatically compressed to 548x411 px.
There are several additional tags:

og:description . A short description of the object, 1-2 sentences long.
og:site_name . The name of the site (not the URL).
og:video . The URL of a video file that is related to the described object.
og:audio . The URL of an audio file that is associated with the object being described.
og:locale . Specifies the language used on the site, as well as its location.
og:locale:alternate . A list of other languages ​​in which the page can be displayed (for multilingual web resources, an unlimited number of secondary languages ​​can be specified).
Example of use
And so, you decided to post a video on the site with a lesson on the same manicure courses. Let's look at one example of using the OpenGraph protocol.