How to Control How Your Website Displays When Being Shared on Social Media
Written By: Shane Clark on December 17, 2019
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 developer shares the website URL / address via social media. By specifying what image you display you have another opportunity to promote your brand to your audience. To control this, Facebook introduced the Open Graph standard in 2010. By specifying what image / meta content you use, Facebook and other social media platforms don’t have to guess what information to display when you share your page.
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.
Here is a great example of the use of a properly implemented Open Graph image. 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.
Another example of a properly set Open Graph tag is my site, ShaneWebGuy.com. I want my brand to reflect my focus on ADA and accessibility. I originally just had a version of my logo to display. What you set in the OG tag should reflect most what you wish to convey to your audience. You can set this information 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 we 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 your “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.
