How Open Graph Tags Can Optimize Social Media Experiences

Aumcore-sq-logo
Aumcore
  • Date Published
  • Categories Blog
  • Reading Time 8-Minute Read

Have you ever learned the name of a new car and then started seeing it everywhere? Or maybe you finally learned the breed of your neighbor’s dog and suddenly there are four of the same breed walking up and down the street? Well, after this post on open graph tags, you will become an expert at identifying and creating them to optimize your content on social.

Was there ever a time when you learned how to recognize an object, and afterwards you encountered that said object again, again and yet again? Maybe you learned the name of a designer bag or a dog breed, and now you see them everywhere? This is known as the frequency illusion, or the Baader-Meinhof phenomenon, and once you’ve read through this article, you’ll be recognizing open graph tags like a social media management pro.

What Are Open Graph Tags?

Open graph tags are lines of code that will allow your content to be more easily accessible by social sites like Facebook and Twitter. When you link a blog post or a video from your website to your social channel, what you will see after it uploads is a preview of the content. Many times, you’ll also notice there is a prompt to choose photos that compliment your site content (thumbnails). This is how we have normally come to see content on social, but this isn’t a universal attribute all sites have. These uploads are possible because of open graph tags that allow social sites to pull your “graph” objects onto their platform. If the post or article doesn’t contain these tags, you will see something like this:

Aumcore social media post on facebook

Facebook would only be able to pull the written content from your site much like the post above from the digital marketing agency Aumcore. Of course, you can still upload the photo after linking your content, but if you want to increase your visibility and click-through rates, integrating open graph tags is how you can do just that.

Images Make a Difference

Did you know that 74% of marketers will use visual assets in their marketing instead of blog posts? This is not for naught, as Facebook posts with images see 2.3x more engagement than posts that do not have them. Additionally, Tweets with images receive 150% more retweets than Tweets without. Use this information to elevate your marketing strategy and social media management skills.

Using open graph tags won’t just benefit your viewers, it will also make things easier for your team. They’ll be able to copy and paste blog posts or case studies from your website without having to think about imagery because the open graph tags will automatically allow other platforms to source them. Instead, they can use that extra time to think of or create new and exciting content. These next steps will provide you with the code syntax you need for a seamless integration.

Open Graph Title Tag

Your open graph title tag will allow your social channels to source your title. However, it differs from your normal HTML with its “og:title” in the code syntax. In order to maximize your space, reduce the amount of characters your title has to less than 90.

<meta property=”og:title” content=”Mobile Marketing Statistics to Help You Plan for 2018”/>

Open Graph Image Tag

Since we covered the importance of having images in your content, this is how you create an open graph image tag:

<meta property=”og:image” content=”https://www.aumcore.com/blog/media/2017/10/mobile-marketing.jpg”/>

Images for Facebook should be larger than 200px by 200px, but the ideal size for a post should be 1200 x 627.

Open Graph Type Tag

After carefully crafting your title and choosing your image, you’ll next want to identify its type. This list will show you each type you can add to  your code syntax, which will look like this:

<meta property=”og:type” content=”blog”/>

Open Graph Description Tag

These tags are also similar to HTML meta description tags because they’re summaries of your content. Focus on creating intriguing copy that will draw users in. Try including a visible end goal for users to see or offer advice to business owners, such as “Increase your visibility and click-through rate by tenfold with these tips,” or “Social media best practices catered for small and medium businesses.” Your description should be action oriented and informative.

<meta property=”og:description” content=” Social media has become a common element across all marketing strategies. Here’s how to create a strong strategy for 2017. “/>

Open Graph URL Tag

URL open graph tags don’t directly affect how your content is displayed on social sites. However, they’re important because your site may have different pages that show the same content. For example, you may have written a blog post for your local digital marketing agency, or were featured on a different site. URL tags are important because they indicate what the user’s landing page will be when they click your content.

<meta property=”og:url” content=”https://www.aumcore.com/blog/2016/07/26/social-media-best-practices-for-small-and-medium-business/”/>

Twitter Cards

Twitter cards are basically the Twitter version of open graph tags that show content in a more dynamic way with an image and description. Posting Tweets in this manner will help your followers recognize and view your content in a more distinct way.

<meta name=”twitter:card” content=”summary”>

Writing your code in this manner will allow your Tweets to show up like this:

 

Tweet generated through backend html coding

Image Source: www.developer.twitter.com

 Twitter Title

Similar to the Facebook title, you want to create a Twitter title that’s compelling and interesting. The title is one of the first things users see when they’re scrolling through their feed, so make sure it’s informative. Just remember that Twitter still has a 140 character count, so keep your titles compact and concise, staying under 80 characters.

<meta name=”twitter:title” content=”Social Media Best Practices for Small and Medium Businesses”>

Twitter Images

Just like Facebook, Twitter images are important if you want to increase your click-through rates. The image should complement your copy and give users an idea about what the article, blog post, or video will be about. Choose an action shot or select a

section of an infographic to go along with your tweet.

<meta name=”twitter:image” content=”https://www.aumcore.com/blog/media/2017/09/Social-Media-Depression-main.png”>

Wrap Up

These tags aren’t just in the interest of social media, formatting your content in this way also makes it easier for search engines to source your website. That’s right, these methods can also apply to your SEO strategy!

Accordning to Moz writer Cyrus Shepard, “We know from experience and studies that the right data, including optimized images, helps content to spread, which often leads to increased links and mentions.” Search engines can use those items to recognize and rank your content. However, while the benefits of open graph tags are great we recognize that coding is not for everyone.

If you find yourself new to coding and HTML, you can contact a digital marketing agency to help you understand how to leverage these methods. Social media management has become a necessary skill for all kinds of businesses because everything is shifting in the digital space.

Where your business was a year ago is not where it is now, and that growth will continue! Learning about the basics of the web such as these codes is a lot like learning vocabulary, the more you learn the easier it is to express yourself. You want to put your business’ best foot forward, and you can do that by extending well-curated posts to your online audience. Let’s see those tags one more time:

  • Open Graph Title Tag

<meta property=”og:title” content=”Mobile Marketing Statistics to Help You Plan for 2018”/>

  • Open Graph Image Tag

<meta property=”og:image” content=”https://www.aumcore.com/blog/media/2017/10/mobile-marketing.jpg”/>

  • Open Graph Type Tag

<meta property=”og:type” content=”blog”/>

  • Open Graph Description Tag

<meta property=”og:description” content=” Social media has become a common element across all marketing strategies. Here’s how to create a strong strategy for 2017. “/>

  • Open Graph URL Tag

<meta property=”og:url” content=”https://www.aumcore.com/blog/2016/07/26/social-media-best-practices-for-small-and-medium-business/”/>

  • Twitter Cards

<meta name=”twitter:card” content=”summary”>

  • Twitter Title

<meta name=”twitter:title” content=”Social Media Best Practices for Small and Medium Businesses”>

  • Twitter Images

<meta name=”twitter:image” content=”https://www.aumcore.com/blog/media/2017/09/Social-Media-Depression-main.png”>

Good luck and tag on!