What is Open Graph?
Open Graph was introduced in 2010. It is the link between your website and Facebook – it speaks to Facebook and tells it what to show when you share a link. You have a degree of control over what travels across to Facebook from your website.
Why do I need to code it, surely there is an easier way?
Yes! Yoast SEO plugin does all this for you. It picks up the first image on the page and the meta description etc and feeds this back to Facebook. We use Yoast and it works perfectly.
So when would you need to know how to edit the code that gets sent to Facebook?
- If you are using Divi Nitro and are deferring you images, you will need to change the “open graph image” as the images dont load until after the whole site is loaded.
- If you only have svg’s on your site – an svg is code and Facebook can only read an image format.
- If you want to show an image on Facebook that is not visible on your webpage.
Unfortunately by deferring images and using svg’s to speed up the site – this will impact what will be displayed on Facebook when you share your URL – but we have an answer for you!
Edit your header.php file
Open graph needs to be placed in your <head> tag of your site. So go to your child theme and edit your header.php file. If you don’t have this file in your child theme, just copy the Divi header.php and paste it in your child theme.
Once you have done this add the following code just after the <head> tag.
We recommend you use an image that is 475 x 249 pixels so it fits perfectly on the share screen.
Here is a screenshot our our header.php file with the code implemented above.
“if (is_page()) {?>” => this means that if the page you are viewing is a page and not a blog post. This allows you to have the featured image show on the blog posts.
og:image:type => this is the image type that you are using.
og:image:width => the width of your image
og:image:width => the height of your image
og:image => the url of your image
There are many more than you can add – see a list of all of them here
We have only added the above with the assumption that you are using Yoast SEO to do the rest.
I’ve added the code, now what?
So you’ve added the code and shared your URL on Facebook, but nothing shows up? Well you have to tell Facebook to empty its cache files of your site. You can do this by going to Facebook’s debug tool.
Enter in your URL and press debug. You will see a page showing all the information with warnings with what you don’t have set up. If it is still showing your old image or no image – click on the “Scrape Again” button next to the title “Time Scraped”. This will gather the information again and cache the files. You will see a preview of how your link will look.
So you have changed the image, what else can we do?
1. You can add multiple images so that a “slideshow” appears – the user can scroll various images.
Just add another “og:image” property below the first one like so
and so on.
2. You can specify an image for a particular page you want. This requires a bit more coding but don’t be scared.
Here is an example of code that shows per page ID
“if ( is_page( ‘356’ )) {” => this is saying that if the page that is being viewed or linked to is 356, then do something. So what we are saying is that if the page ID is 356, then show the image that we want for that page. “IMAGE_FOR_PAGEID_356” needs to be changed to the URL of the image we want to show.
“elseif ( is_page( ‘390’ )) {” => this means that if it isn’t page 365 and is page 390 then show the image we want for page 390. You can add many more – just use the “elseif” – copy the code from elseif down to the line above “else” and keep pasting for how many you want.
“else {” => This means that if the page is none of the above, then add the image. This is useful if you have a number of pages and dont want a specific image but rather a generic one.
Final thoughts
We are still learning about this and are constantly learning on the best method. If you do know a better way, please let us know as it can help many!
We hope you found this useful, please ask any questions you may have.
0 Comments