Sharing links on social media services is easy, but making them look good and getting people to click them is not. How do you make sure your shared links are the best they can be? Here’s what you need to do.
This article provides essential background information and it gets a tiny bit technical in places. I could just say install plugin X, but you would not know why it worked or what to do if it does not work.
Understanding how and why social shares work enables you to understand how social plugins work and also where to look when things do wrong.
This article looks at the essential information hidden in web pages that social media requires in order to present your shared links in the best possible way.
Without this information, your shared links might look something like this:
http://www.rawinfopages.com/blah/blah…
This is almost meaningless. The reader can gain a bit of information from the text link, but it is nowhere near as eye-catching as this:
The question is, how do we make sure our social shares look as good as this and are not just a meaningless URL?
Get the page content right
First you need to make sure that the page you are sharing has the right content. Second, you need to insert special codes or tags within the web page HTML code.
These tags are not visible when the web page is viewed in a browser, but they are used by social media when the URL is shared and also by search engines such as Google. A full set of tags describing a page is essential for SEO (search engine optimisation) and this is a bonus of improving the presentation of your social shares..
There are meta tags, Open Graph tags and more tags. Before considering tags, we need to make sure that a web page has the right content. There are certain elements on the page that are essential when sharing on social networks.
The importance of featured images
You may have noticed a large image at the start of many articles on the web. This is not only visually attractive for the reader, it is also important when it comes to sharing links on social media.
The image could be inserted directly into the web page near the start like any other, but mostly this large image is what WordPress calls a featured image.
When creating a new post in WordPress, look in the sidebar on the right and down near the bottom is an item called Featured Image. Click the link and select the image to use.
It is just an image from the media library, but it needs to be large, such as 900 pixels or more wide and 450 or more high.
Make sure that the image has a short, but descriptive title. More importantly, make sure that the Alt Text has a long description of the image of around 150 characters. The text should describe what is in the image and/or the article.
Best size for featured images
The best size may be determined by the WordPress theme you use, so look in the the documentation provided with it, or check on the developer’s website for recommended image sizes.
In addition to this, different social media services use different dimensions for the preview image used with shared links. This is a pain and what is right for Pinterest is wrong for Facebook, and Facebook images do not look good on Pinterest.
There is no single image size that fits all websites and all social networks.
The theme on this site uses 940 x 420 pixel featured images. This letterbox style looks fine on the page, but Facebook crops the left and right edges to make it square. This means that important content in images, such as the text heading, needs to be in the middle so it is not cropped
People who share a lot on Pinterest prefer large portrait images (tall and narrow). For example, 600 x 900 pixel images, but many people use much larger ones. On Pinterest the width is important, but the height is flexible. An image that is 600 x 1200 works well and stands out better on a page full of pins than one that is square or letterbox shaped.
Facebook would crop the top and bottom of tall Pinterest images in an attempt to make them square, so bear this in mind when placing text on them.
If social media services all used the same format images it would make life a lot easier for us.
If a web page has no tags, social sharing services sometimes use the featured image and alt text for the preview. The reason is that some websites don’t have meta tags, Open Graph tags or any other tags, so when sharing links the sharing service will sometimes use the featured image instead.
Do not rely on the featured image alone because it may or may not work. You need a featured image, but it is very important to have to have the correct social tags.
We will see how to use that featured image a bit later. First, let’s look at meta tags.
Use old school meta tags
Meta tags describe the content of web pages and they are basically special codes that are placed in the header part of the web page HTML. You don’t see this code, but when social network sharing services and search engines like Google access the page, they can read the code and use it in various ways.
The most basic and oldest meta tags are the description and keywords. If you were to look at the code of a web page, somewhere near the start would be a couple of lines like these:
<meta name="description" content="Create sketches by drawing on Google Keep notes and then use them in Google Docs by dragging them to a document to insert them." /> <meta name="keywords" content="google keep,google docs,google keep drawing,google" />
The first is a description of the page content in under 160 characters. The second is a list of keywords that people might search for at Google, Bing and other places.
If you right click a web page and select View Page Source (different browsers word this differently), somewhere near the start of the code are the two meta lines above.
At one time they were crucial for search engine ranking and SEO, but these days they are not as important. Google says that there are around 200 factors that affect search ranking and these meta tags are are just two. They aren’t the most important, but you still need to add them.
When sharing links to your web pages on social media services, these meta tags might be accessed. They are not always used and there are better tags as we will see later, but if all others are missing, these might be used instead.
They are a backup. When social media services and search engines analyse the page, if they can’t find anything better, then these meta tags are used.
Use WordPress SEO plugins for meta tags
When web pages were built by typing in code into an HTML editor you had to enter the meta tag codes yourself. These days most people use a WordPress plugin like All-in-One SEO and Yoast – the two most popular with millions of users between them.
These two plugins are very different, but the features are similar and they both enable you to create meta tags, including the title and description. There are others, but most people use one or the other of these two.
Meta tags with All-in-One SEO
This form for entering meta tags appears at the bottom of the page below the editor when typing in or editing a post and you just fill in the boxes before clicking Publish.
Long titles may be cut short when shared or in search results, so make sure the important keywords are in the first 60 characters.
Descriptions can be any length, but characters beyond 160 may be ignored, so make sure everything fits into 160 characters.
Meta tags with Yoast
This appears below the post editor when you are creating or editing a post. Click the blue Share button on the left and at the top is Snippet preview. It shows how the page would appear in a Google search.
- Click the Edit snippet button
- Enter the SEO title and make sure the bar is green
- Enter the Meta description and make sure the bar is green
- Add a keyword further down the page, below the snippet editor
Action points
- Create a large image and set it as the featured image for a post
- Make sure the image has a title and alt-text description
- Right click a post on your site and select View Page Source. See if you can find the meta description tag and meta keywords tag near the start
- Get either Yoast or All-in-One SEO plugins
- Make sure you add the title, description and keywords information to all posts using these plugins
