Social media platforms can be a fundamental source of traffic for your website, so you should optimize your presence on social networks, including your Open Graph tags.

You’ve crammed keywords into your bios and used all the appropriate hashtags in your posts – but do you know what a post looks like when other people share a page from your website?

We can’t control what people write about our content, or compel them to include an eye-catching image to improve its click-through rate – thus a post may, unknown to us, appear to require extra help. Open Graph tags and Twitter cards are the best ways to make your content seem eye-catching to users. In this post, we will explain what they are and how you can use them.

1. What is Open Graph?
2. If Your Website Link is Shared Anyway, What is the Point of Open Graph?
3. What Are The Open Graph Tags?
4. Other Open Graph Tags
5. Twitter Cards
6. How to Implement Open Graph and Twitter Card Tags

What is Open Graph?

Open Graph is a protocol that allows any web page to become a rich component in a social graph.

Essentially, you may instruct social networking platforms such as Facebook, Twitter, Pinterest, LinkedIn, and Google+ on what information to display when you or anybody else shares a link from your site.

Similar to how search engines visit your website and hunt for the data they require to display your website in search results, social platforms do the same thing for the “social graph” by looking for their own tags.

The social graph is a way to describe “things” in a digital world, and it might include locations like theatres and stores, media like videos and movies, assets like websites and articles, and people like TV hosts and movie stars.

Open Graph data communicates with the social graph about what the object is and how it should be displayed. For example, you want to choose which image or video appears, as well as the title and description that should be displayed, and the location or language.

If Your Website Link is Shared Anyway, What is the Point of Open Graph?

When you share something from your website to a social media platform, their crawler will scrape the HTML of the shared URL.

However, if the Open Graph data does not exist, the scraper must estimate which information is significant, which might be rather inaccurate at times.

By making your information more accessible and ensuring that social networks appropriately display it, your website may see a potentially large boost in click-through rates when URLs from your site are shared.

What Are The Open Graph Tags?

The four essential properties of every page are:

og:title

The og:title is the title of your content as it should appear within the social graph, similar to your standard HTML title tag, which tells search engines the SEO title of your page.

With a limit of 95 characters, your og:title should be clear and concise, with no branding or reference of the domain.

og:type

This is essentially what your object is: an article, video, blog post, or something else.  Other properties may be necessary depending on the type you choose.

og:image

This is where you enter an image URL so that when you share information in the social network, an image is always shown with it.

This distinguishes your content from status updates that are simply text in people’s cluttered timelines.

Facebook advises using photos with a resolution of at least 1200 x 630 pixels and maximum file size of 8MB, with a minimum of 600 x 315 pixels.

The smallest size you can use is 200 × 200 pixels. Your image will still appear if it is lower than 600 x 315 pixels, but it will be much smaller.

og:url

This is the URL of your post, page, or item (the social graph just shows the domain, so don’t panic if the full URL doesn’t appear).

This tag may appear to be unnecessary, but it is necessary to complete since you may have several URLs for the same content.

To guarantee that all shares are credited to one URL rather than several URLs, use this tag for a clean URL that doesn’t contain any session IDs or parameters.

og:description

Don’t forget to provide a description as well. This tag is optional, however, it provides more information about your page or article to entice people to click.

Try to create anything two sentences long that is relevant to the website or post’s content.

Other Open Graph Tags

Other advanced social media OG tags, such as your website name, may be relevant to your content:

In Facebook Insights, there’s also fb:admins, which connects your website to your Facebook fan page for even more data.

You may also notify Open Graph whether the article has any translations if it has an author or a publisher and if it has any video information, such as release dates, duration, actors, and the director.

Twitter Cards

Twitter Cards are similar to Open Graph tags, except that they are only for Twitter.

Twitter offers two sorts of cards for regular articles and blog posts that you may use on your website: Summary Cards and Summary Cards with Large Image, as well as various forms of Twitter Cards for different content categories.

Summary Cards only have a title, description, image, and Twitter account attribution. Instead of a thumbnail, the Large Image card displays a title, description, account attribution, and a large featured image.

Twitter Card analytics may also be used to analyze the performance of your Twitter Cards.

If Twitter can’t find any Twitter Card tags, it will simply rely on Open Graph tags, so if your Open Graph tags are configured correctly, you might be able to forgo setting them up.

The following are the tags you should be aware of while using Twitter Cards:

twitter:card

The twitter:card meta tag is similar to og:type in that it specifies the content. You can choose from photo (for images), player (for videos), and summary (for everything else).  If you don’t specify a definition, Twitter will default to summary.

twitter:url

Providing this tag ensures that one URL receives all of the tweets rather than splitting them over several URLs.

twitter:title

This should be a compelling description of your content that is not filled with keywords and should be approximately 70 characters long, similar to your Open Graph title.

twitter:description

Make a captivating statement of up to 200 characters that entices visitors to visit your website.

twitter:image

It is no wonder that tweets with photos stand out a lot more in people’s feeds. Make sure your photos are under 1 MB in size and no less than 60px by 60px; anything greater than 120px by 120px will be automatically resized by Twitter.

To get initial approval for your website, put the link into Twitter’s Card Validator once you have marked up your first page or post.  After that, you may use it to verify if your Twitter Card tags are displaying correctly.

How to Implement Open Graph and Twitter Card Tags

You can add Open Graph and Twitter Card tags to your website in various ways:

By including meta tags in the <head> section of your website’s code.

Using a plugin in a content management system (CMS) such as WordPress or Joomla.

Before you start implementing anything, examine your source code for tags like ‘og:type’ or ‘twitter:card’ or use the social networks’ debugging tools to see if there are any tags on your website currently.

Conclusion

These are just a few of the fundamentals you will need to understand before you can begin optimizing your website for social media.

Once you have got your tags in place, you may experiment with more complex social media Open Graph tags, as well as new ways to promote your business on social media.

The social networks have evolved into excellent advertising options that demand your attention, from Facebook’s Shop Sections and Check Out to Pinterest’s Buyable Pins, which allow consumers to shop immediately.