How do you set the Post Title, Description and Image for Sharing on Social Media?
Are you wondering why some people have the most amazing images ready to share for each Social Network, perfectly optimized and your site is just sharing the one image? Maybe not even the image you are wanting to share. Read on to see how you can take control too.
On our main blog site, when we first started to learn about optimizing for Pinterest. We ran into a stumbling block. No matter what we tried our square Facebook image would be pinnable to Pinterest. This might not be a problem, some square images are performing well. But, to us being new to optimizing Pinterest this was a frustration I needed to solve.
The reason that your square or horizontal Facebook image is pinnable – is because Pinterest also uses Facebook’s Open Graph technology the “og:image” meta tag.
Note: “Open Graph is a technology first introduced by Facebook in 2010 that allows integration between Facebook and its user data and a website. By integrating Open Graph meta tags into your page’s content, you can identify which elements of your page you want to show when someone share’s your page.” from https://www.computerhope.com/jargon/o/open-graph.htm.
So if you are using Yoast, SEO Framework or SEOPress (SEO Framework appears to be the most lightweight option for page speed loading time) or another SEO plugin that automatically configures your sharing images, it will set your regular images as “Pinnable”. For some this is no big deal, they don’t mind allowing visitors to pin any or most images. But if you are trying to setup your Pinterest so that only Optimized images are shared, or you are having trouble with which image is shared to Facebook then this little trick will help you.
Since Yoast is the most common I’ll start with this one.
Setting the Social Image on Yoast SEO
If you have installed the Yoast SEO Plugin, at the bottom of your blog post, you’ll see the settings.
Click on the Social Tab, then set your Facebook image. If you only set the Facebook image it should also be used for the Twitter image and other social networks. Remember this image will also be available as a pin for Pinterest users, but honestly it shouldn’t matter as much if the visitor pins this image, as long as you are pinning the Pinterest Optimized images for your posts.
Setting the Social Image with SEO Framework
Click the Social Tab, then set the image Social Image URL, this is used for Facebook/Twitter and other social networks.
Install Social Pug and enable Open Graph settings
Social Pug can also set the social images for sharing for you. Install the Social Pug plugin free or paid version and click on settings from the Social Pug WordPress menu.
This is the default setting, so no need to change anything if you want to allow Social Pug to set your Social images and descriptions. Honestly I would not use the free version for this as it is quite limited, I have this setting disabled on our sites. Using Yoast or SEO Framework will give you freedom to add custom descriptions and choose your post images.
Advanced – using Meta Tag Manager
To take control, you will need to disable the Social Sharing in your SEO Plugin, at least for Facebook, then add the Meta Tag Manager Plugin. We are not affiliated with Meta Tag Manager, we just use this awesome plugin. As a side note: remember only add plugins you need for your site, and we recommend that you choose lightweight plugins when possible as they allow for faster website loading times, which is important for SEO and user experience on your website.
The Meta Tag Manager can be configured for your whole site from the WordPress Settings menu option, or individually per post, at the bottom of the post, we are using the classic editor, this may be different for Gutenberg. In this instance we will setup the meta tags for the post. But, we use both. The main settings for the homepage/whole site settings and on each post for the posts meta tags.
Once the Meta Tag Manager plugin is installed and activated.
Scroll to the bottom of your post and you’ll see this:
If you don’t see the Meta Tag Manager, click on “Screen Options” at the top of your post and put a checkmark beside Meta Tag Manager.
Click the Add Meta Tag button and you’ll see this:
For the Tag Type, select Property.
For the Property Value, we are going to type our own meta tag in og:image:url for sharing on Facebook and LinkedIn.
For the content you need to put the direct link to your image. To get the direct link.
Click upload image button on your post and look for the image you want to share on Facebook and LinkedIn and copy the whole “URL” Line (you can click inside and press ctrl+a on Windows to select the whole line), from below. Do not actually add any image at this time, you just want the URL of the image to use on the meta tag.
To get the image url
Set the image url
Now you will paste the URL for the image in the content field, as shown in this example, remember to set the value to your image url.
Now you can add the Post Title, this will be be used on Facebook, LinkedIn and Pinterest
Now you can set the Post Description, this will be be used on Facebook, LinkedIn and Pinterest
If you are only using Meta Tag Manager for the Facebook/LinkedIn image, you are done. Remember the og:title and og:description will be pulled by Pinterest Rich Pins to the Rich Pin Title & Description too, if you have Rich pins enabled.
Pinterest Rich Pin Description
The Pinterest bottom or other description is set by your image tag, see Adding Hidden Full-Size Pins Without Slowing Down Your Site for more info on the data-pin-description for Pinterest.
However, you can also use Meta Tag Manager to set your Twitter image and title, and much more, as well as many other things unrelated to Social Sharing.
The twitter meta tags are as follows:
There is also twitter:image:alt to set an image alt description and many, many other options, after you have it installed check out the list available from the drop-down arrow, and remember you can set your own meta tags; for example, if a website says you need to add a meta tag to your site for verification that is not in the list.
Let me know if this post helped you or if you have used this or a similar plugin in the comments below. Is there anything else you’d like me to write about?
That’s all for today. Thanks for reading.