What is OpenGraph markup?
- What is OpenGraph?
- OpenGraph markup flavors.
- Basic OpenGraph Metadata
- How it looks on the example of our site:
- Example of additional OpenGraph tags
- OpenGraph Twitter
- Example of embedded Twitter Card markup on OkayCMS website
- And at the end we give the complete OpenGraph markup code that is used in OkayCMS
What is OpenGraph?
OpenGraph markup is a set of rules for structuring data that can be shared on social networks. Simply put, if you want to share a link and want it to look beautiful (including a short description, the correct title and the desired image), then all this data needs to be marked up with special tags.
OpenGraph markup flavors.
At the moment, there is no single standard that allows you to accurately and equally mark up the page, each social. the network, be it Facebook or Twitter, provides its own attributes or tags in order to correctly parse information when sharing links.
Let's start with common markup, which is actually the first standard and allows you to generally understand the markup of the current page.
Basic OpenGraph Metadata
- og: title - The name of your object, for example a template for OkayCMS
- og: type - Object types, for example article.
- og: image is the image url that your object should define.
- og: url - The canonical URL of the object ".
How it looks on the example of our site:
<meta property = "og: url" content = "https://okay-cms.com/products/shablon-dlya-okaycms-okeffect" />
<meta property = "og: type" content = "article" />
<meta property = "og: title" content = "Template for OkayCMS OkEffect" />
<meta property = "og: description" content = "Multilingual responsive Carol template for online stores with a wide audience of sales.
The multilingual site and the ability to choose the currency for displaying prices for goods is a mandatory functionality for a store with a wide sales audience. Especially if it is clothes, shoes or designer accessories.
Stylish Carol template will help you present the goods to the client with taste on your website. Laconic, in strict color ... ">
<meta property = "og: image" content = "https://okaycms.com/files/products/okeffect.400x400.png" />
As you can see, each item is filled with relevant content.
This was the basic set of tags that should be placed in the <head> block. In addition, the markup can be extended with other tags that will help you more accurately mark up information.
Example of additional OpenGraph tags
The following properties are optional for any object:
- og: audio - The URL of the audio file.
- og: description - descriptions of your object.
- og: determiner - The word that appears before the name of this object in the sentence. The enum type (a, an, the, "", auto). If auto is selected, the data consumer must choose between "a" or "an". The default is "" (empty).
- og: locale - Location tag. Language_TERRITORY format. The default is en_US.
- og: locale: alternate - The array type of other locales on this page.
- og: site_name - If your object is part of a large web site, the name should appear on all pages of the site. For example, "OkayCMS".
- og: video - URL of the video file.
This was the foundation, an RDF standard that allows you to generally refer to "sharing content". Now let's move on to more specialized frames.
OpenGraph Twitter
Twitter tags are similar to Open Graph tags and are based on the same conventions as the Open Graph protocol. By using the Open Graph protocol to describe the data on a page, you can easily create a Twitter Card without duplicating tags and data. When the Twitter Card processor looks for tags on a page, it first checks the Twitter-specific property, and if not, falls back to the supported Open Graph property. This allows you to both define on the page yourself and minimize the amount of duplicate markup needed to describe the content and experience.
Note that although Open Graph recommends specifying the "og" RDFa prefix via <html prefix = "og: http://ogp.me/ns#">, this markup is not required for the Twitter Card and its use. Twitter prefix: in the attribute the name of the HTML meta element. The Open Graph protocol also defines the use of property and content attributes for markup (<meta property = "og: image" content = "http://example.com/ogp.jpg" />), while Twitter Cards use name and content. The Twitter parser will fall back to using property and content, so there is no need to modify existing Open Graph protocol markup if it already exists.
Example of embedded Twitter Card markup on OkayCMS website
<meta name = "twitter: card" content = "summary"> <meta name = "twitter: title" content = "Template for OkayCMS OkEffect"> <meta name = "twitter: description" content = "Multilingual responsive Carol template for online stores with a wide audience of sales. The multilingual site and the ability to choose the currency for displaying prices for goods is a mandatory functionality for a store with a wide sales audience. Especially if it is clothes, shoes or designer accessories. Stylish Carol template will help you present the goods to the client with taste on your website. Laconic, in strict color ... "> <meta name = "twitter: image" content = "https://okay-cms.com/files/products/okeffect.400x400.png">
And here's a good example of how it works:
Other services such as Facebook, VK, Odnoklassniki take information from the standard tags that we discussed at the beginning of the article. Below you can see how the same content looks when shared on different social networks.
And at the end we give the complete OpenGraph markup code that is used in OkayCMS
{if $ module == 'ProductView'}
<meta property = "og: url" content = " {if $ lang_link} / {str_replace ('/', '', $ lang_link)} {/ if} " />
<meta property = "og: type" content = "article" />
<meta property = "og: title" content = "" />
<meta property = "og: description" content = "" />
<meta property = "og: image" content = "" />
<link rel = "image_src" href = "
<meta name = "twitter: card" content = "summary">
<meta name = "twitter: title" content = "">
<meta name = "twitter: description" content = "">
<meta name = "twitter: image" content = "">
{elseif $ module == 'BlogView'}
<meta property = "og: url" content = " {if $ lang_link} / {str_replace ('/', '', $ lang_link)} {/ if} " />
<meta property = "og: type" content = "article" />
<meta property = "og: title" content = "" />
{if $ post-> image}
<meta property = "og: image" content = "{$ post-> image | resize: 400: 300: false: $ config-> resized_blog_dir}" />
<link rel = "image_src" href = "{$ post-> image | resize: 400: 300: false: $ config-> resized_blog_dir}" />
{else}
<meta property = "og: image" content = " / design / /images/logo_en.png" />
<meta name = "twitter: image" content = " / design /
<meta property = "og: description" content = "
<meta name = "twitter: card" content = "summary">
<meta name = "twitter: title" content = "">
<meta name = "twitter: description" content = "">
<meta name = "twitter: image" content = "{$ post-> image | resize: 400: 300: false: $ config-> resized_blog_dir}">
{else}
<meta property = "og: title" content = "" />
<meta property = "og: type" content = "website" />
<meta property = "og: url" content = "" />
<meta property = "og: image" content = " / design / /images/logo_en.png" />
<meta property = "og: site_name" content = "" />
<meta property = "og: description" content = "" />
<link rel = "image_src" href = " / design /
<meta name = "twitter: card" content = "summary">
<meta name = "twitter: title" content = "">
<meta name = "twitter: description" content = "">
<meta name = "twitter: image" content = " / design / Do OpenGraph markup correctly and share your site links beautifully
