

You should see the correctly sized image appear above the Facebook Description meta-tag. Go back to Facebook, start a new post and then paste the URL.
DEFINE METAIMAGE FULL
Now highlight the full URL in the address bar it will look something like this: To do this, go to the front end of the website, navigate to the article. To view the OG image with Yoast standard, you’ll need to share the page directly. If you haven’t got the Yoast Premium version, you’ll need to share the article on Facebook to take a look at the outcome. Yoast has created a decent explanation video to show you just what I mean – The Yoast SEO Social Previews. It gives an excellent overview of how things will appear on social platforms. I love these social appearance templates, released in the latest Yoast Premium version. Within Yoast Premium, it’s possible to preview the Open Graph image before sharing the all-important post on Facebook. You’ll need to save (Update) the post or page for the changes to take effect. To add a Yoast Open Graph image, click on the Social tab, as shown here. Sometimes you need to open it up to see the options. Once Yoast is installed and activated, you’ll find the Yoast edit area at the bottom of any page or post. WP Beginner has a helpful article on installing Yoast SEO on WordPress. Website owners can add metadata, and Yoast also enables us to add Open Graph images to any WordPress article. These help search engines understand the page’s content and control what appears on a Google search. Yoast SEO is a WordPress plugin that enables WordPress website owners to add meta-tags such as a title and description.
DEFINE METAIMAGE FREE
Canva is free for the most part, but you’ll need to pay to produce images in the required size. To create an Open Graph image, use Photoshop, a free image editor like GIMP or an online image editor like Canva. I use my truncated, responsive logo as it’s more modest. Include a logo on all images – this is known as branding, and it helps people recognise the content. Less is more when it comes to text on Facebook images, though. It could even include a call to action, such as ‘FIND OUT MORE’. The image must be relevant to the article content – you can quickly lose a fan if an image is misleading.Īn overlay of bright, snappy title text helps to encourage clicks – show the reader what’s in the article. I wonder if the two platforms will align one day? It seems ludicrous to make us include two, seeing as the resolutions are so similar. Twitter Card image size should be 1024 pixels by 512 pixels. It doesn’t take long to resize an OG image to a Twitter Card image. One thing to be aware of is that the OG image does not fit perfectly into a tweet – content can get cut off.įor a perfect fit, create separate images for the Open Graph image and the Twitter Card image. Twitter robots will default to Open Graph if they can’t find Twitter meta-tags called Twitter Cards.

In my opinion, the small image doesn’t stand out as well. Instead of displaying full width, stacked under the text, the image will float to the left, in column format. When the image is less than 600 pixels in width, the Facebook posts display differently. Be aware of size complications on Twitter. LinkedIn, Pinterest and Twitter will also recognise an OG image when a page is shared. The landscape rectangle (1200 × 630 pixels) looks fantastic on Facebook shares, justifiably because Facebook develops the Open Graph system.

The minimum requirement is 200 by 200 pixels. The recommended size is on the Facebook Developers page – Images in Link Shares. The suggested size for a Facebook Open Graph image is about 1200 pixels by 630 pixels and should not be more than 8 MB, so remember to optimise the image.
DEFINE METAIMAGE HOW TO
I’ll also tell you how to add one to a WordPress page or post, as well as an HTML page. In this article, I show you OG image sizes and where they appear across the internet.

What is a ‘search engine organic listing’?.
