web-design-trends

Understanding the Open Graph Standard

One of the most common oversights I see when reviewing a website is the improper rendering of the image / content when the website URL / address is shared VIA social media.  By specifying what image will display you will be given another opportunity to promote your brand to your audience.  The standard to control this was introduced by Facebook in 2010 and is called “Open Graph”. By specifying what image / meta content is to be used, Facebook and other social media platforms will not have to guess what information to display when your page is shared.  

Example of a Properly Formatted Open Graph Meta Tag:

<meta property=”og:title” content=”What is the Open Graph Standard?”/>
<meta property=”og:description” content=”Here is an example of open graph content that will be displayed .”/>
<meta property=”og:type” content=”article”/>
<meta property=”og:image” content=”https://shanewebguy.com/wp-content/uploads/2019/12/SWG-Accessibility-ADA.png “/>

If you review the above example, you will notice the similarity between “Open Graph” and standard meta tag information. The only variation between meta tags and Open Graph tags is the available property attributes.

Open Gra

Here is a great example of a properly implemented Open Graph image being used. This is from KO Websites one of the leading web and marketing companies in Northern California. As you can see they not only set the image , but used it as a way to promote their “brand”.

Shane Web GUY OG Example

Another example of a property set Open Graph tag is my site @ShaneWebGuy.com. I am focused on ADA and accessibility and want my brand to reflect that. I originally just had a version of my logo to display. What is set in the OG: tag should reflect most what you wish to convey to your audience. This information can be set on a per page basis.

Here is an example of how not setting the OG image can render an undesirable result. In this case the image being rendered does not make sense. In some cases it can work out that a logo or relevant image is being used. Without proactive steps, you are leaving yourself open to chance.

How to Set Your Open Graph Data

The method to set you “Open Graph” will depend on the platform or framework your website has been built on. In the case of a WordPress website, this can be done within a SEO plugin such as All in One SEO or Yoast. In some cases it may be required to modify the header files directly. You should get with your webmaster here for more direction.

Testing Your Website’s Open Graph integration

Facebook has an Open Graph debugger tool that allows users to test their page and view how it renders when shared on Facebook. This tool can help verify your Open Graph is being properly detected and to help debug any errors you may not be aware of. I find in most cases that the images / content that displays on Facebook will render in the same way across other social media platforms. Another great tool is the Open Graph Check. This will test based on the standard Open Graph protocols.

Visit Us
Follow Me
Tweet
Skype