192 total views, 1 views today
When you post a link to website, blog, mobile app etc. on Facebook, Facebook shows a preview of the linked page content. Facebook crawls the link and looks for what’s call “Open Graph” tags on the site.
Without these tags, the Facebook Crawler does it’s best to guess about the title, description, and preview image for your content. You can designate this info with Open Graph tags to ensure the exact image and description you want when sharing your link on Facebook.
If you’re sharing your content to Facebook as a URL, it’s important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook.
Why use Open Graph?
Here’s and example of a link shared on Facebook without using the Open Graph Protocol. Facebook takes any content available on your site and chooses an image and description for you.
Here’s and example of a link shared on Facebook using the Open Graph Protocol to set your custom image and description
Create Your Custom Image
Start by creating your custom OG image. Facebook recommends 1200 x 630 pixels for the og:image dimensions (info), which is an approximate aspect ratio of 1.91:1. Upload this into your images folder or wherever you want this image to live on your server. WordPress users, I’ll show you how to upload your image below.
Adding the OG Meta tags to your website.
We will be adding some meta tags in the <head> section of your website. (Don’t worry WordPress users. It’s even easier to add a custom OG image on your WordPress post!)
Copy the following markup into the <head> section of your site or the page you want to use the custom image and description for. And yes, you can customize these for each unique page or post you plan to share. After you paste this in the <head> section, fill in your information in the content”” sections and you’re almost done! Skip over the next section for WordPress users to learn how to update your image and description for Facebook.
<meta property="og:title" content="The title of your site" />
<meta property="og:url" content="Your website address" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image" content="Link to your OG image" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description"
content="Description about your site" />
Adding the OG information on WordPress
First off, you’ll need to get one plugin called Yoast SEO. You can get it right from your WordPress plugins section or grab it from here: https://yoast.com/wordpress/plugins/seo/
With Yoast SEO activated, you’ll see Yoast SEO at the bottom of any new post you create. Click the middle social icon and fill out your facebook Title, Description and upload your image.
Update your image and description for Facebook
We need to tell Facebook to re-scrape this information to update the info. (This is only necessary if you are changing the image or description of a link that has already been published or if you are not seeing the correct info when you share the link.)
Visit https://developers.facebook.com/tools/debug/sharing
Type in your website and click the debug button. The first time scraping this link, it will prompt you with a message that says “This URL hasn’t been shared on Facebook before.” and a button to Fetch new information. Click the button and verify the correct content is showing.
If you’re not seeing the correct image and description click the “Scrape Again” button to refetch the info.
Troubleshooting
If you’re not seeing the correct info after clicking the “Scrape Again” button:
- Verify correct spelling for the meta data info.
- make sure you have the website this content is attached to correct in the <meta property=”og:url” /> meta tag.
- check the path to the image is set in the <meta property=”og:image” /> meta tag
No responses yet