Social media is here to stay - but how does it impact websites?
An old saying claims a picture is worth more than a thousand words; We have all heard it - but what does it mean for your social media accounts?
The average adult can read around 250 words per minute while the attention span of users are typically around 9 seconds.
250 wpm/60*9 = 37,5 words
In other words, we can either have the reader read 37.5 words or look at eye-catching images; which one keeps the users attention?
Improving your websites social media sharing
By default, social media websites tries to create a small preview of all websites; regardless of additional metadata present to improve the quality, unfortunately; they don't do a good job anymore.
Let's have a look at an example:
Does this appeal to you as a user?
How about this share? Improvements over the other one includes
- Big image to catch attention
- A longer description of the content
How did we get there?
Several standards have been formalized to create Machine Readable Data/Structured Data, however unfortunately as it often is with standards; every new standard takes on the challenge of being the one standard to rule them all..
As the goal of this post is to enable Social Media sites and not improving SEO / readability in general; it will be focused on what main Social Media websites are using. I'll write up an SEO post at a later stage.
Facebook and LinkedIn both utilize the Open Graph Protocol to extract information about the shared URL, whereas Twitter relies on Twitter Cards
The common ground for both, is they rely on <meta> injection opposed to injecting data using Resource Description Framework in Attributes.
Both standards have various online tools to test data extraction; If we run the tools against the first and second link and compare the results:
Facebook uses the Open Graph Protocol, which is a description of metadata a developer can add to a website to provide more contextual information for search engines and preview generators.
Using the Facebook sharing debugger, we can see what information have been extracted for a particular link.
If we look at what was extracted for the first link, we get the following data.
| Property | Before | After |
|---|---|---|
| Url | https://www.kenc.dk/post/2017/10/25/driving-around-the-us | https://www.kenc.dk/post/2017/10/25/driving-around-the-us |
| type | website | article |
| title | Driving around the US (and proposting to Maria) | Driving around the US (and proposting to Maria) |
| Description | Life have been quite interesting lately - more of this to come! - but Maria and I had three excellent weeks of vacation driving around on the West coast of the US. | Life have been quite interesting lately - more of this to come! - but Maria and I had three excellent weeks of vacation driving around on the West coast of the US. |
| image | https://kenccdn.blob.core.windows.net/headers/Default.jpg | |
| Updated time | 1509056651 | |
| published_time | 1508930017 | |
| image alt | Driving around the US (and proposing to Maria) |
Suddenly we can see a big difference in the data available and why Facebook is doing a better job in creating the preview.
Adding the first bunch of meta data tags
In order to improve the data, we need to identify which tags to add to a specific website.
A set of four required metadata properties is part of the protocol; the basic four tags include the type, type, url and image of the content. As Open Graph Protocol was initially based on Resource Description Framework the metadata should be added as html meta tags.
<meta property="og:title" content="Title of content" />
<meta property="og:type" content="type of content" />
<meta property="og:url" content="https://name.tld" />
<meta property="og:image" content="https://name.tld/images/image.png" />
The different types of content is available on Open Graph Protocol : Types including additional tags for each type, but those 4 is a good start.
Twitter cards?
As Twitter is using their own set of properties, we need to add support for those as well.
Twitter cards have several settings for how the preview should look - for this example; I have applied "summary_large_image".
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@kenmandk" />
<meta name="twitter:title" content="Title of content" />
<meta name="twitter:description" content="Description of content" />
<meta name="twitter:image" content="https://name.tld/images/image.png" />
Whats next?
To achieve a true machine readable website, additional metadata should be injected based on schema.org profiles; however this will be covered in a future post!
For now, happy coding and start sharing with improved social media previews!
0 comments