A new client recently asked me to troubleshoot why the pages on his site showed up with blank boxes – just the page title, when shared on Facebook. Usually when you share one of your pages on Facebook it looks like this:
In the client’s case only the site title showed – no image or description. What was happening?
Open Graph Tells Social Media What to Display
When someone shares a page on Facebook, Facebook will go to the page and look for certain data in the header to tell it what to use for the title, the description, and the image. If it can’t find that data it may grab anything it can, or if it really can’t figure out your page, it won’t grab anything.
For Facebook to know what you want to appear when you page is shared you need to include that data encoded in a special way. This article describes it well. If you have a static site you or your developer will need to add that code manually.
Not sure what your page looks like on Facebook? Use this tool – just put in your own URL.
I did this with my home page and was shocked at what appeared:
- The title should include my tagline
- The description is pulled from the copy on my page and is not grammatically correct and too wordy.
- The image being pulled in for my home page is actually from my portfolio and belongs to a client!
Not what I want people to see when they share my site, so I turned to WordPress SEO by Yoast to help.
WordPress SEO by Yoast Adds Open Graph Data Automatically
Assuming you have WordPress SEO by Yoast installed and activated on your WordPress site, log into your admin dashboard and click on SEO->Social. Click on Facebook and check the box that says “Add Open Graph meta data” and click “Save Changes”. Do the same for the Twitter tab.
Still in admin, find the page that you want to work with. In my case it is my home page. Open it in the editor, scroll down to the WordPress SEO by Yoast box and click on Social:
After filling in all of the boxes and clicking update here is what the Facebook share for my home page looks like now:
I used a screenshot from my site as the image. One note on the images – make sure they are bigger than 200px by 200px and be aware that when you change the image it takes a few moments for it to show up correctly.
My home page is updated, now to fix the remaining pages…