{"id":7140,"date":"2022-11-17T09:30:00","date_gmt":"2022-11-17T08:30:00","guid":{"rendered":"https:\/\/seoski.pl\/?p=7140"},"modified":"2022-11-17T09:30:00","modified_gmt":"2022-11-17T08:30:00","slug":"open-graph-jak-po-co-wdrazac","status":"publish","type":"post","link":"https:\/\/seoski.pl\/en\/seo\/open-graph-as-why-implement\/","title":{"rendered":"Open graph - how and why implement it on your website?"},"content":{"rendered":"Reading time: <\/span> 4<\/span> minutes<\/span><\/span>Time to read the article approx. <\/span> 4<\/span> minutes<\/span><\/span>\n

1. what is open graph and what is its history? Key information<\/a><\/p>\n

2. basic (mandatory) open graph tags<\/a><\/p>\n

  2.1. og:title<\/a><\/p>\n

  2.2. og:url<\/a><\/p>\n

  2.3. og:image<\/a><\/p>\n

  2.4. og:type<\/a><\/p>\n

  2.5. og:description<\/a><\/p>\n

3 Why use open graph tags? What will their implementation give you?<\/a><\/p>\n

4 How are Open Graph tags added?<\/a><\/p>\n

  4.1 What does it look like to set up Open Graph on WP via Yoast?<\/a><\/p>\n

Social media is an important channel that can attract a lot of traffic to your website. Therefore, it is worth taking care of, among other things, how the content and links you share are presented on social media. These are controlled by the open graph protocol. Find out more about it in this article and stay one step ahead of the competition.<\/strong><\/p>\n

What is open graph and what is its history? Highlights<\/h2>\n

It has probably happened to you more than once to see a social media post in which a link<\/a> to a page where the open graph has not been implemented. Well, such posts don't look good... They definitely don't encourage people to click the link, because the preview displays a random part of the page. Everything can be changed by a few lines of code. Introducing open graph to you!<\/p>\n

The open graph meta tags are an internet protocol that was originally developed and introduced by Facebook in 2010<\/strong> to standardise the use of metadata on a website to represent the content of the page (Facebook<\/a> Open Graph). Facebook was soon followed by other social media.<\/p>\n

In the simplest terms, using open graph, you can tell social networks such as Facebook, Twitter, Pinterest, LinkedIn and Google+, what information is to be displayed when you or anyone else shares a link from your site.<\/strong><\/p>\n

You already know what open graph does. Now it's time to look at the technical side of it. From this point of view, it is simply a piece of code, located in the section of a given web page. It is preceded by the \"og:\" property.<\/p>\n

Unlike other meta tags, \"og:\" is not placed for search engine robots. The purpose of the tag is to tell the social network what to display when you add a link to the social network. Just as search engines visit your site and look for the data they need to display your site in search results, social networks do the same by looking for their own tags.<\/p>\n

Basic (mandatory) open graph tags<\/h2>\n

You already know what open graph tags are, it's time to learn about the types available! Of all of them, only four are required for a social network to \"understand\" your page, but there are a few additional ones that are sometimes helpful. Let's take a look at the most important ones.<\/p>\n

\"Man<\/span><\/p>\n

og:title<\/strong><\/h3>\n

Like the title metatag, in which you inform search engines of the title of the SEO<\/a> of your page, og:title is its title, which should display on social media.<\/p>\n

Your og:title should be clear, with no branding or mention of the domain itself. Ideally, its length should not exceed 60 characters.<\/p>\n

Example of use:<\/strong><\/p>\n

<meta property="og:title" content<\/a>=\"Why implement open graph on the website\" \/>.<\/p>\n

og:url<\/strong><\/h3>\n

This tag indicates which page the user will be referred to when they click on the post in question. Use the canonical address URL<\/a>, this will help count all the shares, likes etc.<\/p>\n

Example of use: <\/strong><\/p>\n

<meta property="og:url<\/a>\" content=\"website URL\" \/><\/p>\n

Read also:<\/strong>Canonical link - what is it and when to use it?<\/a><\/p>\n

og:image<\/strong><\/h3>\n

This tag is responsible for what image will be associated with the published content. Note that this is probably the most relevant open graph tag, as it takes up the most space in the social channel<\/strong>. Be sure to take care of it, otherwise the portal will select a random image from the URL itself, and it could be a banner ad or some other incomprehensible, irrelevant graphic for social media browsers.<\/p>\n

Example of use:<\/strong><\/p>\n

.<\/p>\n

og:type<\/strong><\/h3>\n

This tag identifies the type of object being shared (e.g. article, website, video). You will find a full list of object types HERE<\/a>.<\/p>\n

Example of use:<\/strong><\/p>\n

.<\/p>\n

og:description<\/strong><\/h3>\n

This is a tag similar to the meta description, which is the description you create for search engines. You can create original text or use the one you use in the meta description to make it display on social media. Facebook recommends that the description is 2-4 sentences long, but it's better to write shorter descriptions to avoid being clipped.<\/p>\n

Example of use:<\/strong><\/p>\n

.<\/p>\n

Details of all types of open graph tags can be found, for example, in the Facebook's official documentation<\/a>.<\/p>\n

Why use open graph tags? What will their implementation give you?<\/h2>\n

Although the use of open graph tags is not considered a ranking factor and does not directly improve a page's search engine position, it is worth using them. Why? Because appropriately optimised social media posts will certainly be more likely to be clicked on by users<\/strong>. This in turn will translate into more traffic to your website. Remember, too, that social media engagement linked to your activities is a good signal to Google. <\/strong><\/p>\n

How are Open Graph tags added? <\/strong><\/h2>\n

These are located in the section of the website and can be entered manually. However, if your site is based on one of the popular content management systems, there is a simpler way. Quite a few plug-ins have been created that make this process much easier.<\/p>\n

Here they are:<\/strong><\/p>\n