Facebook Open Graph and Twitter Card

Facebook Open Graph and Twitter Card

Ever shared a post from your website to Facebook only to find blocky chunks of text and blurry images? We have all been there as digital marketers.  It happens when sharing content from sites to social media platforms.  It also happens when interlinking content between different social media channels.

The quality degradation issues of shared posts are not exclusive to Facebook. It happens on Twitter and other social media platforms too. It happens because you, the publisher, have not defined the content to be displayed and how it should be displayed when you are sharing a link.

You might have the most beautiful content, including optimized web pages and inspiring pictures. However, if quality flies out of the window the moment you share to your social media,  all your optimization efforts go to waste. No follower might want to re-share the resultant invisible or unattractive post with their friends.

The answer to this problem is the Facebook Open Graph and Twitter Card.

What is the Facebook Open Graph?

The Open Graph meta tags introduced by Facebook in 2010 define how your content gets to appear when sharing from websites and other social media sites. Using Open Graph allows your transferred content to become a rich graph,  or in other words, retain superior display qualities as other direct Facebook posts.

As a marketer, skilling yourself into how Open  Graph works can help you improve the shareability of your content. Users expect crisp images and clear text, and this can be attainable from the correct use of Open  Graph. The result would be more shares and increased traffic.

og:title

This meta-tag guides on how to outline your blog’s title when sharing to Facebook. The og:title works the same way as the HTML tag in your code that tells search engine crawlers what your content is about.

Your og:title needs to be bold and compelling. Even though there are no set limitations on the number of characters, an average of 60 characters works best for an eye-catching display.

Example

<meta property=“og:title” content=“Leveraging Open Graph for Increased Content Shares” />

og:url

This Open Graph meta tag is the URL of your blog post, page or image. However, the URL is never shown in the social graph; only the domain appears. This tag is essential, especially when you have several URLs for the same content. It helps to define where the traffic from the shares will go to.

Example

Example: <meta property=”og:url” content=”http://www.yourdomain.com/leveraging-open-graph-for-Increased-content-shares/” />

og:description

The description tag tells your social media audience about your page. It is how users get to gauge the relevance of your content versus the information they seek.  What you write on this tag shows up below your post’s link on Facebook.

Example

<meta property=“og:description” content= “Need more traffic from your social media posts? Here are the top 6 ways to earn more shares with Open Graph.”/>

og:type

The og:type describes your content type e.g. blog post, game,  book, movie, and so forth.

Example: <meta property=”og:type” content=”website” />

og:image

This tag specifies the image URL. Images need to be clear for your post to stand out. Without setting this description, Facebook might show an unwanted part of your site as the image,  or over-compress your image.

Remember that for an optimal image display on your shared post, the resolution has to be 1200 pixels x 627 pixels. Be sure however to keep the image size below 5 MB.  The image tag on Open Graph also allows for the use of a different image; it doesn’t have to be what you have on your page.

Example:

<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />

What is Twitter Card?

Twitter cards are Twitter’s content sharing and publishing protocols that work the same way as Facebook’s Open Graph. In this case, however, your content descriptions will not be visible to users. You can use Twitter cards to publish more information past the 280 character limit. The cards similarly help to improve how your website, images and other content stand out when shared from other sites.

twitter:card

This meta tag describes what your content is. You have the option of selecting image, video or web content. The description tags= helps to achieve an eye-catching summary description of your web content on twitter, along with a thumbnail and title.

Example:

<meta name=”twitter:title” content=”Your Title” />

twitter:url

Setting up your URL  description ensures that traffic from your  Twitter post’s clicks got one place.

Example:

<meta name=”twitter:url” content=”http://www.yourwebsite.com/blogpost-title/”>

twitter:title

The title tag, like in Open  Graph needs to describe what your content is about, succinctly. You will have up to 70 characters for that, and an opportunity to use the right keywords to capture your audience’s attention.

Example: <meta name=”twitter:title” content=”interesting title here”>

App cards

These are used when sharing mobile app advertisements. The cards show a snippet of your app’s icon along with price and content rating. The description should be  200 characters and the image at least 800 x 320 pixels.

Example

<meta name=”twitter:app:name:googleplay” content=”your googleplay app name”>

twitter:image

Tweets with images get more clicks and retweets.  The image twitter card enables you to define the image you need to appear alongside your twitter post and how it should appear. Your image size shouldn’t exceed 1 MB, and the resolution should be between 60px by 60px and 120px by 120px.

Example

meta name=”twitter:image” content=”https://where-your-image-is-hosted/name.jpg” />

Why are the markups important?

• Both Open Graph and Twitter cards are structured data that allow you to take control over  how your content is displayed
• They help to attain high quality posts on Facebook and Twitter for increased visibility
• They increase likeability and shareability of your content
• They make your content more clickable, and therefore improve traffic and conversions

How to Create the Markup Manually?

Now that you understand how social media tags work let’s put them into action on your WordPress Website and accelerate the ROI potential from your social media marketing. When creating the markups manually, all of the code should go to the functions.php file of your website’s theme.

Step 1: Open your  functions.php file and on the language attributes filter add a function that informs third party applications that there are more tags than HTML tags in your content.

Step 2: Add  Open Graph’s metadata

Scroll to the bottom of your functions.php file and copy-paste the below code. This code is a conditional check that confirms that you are on a post page and that Open Graphs or Twitter Cards tags will be effected on individual post pages.

Step 3: Add the Open Graph or Twitter Cards tags one by one in the head section of your header.php  page

Use your blog post’s title as the og:title and the excerpt for your og:description and page’s URL for permalink. In this example, we have defined our content type as an article, and there is an image source,  use a fallback thumbnail if there is no post image.

Step 4:Add the Facebook ‘like’ button code in the body section of your web page (<body>..<body>) so Facebook users can easily share your content.

After you have added all these meta tags, your post pages will start to run a primary function of Open Graph or Twitter Card. The code can be modified with more advanced tags depending on your post types.

Open Graph and Twitter Card guarantee that whenever someone shares your web content on their social media status, your content will show up neatly, with a link, a title, an image and a description. They are critical tools to implement for increased traffic and conversion.