Now that you have a lot of good content on your website, it's time to make sure to share it on social media! The massive audiences of Facebook and Twitter make them the best platforms for sharing your updates, blog articles and more. This article teaches you how to optimize this outreach potential.
Note: We recommend a review of the Easy Busy Pets website builder article as well. This is because if you are familiar with a bit of SEO coding, you can skip the UI and add your meta tags directly into the code. Using the Easy Busy Pets website builder, simply edit the page, click into the Header (<head> ... </head>), and add your extra scripts and tags using the scripting widget.
The Open Graph meta tags
A degree of control is possible over how information travels from your Easy Busy Pets website to Facebook when a page is shared or liked. This is made possible by defining tags in the <head> part of your website's code when working with the Easy Busy Pets website builder.
Why is this so important?
Lot's of traffic can come from a social network onto your website!
If you don't have these tags established, your post might end up looking something like the following:
In the illustration above, a link was shared on Facebook, but the thumbnail was missing, or there might be a totally different picture than you expected. Basically what's happening here is that Facebook is making a guess at what should be showing.
If you spend a couple minutes to add a couple of Open Graph tags, it can help you show more of what is important on your post:
Adding Open Graph tags to your website won’t directly affect your on-page SEO, but it will impact the performance of your links on social media.
Implement Open Graph Tags
How do you implement OG tags?
They belong to the <head> part of your page’s HTML. With the Easy Busy Pets website builder, you don't need to manage the code. There is a visual interface to update your tags, and this can be found in your page configuration panel, under SEO settings and demonstrated below:
Let's use the example website petcaredemo.com, an Easy Busy Pets hosted website. On Facebook someone decides to post a link to this page as part of some commentary. As illustrated in the image below, this results in generated clickable content that may include an image, title, description, and more.
Without OG Tags established on that Easy Busy Pets website page, Facebook is making a best guess on what the shared link should be displayed as.
Let's update the OG Tags to make it look better!
Here's what we want it to look like:
The settings for all meta tags in the header, is where we want to go to manage OG tags. Login to your Easy Busy Pets account, and go to the page in question. Click "edit page" on the top right of the screen to enable the website builder for that page.
Enter the configuration panel at the left of the screen:
- Expand the panel (left to right)
- Under Search Engine Optimization (SEO) settings, click the "Meta Tags" button.
A dialogue appears with options to add your tags:
The text shown on a Facebook feed is in bold and catches one's eye, so make sure it is compelling. We recommend you keep it to 80 or less characters.
Example: <meta property=”og:title” content=”Your eye-catching title here” />
This is not the same meta description that shows in search engine page results. Instead, people see it in your Facebook post under the Title. It won't affect your SEO, so don't try to sneak in a bunch of search keywords. Instead, make it interesting enough for users to click on your post. We recommend you use 150-200 characters or less in your descriptions.
Example: <meta property=”og:description” content=”Your entertaining and descriptive copy here, if your meta description is good, use it.” />
We highly recommend you set this tag, otherwise Facebook might show nothing or something that is completely irrelevant or even unwanted.
Images are usually the most compelling parts of a post, and they don't have to be the same images defined on your page. You can link to an entirely different image as long as you know the path / url to describe how to find it. A frequently recommended size for an OG Image is 1.91:1. The recommended pixel dimensions of 1200:630 px (aspect ratio of 1.91:1). At this size, your thumbnail will be big and stand out from the crowd. Don’t exceed the 5MB file size limit.
Example: <meta property=”og:image” content=”https://lh3.googleusercontent.com/zt2nZmiMqDuyJtNcKyoU18GLWb48_i916iOHcZ9nRUTFRlh1sQStzNTlvx-4ALnF_pu18JHkDtphHkJKwE6LvUdogwdjlA=s0” />
To learn more about what tags you can implement, please refer to the official open graph website: https://ogp.me/.
Check your Open Graph Tag Settings
One can always start a post, and without publishing, simply re-enter the URL to see how it looks. Also, Facebook has created a tool called Sharing Debugger to help confirm your settings.