Open Graph Images: What Are They and How Do You Set Them?
Have you ever copied a link into a messaging app or social media and it expands into an image and excerpt? For example, copy the link of this page (https://www.paperstreet.com/blog/open-graph-images-what-are-they-and-how-do-you-set-them/) and paste it into any application or social media of your choice.
More likely than not it will open up into a small preview of the page including an image and an excerpt of text. The image that loads here is known as an Open Graph image, or OG image for short. These images utilize the open graph protocol which allows any page to “become a rich object in a social graph” as described by the open graph protocol website (https://ogp.me/). These images are explicitly set in a web pages header in order to accurately show a preview of the page or an image that describes the page. An og image is directly set in the header of a page like the following:
<meta property=”og:image” content=”https://example.com/path-to-image.jpg” />
On a WordPress website, you can easily set a page or posts og image by setting a featured image. While a featured image is often for multiple purposes on a WordPress site, it is also by default added as the page’s og image. If you are not using a WordPress site, you may need to manually set the og image of your pages. If you do this manually, you would have to set this on every page in order to ensure an image loads when the open graph excerpt loads on whichever application you shared your link on. Due to this, we recommend having a default image that adequately represents your site generally and have that load on any page where the image hasn’t been set yet.
A preferable solution however is to utilize a plugin to manage this on your WordPress site. At PaperStreet, we utilize Yoast SEO in order to manage og images on top of its many other SEO features. With Yoast, you can directly set the og image of a page with the plugin’s tools and this would also allow you to have a different image from the page’s featured image.
If you are utilizing Yoast, you can follow these steps to change your og image:
- First go onto the backend of the post or page you wish to edit.
- Once on the page, scroll down until you find the Yoast SEO field group. There, select the social tab.
- Here you can set what you would like your social image to be. This will create a distinct og image from your featured image so you can use the featured image for other purposes on your website. The recommended size for your social image is either 1200×630 (1.9:1) or 600×315.
Need Assistance? We’re Here.
Still have questions? Something not clear? Need help with Yoast or your WordPress website? PaperStreet is here to help. Contact us today and get support from our Help Desk, or speak to a member of our team about your unique concern.
About Us
Did you know more than 200 clients have worked with PaperStreet for more than 10 years?