How to Add Social Sharing to Your Website
LinkedIn, Facebook, Text Messaging, Twitter
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.
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).
<head><!-- Social Sharing --> <meta property="og:image" content="https://d33wubrfki0l68.cloudfr
ont.net/5fbc10f514319a00073fcbfb/screenshot.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1024"> <meta property="og:image:height" content="1024"> <meta property="og:type" content="website" /> <meta property="og:url"content="https://www.matthewsedlacek.com/"
/> <meta property="og:title" content="Portfolio" /> <meta property="og:description" content="Visit my portfolio page
to view my contact info, resume, and work samples" /></head>
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.
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.
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.
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/.
