back to top

info(at)sypo.uk01539 741461

Make Your Posts Stand Out On Social Media

Posted on 17th June, 2019

Make Your Posts Stand Out On Social Media

By Mark Syred. Difficulty level: Intermediate

If you add a link to a post on Facebook, you might have noticed that it will often add a small preview of the page you're linking to, below your text. The same thing often happens when sharing a link in Twitter or LinkedIn. Have you ever seen those previews and wanted to have control over what will be shown when someone shares a link to your site?

Well, thanks to Facebook's Open Graph mark up and what Twitter calls, "Twitter Cards," you can. And all it takes is a few lines of code between the <head> tags on the relevant webpage. Were you to share this blog post to Twitter, Facebook or LinkedIn, it would be presented on the page in a similar fashion as the example from the image shown above.

Adding the code below to the head of any webpage will achieve this effect. It doesn't matter if the page you want sharing isn't a blog post, just change the relevant parts to match the page you do want sharing.

<title>Blog Post Title</title><!-- max 60 characters -->

<meta name="Description" content="First 160(max) characters of the article"><!-- Max 160 characters -->

<!-- Facebook Open Graph code -->

<meta property="og:type" content="article">

<meta property="og:title" content="Blog Post Title">

<meta property="og:url" content="http://yourdomain.co.uk/blog-post-title">

<meta property="og:description" content="First 250(ish) characters of article">

<!-- Important note: for punctuation in the og:description, follow guidelines at http://www.w3schools.com/charsets/ref_html_ansi.asp (apostrophes are, for example: &#039;)-->

<meta property="article:published_time" content="YYYY-MM-DD">

<meta property="og:site_name" content="Your Domain">

<meta property="og:image" content="http://yourdomain.co.uk/images/blog-post-title.jpg">

<!-- End Facebook Open Graph code -->

<!-- Begin Twitter Card -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@yourtwitterhandle">

<meta name="twitter:title" content="Blog Post Title">

<meta name="twitter:description" content="Up to 75 characters of article summary">

<!-- Important note: for punctuation in the twitter:description, follow guidelines at http://www.w3schools.com/charsets/ref_html_ansi.asp (apostrophes are, for example: &#039;)-->

<meta name="twitter:image" content="http://yourdomain.co.uk/images/blog-post-title.JPG">

<meta name="twitter:url" content="http://yourdomain.co.uk/blog-post-title">

<!-- End Twitter Card -->

... and the parts I have left as comments, don't need including when you upload your finished page, they're just there for guidance.

Above is shown what you need to add to the head section of your HTML pages if you are building these from scratch or part of a templating engine. However, in some content management systems, like Wordpress, there are plugins that can handle this stuff for you. They add the code and give you the control you need over what image will be displayed, along with which text.

Share this article

This website uses cookies to deliver the best experience whilst browsing. More info

Accept