How to generate an article preview for social networks?

A clean, well-structured article outline will greatly improve your reach on multiple social networks and private messengers: LinkedIn, facebook, WhatsApp, Twitter, Signal, etc.

You will have noticed, that we always prefer to click on an article with a clear description and a striking image rather than a simple link.

Think metadata

So you want to share one of your articles with your community and let them discover the content you just wrote. First of all, your article complies with good SEO rules. Obviously, you made sure that the keywords match the title of your article. Finally, you have checked that the reading is simple, clear and fast.

Catastrophe! The content does not contain a nice thumbnail image, nor the expected description or title.

As you have read elsewhere, you have found one or more illustrations to attract the eye and make sure that you are quickly visible on Twitter, Facebook, LinkedIn or even Pinterest.
If you don't know where to find free royalty-free images, consider consulting this list. Once the article is illustrated, SEO friendly and properly written, you can post.

Catastrophe! The content does not contain a thumbnail image, description or the expected title.

You thought you'd see this on Twitter :

Twitter card Siècle Digital - OK Boomer
Twiiter card Ars Technica - Upload
Twitter card Payfit - Covid19

or this on Facebook :

Facebook preview - Creapills - Two Points of View
Facebook preview - Payfit - Covid19
Facebook preview - Ars Technica

You don't see anything, you're sad. And that's where the technical part comes in. In order for your content to appear correctly on the various platforms and sites that will distribute your content, you must "packager" your post.

From now on, we will see together how to create a perfect preview for your articles on social networks.

For your content to appear perfectly on the platforms

[...] you must "package" your post.

How to prepare your metadata

The article or page you share must contain certain information called metadata. Indeed, the "meta" is their little name, are small pieces of code. It is usually a simple line in your web page that will allow the site where the link is shared to retrieve the information that interests him:

• which image to display?
• should we thumbnail an image or video?
• what title to use?
• what description to get?

In general, the set of meta's is called a subject. This object, represents your page that will be shared.

There are other meta, to define other elements. To discover them, it's here : https://ogp.me/. We present some of them below:

• og:title - the title of the object as it should appear on the site, for example "A beautiful story".
• og:type - the type of the object, that is, to which family of objects it belongs. An article, a page, a video, etc. Depending on the given type, new properties can be added.
• og:image - an image that represents the object (the page, the article, etc.) that will be displayed in the news feed of the different platforms.
• og:url - the canonical form of the url (canonical URL) in the graph, i.e.: "http://www.imdb.com/title/tt0117500/“.

The importance of metadata

If the content does not appear correctly, it is because the developer of your site has not correctly written the code that allows to fill the meta.

As a reminder, meta tags are written in the header of the web page you share. The header is the piece of code that you never see on the Internet but it is there! It is hidden at the beginning of the web page and looks like this:

If your web page does not contain "meta"No chance of seeing the right T cards appear.witterthe right post facebook or the pretty link LinkedIn.

To check the existence of metas, you can use the following site, https://www.view-page-source.com/. Copy and paste the url you want to share and the source code with its famous header will appear.

If the meta are present, then you're sure the right voice.

For example, for this article about .SRT sharing on facebook will give the following result:

Important tools to check your content

Help yourself to tools to check your content before you share it. We've got a little list for you below:

• https://iframely.com/embed
• https://socialsharepreview.com/

To help you in the verification of meta, you have a very simple method which consists in using the tools provided by the platforms. Here is a list that compiles some of the best known platforms:

• https://cards-dev.twitter.com/validator
• https://developers.facebook.com/tools/debug/
• https://www.linkedin.com/post-inspector/inspect/
• https://developers.pinterest.com/tools/url-debugger/

Note that it is important to automate the work to be able to quickly retrieve the different image sizes recommended for each platform. For example, LinkedIn has very precise specifications:

• https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=ent

https://getcapte.com/wp-content/uploads/2020/05/check-site-capte.mp4Et to go further on the subject Hubspot has a well-written article:

• https://knowledge.hubspot.com/fr/social/featured-image-not-displaying-correctly-in-social-preview

And the site Blog Your self also offers a tutorial to help you:

• https://www.blogbyyourself.com/choisir-image-partage-facebook/

Once everything is ok, then you're ready to post! Maybe you are missing subtitles on a video illustrating your article or on a small GIF on which you want to put text?

Feel free to add more by using Captured. Indeed, if you didn't know it yet, subtitles have become essential for your content not to be zapped. Many Internet users watch their videos without sound!

IT'S ON