How to Add Social Sharing to Your Website

LinkedIn, Facebook, Text Messaging, Twitter

Matthew Sedlacek
Nov 26, 2020 · 4 min read
Image for post
Image for post
Photo by Hello I'm Nik 🎞 on Unsplash

I recently created a portfolio website to share with my future employers. One thing that I did not take into consideration, though, is how sharing the link to my website would look on social media sites like LinkedIn, Facebook, etc. So, when I went to add my new portfolio website to my featured section on LinkedIn, LinkedIn provided the following image and text for my post.

Image for post
Image for post
LinkedIn without Social Sharing

This is not at all what I wanted. There was no image and no description of the website. To fix this issue, I learned that I needed to add meta tags to the head of my index.html file (see below for the source code).

Meta tags define the metadata within an HTML document. Moreover, metadata, “… is used by browsers (how to display content or reload page), search engines (keywords), and other web services” (w3schools.com). Therefore, meta tags allow developers to control how their webpages are viewed by users outside their website.

In the above example, there are eight different meta tags. All of which I will walk you through. Please note that you do not need all of these types if you are only concerned with posting to LinkedIn (see official documentation here).

1)og:image

The og:image is the image you would like to be shown in the preview for your website. The image I chose I took from Netlify as they generate a preview image of your website after a successful deployment. You can also take your own screenshot, add it to your repo, and then reference the relative path instead.

Image for post
Image for post
Netlify Screenshot Image

2) og:image:type

The og:image is the type of image you used for og:image. Typically jpg and png are supported.

3) og:image:width

The og:image:width is customizable, but LinkedIn allows a maximum 1200-pixel width.

4) og:image:height

The og:image:height is customizable, but LinkedIn allows a maximum 627-pixel height.

5) og:type

The og:type is often optional but the meta tag details what type of object you are sharing; a website in our case.

6) og:url

The og:url is the URL of your website. When your post is clicked on it will take users to your website. This URL is also often used as an ID by the site you are sharing on.

7) og:title

The og:title is the display name of the website you are posting. This does not have to be the name of the website. It can be something else entirely.

8) og:description

The og:description is a short description of your website and is useful to users as it gives them an idea of what they will see on your website.

** Important** If you have tried to add your site to LinkedIn already, you need to clear LinkedIn’s cache. Otherwise, you will need to wait seven days for LinkedIn’s cache to clear automatically. To clear LinkedIn’s cache, go to the following website and input your url.

Now that we have added our meta tags, let’s see what LinkedIn provides us with now.

Image for post
Image for post

This is exactly what we wanted! An image preview of our site, the title for our post, and a short description of the website. Let’s see the finished product in LinkedIn and other social applications.

Image for post
Image for post
LinkedIn Featured Section
Image for post
Image for post
Facebook
Image for post
Image for post
Text Messaging
Image for post
Image for post
Twitter

Thank you for taking the time to learn more about Social Sharing. I hope this blog will help you with sharing your future applications across multiple forms of social media.

Resources

“Best Practices for Facebook Sharing.” Sharing — Documentation — Facebook for Developers, developers.facebook.com/docs/sharing/best-practices.

Higgs, James. “How to Add Thumbnail Images to the ‘Featured’ Section of Your LinkedIn Profile (for Web Apps/Sites).” Medium, Medium, 8 May 2020, medium.com/@jamesyhiggs/how-to-add-thumbnail-images-to-the-featured-section-of-your-linkedin-profile-for-web-apps-sites-917346235932.

“HTML Tag.” HTML Meta Tag, www.w3schools.com/tags/tag_meta.asp.

“Open Graph Protocol.” The Open Graph Protocol, ogp.me/.

Post Inspector, www.linkedin.com/post-inspector/inspect/.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Matthew Sedlacek

Written by

Software Engineer — Full Stack, JavaScript, ReactJS, Ruby on Rails, OO Programming (https://www.matthewsedlacek.com/)

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Matthew Sedlacek

Written by

Software Engineer — Full Stack, JavaScript, ReactJS, Ruby on Rails, OO Programming (https://www.matthewsedlacek.com/)

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store