How to set up Open Graph tags
Mar 3rd 2023
Opengraph meta tags are necessary for any website to enable rich media content. It can increase your click-through rates and social media engagement.
But to make sure it works we should add that in the head section of our webpage. You can do that using many options, and today we are going to talk about a few of them.
WordPress
Install Yoast's SEO plugin. Go to the editor for a post or a page. At the bottom, you should see a Yoast SEO block. Go to "Social" and then "Facebook".
Fill in the input fields which say Title, Description, and Image. If you don't set the OG image and the post has a featured image. Yoast uses that as an OG image.
It is also ideal to add a fallback OG image that represents your brand. This will appear when you don't set the custom tag.
You can add that in the Yoast setting. Go to Yoast > Social > Facebook and make sure the toggle is enabled.
Wix
Wix pulls in common Opengraph tags from other variables, like the page's meta title and description, which means you don't need to do it.
But you can also customize them as per your needs for each page in the "Social Share" settings.
For setting a custom open graph image globally on the website, visit Settings > Social share on the main menu.
Squarespace
Squarespace by default uses the page title and description to set up the og:description and og:title. For the image you can go to Page Settings > Social Image > Upload. For setting a custom open graph image globally on the website, go to Page Settings > Advanced > Page Header Code Injection. Here you can add the custom open graph meta code generated by Opengraphify.
Shopify
Shopify also pulls in common Opengraph tags from other variables, like the page's meta title and description, like the website platforms above.
Shopify allows you to only customize the image tag. You can update it from Online Store > Themes > Customize > Theme Settings > Customize > Social Media > select an appropriate image.
HTML Markup
Adding the open graph tag is easy in the HTML, you can add the tags inside the opening and closing tags of the head section.