I’m four months into my journey of becoming a MERN stack JavaScript Developer as a boot camp student. I’ve never been someone to shy away from a challenge and with a non-technical background there have been some concepts that have been more challenging to grasp than others but nothing I haven’t been able to overcome. It’s also a good thing I enjoy research and learning new concepts since I won’t stop until I understand how pieces of a puzzle fit together.
This past week I encountered a challenge completely unrelated to JavaScript. Given we’re in the age of social media that is literally everywhere from Facebook, Twitter, Instagram to Pinterest or Etsy and LinkedIn, there are copious amounts of applications to engage with where crisp images are a key component. We all know, when scrolling through various feeds how captivating the right image can be in grabbing someone’s attention. Having written a few blog posts on Dev.to I wanted to enhance my posts with images that would display when sharing posts to different sites, especially LinkedIn.
When writing a new post in Dev.to the editor opens with a dedicated header section that prompts for specific information to be included in each blog post.
---
title:
published: false
description:
tags:
---
Adding the cover_image: tag with a link to the image address in the header section is simple and straight forward.
---
cover_image: <link to image address>
title:
published: false
description:
tags:
---
Once a post has been published a share bar appears at the bottom of the post.
Sharing the post to another site can be accomplished by clicking on the three black squares circled in red.
Once clicked a popup box appears.
I selected Share to LinkedIn and while the article was packaged to display on LinkedIn, the thumbnail image was blank and only included a title card.
For the life of me I couldn’t figure out why a simple image wouldn’t render. I tried Share to Facebook and the image rendered as expected. Since it rendered to one application and not the other I wondered if the issue was specific to LinkedIn.
After copious amounts of research of LinkedIn’s image requirements here’s what I learned:
- The image requirements for LinkedIn are specific to their sharing module. The maximum size of a file is 5 MB. The minimum image dimensions: 1200 pixels wide by 627 pixels high.
- In the event an image meets the specified requirements but fails to render as expected the hosting site of the image could be blocking LinkedIn’s access.
- The image may be located on a protected website or directory.
LinkedIn also has a tool called Post Inspector. Inside the inspection bar, copy the link of the blog post or article to be shared on LinkedIn then click Inspect. A display card appears and if the image doesn’t render simply scroll down the page to the image information and click the highlighted link for additional details.
For images to display on LinkedIn it comes down to meta data tags and something called OG which refers to open graph tag. Open graph tags are critical for social media when it comes to sharing images. As a web developer, this is also important to know if the type of website being built intends to handle social commerce or track client data for conversions or click through rates. Open graph tags have a direct influence on the performance of links on social media.
For my Dev.to posts, here’s how I modified the header section to include the meta data tags and open graph tag to get images to render on LinkedIn.
---
cover_image: <link to image address>
title:
published: false
description:
tags:
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="{link to image address}" />
---
Once I modified the header section I didn’t have a problem getting a specific image to render to LinkedIn. Remember, not every image will require this but if you’ve fallen in love with an image that won’t render as expected give this a try!
Top comments (0)