Open Graph is a protocol that determines the appearance of links in social networks and instant messengers. Thanks to it, an image and a text snippet are attached to a post with a link, which attract attention to the publication.
In some content management systems, a block with this micro-markup is built in by default. But there are those who do not fill it out or do not check for errors in the display before publishing. In the end it turns out like this:
The image was one of the illustrations in the article, which does not say anything apart from the context
Do you see how the image in VK was cropped?
And this is how the tags are written:
og:type
Type of page or its content: website, article, audio, video. If you're sharing audio or video, use additional tags og:audio or og:video. In them indicate the URL of the file.
Tags for Twitter
In order for Open Graph to be displayed beautifully on Twitter, you need to write separate meta tags for it.
The main ones correspond to og tags:
In twitter:cart you need to specify the card type:
- summary - page preview,
- summary_large_image - preview of the page with a large image,
- app - for links to mobile app, data about him is pulled into the card,
- player - for video, it is uploaded to Twitter and can be played directly on the social network.
In the first two cases, it is enough to write the above meta tags. With app and player it’s more complicated: see examples and instructions on the Twitter website for developers.
Please note that in the twitter:card tag it is written meta name, but not meta property.
In other meta tags for this site - meta property.
And now we have configured the Open Graph micro markup. 
Find errors
Reset link cache
Open Graph tags go between sections
web pages. Most frequently used tags:- og:title
- og:description
- og:url
- og:site_name
- og:image
- og:type.
Here are some examples of how information about an article is generated on social networks using Open Graph.
Example Pinterest Rich Pin
Twitter map example
Twitter has defined its own tags known as Twitter cards. These tags allow your links to provide more information whenever they are tweeted. Like Open Graph tags, Twitter tags also go between sections
web pages. Most frequently used Twitter tags:While you can add Open Graph and Twitter Card tags manually, there are many plugins available on WordPress.org that allow even novice users to add tags to posts and WordPress pages. Some of the best plugins:
- SEO by Yoast
- Open Graph for Facebook, Google+ and Twitter Card Tags
- The SEO Framework
- JM Twitter Cards (Twitter cards only)
- Open Graph Protocol Framework (only for Open Graph labels and recommended for developers).
In this article, we will use the built-in parameters of the Yoast SEO plugin and define special meta tags that will make posts look great on social media.
Note. You should only use one plugin with similar functionality. If you already have WordPress SEO Yoast installed, it is better to configure this plugin than installing the Open Graph for Facebook, Google+ and Twitter plugin.
Step 1: Install the latest version of Yoast SEO
We recommend installing latest version Yoast SEO. The easiest way to do this is through the WordPress admin toolbar under Plugins->Add New and enter Yoast SEO in the search bar.
Then install and activate the plugin.
After activation you will see new tab"SEO" in the WordPress admin panel. There are many great features, but today we'll look at the Social tab.
Step 2: Enter your social profiles
To set up Open Graph and Twitter maps, go to section SEO->Social from your WordPress dashboard. First add links to your social profiles to help search engines confirm that the profiles are indeed connected to your site. Then navigate to the various social tabs.
Your first step is to enable Open Graph metadata for Facebook posts. Just click the button Enabled". We assume that you have already added a related Facebook page on the " Accounts" You can add a default image if you want the specified image to be shown on any pages that don't have pictures.
Now that you've got your Facebook posts set up, it's time to get started on Twitter. Just make sure your Twitter card details Enabled. Z Then select the default card layout (CV or CV with Large Image). Again, this will be linked to the Twitter tag you added on the page " Accounts" .
Pinterest is a little different as this platform uses meta tag verification. Go to your account Pinterest, hover over your user icon and click the " tab Settings" Click the button Application for the site" and select the option " Add HTML tag". Copy the meta tag you created and paste it into the Yoast SEO panel. Save your changes, then return to Pinterest to submit.
Google+
Last social account, which you will need to install is Google+. Which is only a link to the + page of your business. Insert it and you're done.
Setting Defaults
The last step is to define some default values. Yoast uses meta fields in your content to define Open Graph data, so be sure to change the defaults in the SEO-> Appearance Search->Content Types. Use Yoast SEO's built-in snippet variables to create your own dynamic default values for the post title (used for og:title) and meta description (used for og:description).
What's happened Open Graph? What is it used for? How to configure it correctly? Let's try to understand this material.
Why do we need SMM and are there any risks associated with marketing on social networks? Read more.
What problems most often arise when adding such buttons?The most common problem is that the wrong graphic content is attached to the preview that is posted on the social network. For example, instead of a photo from an article, an advertising banner is pulled up, which is placed at that moment on the site.
This problem can be easily resolved with the help of the additional Open Graph page markup standard. The latter was developed by Facebook and its main task is to control the text and graphic announcement that is generated when a link is added to the social network.
In fact, Open Graph is a special protocol that is a special set of meta tags. They are integrated into the html code of the page (within the tag
) and set the required display of the site page preview on the social network resource. This page layout standard is also used by other equally popular social platforms. These are Vkontakte, Twitter, Google+, Yandex.Video, Pinterest, LinkedIn and others.What should the html code of a website page contain to correctly display previews on social media? networks?
“ og:description” – contains a description of the article (it differs from the traditional description meta tag in that it makes it possible to increase the size of the description from 160 to 295 characters);
“ og:image” – link to the picture that accompanies the article;
“ og:type” – indicates the type of material: “article” - article, “movie” - cinema and others;
« og:locale" – indicates the localization (site language), also this value “ru_RU” is used automatically;
« og:title» – shows the title of the article;
« og:site_name» – a tag indicating the name of the site.
Exists
Hello, friends. Surely every blog has social buttons Facebook networks, Vkontakte, etc., and you would like to know how you can manage the process of adding a post, i.e. what kind of picture should be published and what short description articles. To do this, we need to add Open Graph markup to the site. This is a very simple task, we will do it using WordPress plugins.
What is Open Graph
Open graph is a protocol that allows you to control how content will be displayed in the HTML code by adding meta tags. in social networks. Without this, a social media post might look like this.
Agree, it doesn’t look very good.
Installing Open Graph Markup
A wonderful plugin for WordPress will help us with this – All in One SEO Pack. In general, I never cease to be amazed at how useful and necessary this plugin is. It really lives up to its name "All in One" because it packs a lot of useful things for the blog. For example, I recently wrote an article about using this plugin.
If you haven’t installed the All in One SEO plugin yet, and you don’t know how plugins are installed in WordPress, read this.
After installing the plugin, you need to activate the “Social Meta” module. To do this, in the main menu of the site admin panel, click on the item “ AllinOneSEO", Further " Module management».
In the window that opens, select required module and click on the button “ Activate».
That's it, the module is already working, all that remains is to customize it for yourself.
Now we need to customize the image that will appear when someone shares your article on social media. Go to the main menu of the site admin panel, click on the item “ AllinOneSEO", Further " Social meta».
In the window that opens, go to the “Image Settings” section and select the source for OG:Image. I have “Post Thumbnail” selected on my blog. You can also customize the default image. It will be needed if the article contains no pictures at all.
This completes the setup. If you haven’t changed anything else in the settings, then the article description (og:description) will be taken from your main Description, which is exactly what we need.
There are also separate WordPress plugins for the formation of Open Graph – “Open Graph Protocol Framework”, “Facebook Open Graph, Google+ and Twitter Card Tags” and many others. Take your pick.
Caching problems
Perhaps when testing the plugin, you will come across the fact that if you have already posted an article once, then even if you then change the settings in the “Social Meta” module of the All in One SEO plugin, the display of content on social networks will remain unchanged. This means that the link to the article was cached. To remove it from the cache, Facebook and VKontakte developers came up with special tools.
Open Graph markup is used by Facebook, VKontakte, Google+, Twitter, LinkedIn, Pinterest and other services. Yandex uses Open Graph to transfer data to the Yandex.Video service.
The Yandex.Video service recognizes not only the main ones, but also many other meta tags, for example, different types videos (series, clips, films, etc.), restrictions by age or country of viewing. Depending on the selected type, you can also specify additional properties object: movie name, series episode number, TV show release date, and others. Since Yandex.Video requires meta tags that are not in the Facebook documentation, the service uses its own extension.
In addition to building previews, the Open Graph standard can be used by application developers to publish user actions on Facebook. In such publications, you can indicate the actor (user), the object, the action with this object, and the name of the application with which this action was performed.
- Basic meta tags
- Additional meta tags
- Structured meta tags
- Arrays
- Objects
- Usage example
Basic meta tags
In the Open Graph standard, one page describes only one object - a person, company or product. All data is indicated for this object. To pass information to services, you need to add the following required meta tags to the HTML code (in the head element):
og:title - object title.
og:type - object type, for example, video.movie (movie). If you have several objects on the page, select one of them (the main one). Depending on the type, you can specify additional properties.
og:image - URL of the image describing the object.
og:url - the canonical URL of the object, which will be used as a persistent identifier.
Additional meta tags
og:audio - URL sound file, which refers to the object being described.
og:description - brief description of the object.
og:determiner is a word (article) that must appear before the name of the object in a sentence. Can be specified as: a , an , the , \"\" , auto . If the value is set to auto , the markup recognition service will choose between the values a and an . If no value is specified, there will be no article before the object name.
og:locale - object description language in the language_country format. The default value is en_US.
og:locale:alternate - array additional languages, on which a description of the object is available.
og:site_name - name of the site where information about the object is posted.
og:video - URL of the video file that relates to the described object.
Structured meta tags
Some meta tags may have additional (optional) metadata. Such meta tags contain an additional character : (colon).
For example, og:image may contain the following metadata:
og:image:url - URL of the image describing the object (corresponds to og:image ).
og:image:secure_url - additional URL if the page is opened via HTTPS.
og:image:width - image width in pixels.
og:image:height - image height in pixels.
og:video can contain the same metadata as og:image . For example:
\n \n \n \n
og:audio contains only some of the metadata listed above:
\n \n
Arrays
If a meta tag can contain multiple values, add additional meta elements to the page. If conflicts occur, the data specified in the first meta element (from top to bottom) will be taken into account.
\n
Include structured meta tags after the main meta tag.
\n \n \n \n \n
where the markup means that there are 3 images on the page: the first has a size of 300x300, the second image has no size specified, the third is 1000 pixels in height.
Objects
To pass data about an object, you need to specify its type using the og:type meta tag:
This example specifies one of the global (generally recognized) types. The remaining types are specified using the CURIE syntax:
\n \n
Global object types are grouped into verticals. Each vertical has its own namespace. The value of the og:type meta tag for a namespace always consists of the name of the object type and a qualification (< object type:clarification>). This avoids confusion with user-defined types that contain a : (colon).
Music
og:type meta tag meanings:
Music.song
music:duration (integer >=1) - duration of the song in seconds.
music:album (music.album, array) - album name.
music:album:disc (integer >=1) - disc number.
music:album:track (integer >=1) - track number.
music:musician (profile, array) - artist name.
music:song - music.song - the name of the song.
music:song:disc (integer >=1) - disc number (corresponds to the value music:album:disc ).
music:song:track (integer >=1) - track number (corresponds to the value music:album:track ).
music:musician (profile) - performer of the song.
music:release_date (datetime) - album release date.
music:song - matches the music.song value specified in music.album .
music:song:disc
music:song:track
Video
og:type property values:
Video.movie
video:actor (profile, array) - actors.
video:actor:role (string) - roles played by actors.
video:director (profile, array) - director.
video:writer (profile, array) - screenwriter.
video:duration (integer >=1) - movie duration in seconds.
video:release_date (datetime) - the release date of the film.
video:tag (string, array) - tags (words, phrases) associated with the film.
video:actor - matches the value of video.movie .
video:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series (video.tv_show) - series.
TV show. The markup corresponds to the value of video.movie .
Video.other
Video that does not belong to the listed categories. The markup corresponds to the value of video.movie .
Other
og:type meta tag meanings:
article:published_time (datetime) - date of publication of the article.
article:modified_time (datetime) - date last change articles.
article:expiration_time (datetime) - the date after which the article is considered out of date.
article:author (profile, array) - author of the article.
article:section (string) - topic (section) to which the article belongs (for example, Technologies).
article:tag (string, array) - tags (words, phrases) associated with this article.
book:author (profile, array) - author of the book.
book:release_date (datetime) - publication date of the book.
book:tag (string, array) - tags (words, phrases) associated with this book.
profile:first_name (string) - name.
profile:last_name (string) - last name.
profile:username (string) - nickname (username under which he is registered).
profile:gender (enum) - gender (male, female).
Has no meaning other than the basic ones. Any untagged page is defined as a website object.
Object Types
| Type | Description | Example values |
|---|---|---|
| Boolean | Can be true or false, 1 or 0 | true, false, 1, 0 |
| DateTime | ISO 8601 | 2015-07-15, 15:05 |
| Enum | ||
| Float | ||
| Integer | ||
| String | Unicode | |
| URL | http://www.example.com |
2015-07-15, 15:05
Consists of a limited set of constant string values
64-bit floating point number
1.234, -1.234, 1.2e3, -1.2e3, 7E-10
32-bit integer. Can contain all characters that match the following formats: 1234, -123
Unicode character sequence
All valid URLs that are accessible via HTTP or HTTPS protocol
http://www.example.com
Usage example
To add information for generating snippets, in the HTML code of the pages inside the head element, specify the page title and site name in the og:title and og:site_name properties.
\n \n \n \n
Loading...
