Open Graph and Twitter cards for WordPress: configuring and testing

Good content will attract interested audience to your website. And it is likely that some of these people will want to share this content in social networks. But sometimes there are problems when the shared content is not displayed properly in the social networks. Then come to the aid of the Open Graph tags.

Using Open Graph you can control the appearance of the title, images, description and more when sharing (“Share”) through social channels. You may already be familiar with the usual meta-tags such as title tag and description tags. But many bloggers don’t know that there are other meta tags that are specific to social networking Google+, Facebook, Twitter and Pinterest. The reason these social networking sites have started to use the metadata: need correctly display the content along with the associated images, descriptions and links. Defining these meta tags, you can ensure that your content easier to share and it looks beautiful in social networks.

Every social networking site has different preferences regarding tags. Pinterest and Google+ prefer tags Schema, but also support tags Open Graph Protocol, which also used Facebook.

The Open Graph tags go between sections <head> </ head> of the web page. The most commonly used tags:

  • og:title
  • og:description
  • og:url
  • og:site_name
  • og:image
  • og:type.

Here are a few examples of how information is generated about the article in social networks using Open Graph.

Example Of Pinterest Rich Pin

An Example Of A Google+ Share

An example of using Facebook Open Graph

Example of Twitter card

Twitter has defined its own tags, known as Twitter cards. These tags allow your links to provide more information whenever they twitnit. Like tags Open Graph tags with Twitter-also go between sections <head> </ head> of the web page. The most commonly used Twitter tags:

  • twitter:card
  • twitter:site
  • twitter:creator.

Although you can add tags, Open Graph and Twitter Card manually, on WordPress.org there are many plugins that allow even novice users to add tags to posts and pages of WordPress. Some of the best plugins:

  1. SEO from Yoast
  2. For Facebook Open Graph, Google+ and Twitter Card Tags
  3. The SEO Framework
  4. JM Twitter Cards (only for Twitter)
  5. Open Graph Protocol Framework(only for labels Open Graph and is recommended for developers).

In this article we will use the built-in settings of the Yoast SEO plugin and define special meta tags that will give the opportunity to look great posts in social media.

Note. You should only use one plugin with similar functionality. If you have already installed WordPress SEO Yoast, it is better to configure this plugin than to install a plugin for Facebook Open Graph, Google+ and Twitter.

Step 1. Install the latest version of Yoast SEO

Recommend to install the latest version of Yoast SEO. The easiest way to do this using the toolbar in the WordPress admin section, the Plugins-> Add new and specify the search string is Yoast SEO.

Then install and activate the plugin.

After activation, you will see a new tab “SEO” in the admin dashboard of WordPress. In Yoast SEO has many great features, but today let’s look at tab Social (Social).

Step 2. Specify your social profiles

To configure the card, Open Graph and Twitter, go to the section in SEO> Social from your WordPress dashboard. First, add links to your social profiles in order to help search engines confirm that the profiles are connected to your website. Then go to the various social tabs.

Facebook

Your first step is to include the metadata of Open Graph for posts Facebook. Just hit the button “Enabled”. Assume that you have already added associated with your Facebook page on the tab “Accounts“. You can add the default image if you want on any of the pages on which no images appeared, the image specified.

Twitter

Configuring posts to Facebook, it’s time to do Twitter. Just make sure that the Twitter cards Enabled (Enabled). Sthen select the map layout by default (summary or summary with large image). Again, there is a Twitter tag that you added on the page “Accounts” .

Pinterest

Pinterest is a little different because this platform uses the verification meta tag. Go to your Pinterest account, hover over your user icon and click “Settings“. Click the “Application website” and select “Add HTML tag”. Copy the generated meta tag, and paste it into the Yoast SEO. Save the changes, then return to Pinterest to send.

Google+

Last social account that you will need to install Google+. Which is just a link to the Google + page for your business. Insert it and you’re done.

Setting default values

The last step: it is necessary to define some default values. Yoast uses the meta fields in your content to define Open Graph data, so don’t forget to change the default values in the section SEO-> theme – > search-> content Types. Use built-in variables fragment Yoast SEO to create your own dynamic default values for record header (which is used for og: title) and meta descriptions (used for og: description).

See also:

A selection of new plugins section WordPress Plugins.

Custom image, title and description

Yoast SEO also includes the option for individual posts to customize the images, titles and descriptions used for Facebook and Twitter. When you edit a post, just scroll down to the Yoast SEO and click on the share icon (it looks like a < symbol with bold points). Then upload your own image or edit the title and description as necessary.

Debugging and testing

Every major social networking site has its own validator or debugger to test and preview how to display your link when sharing on social networks.

Google Structured Data Testing: this tool will not show you the preview of Google+, but will show what metadata is present and readable by Google. Properties will be displayed in the properties RDFA-node.

Debugging Facebook: after implementing Open Graph tags, just paste the URL of your site contains tags. It will show you the object properties.

The Twitter validation tool: you can use this link to preview the card Twitter posts, before it will spread through social networks.

Pinterest Rich Pins Validator: similar to the last two validators, simply type the URL containing the Open Graph tags, preview, and verify that your content appears as it should.

Using Open Graph meta tags you can optimize the display of headers, images, descriptions and other elements of your content in social networks. This will contribute to an increase in traffic from social sites because of links with clear information tend to receive more responses and natural transitions. Also people tend to trust links that contain more information rather than click on short URLS.

Leave a Comment

Your email address will not be published. Required fields are marked *