Development Web

Make Your Website Shine Through Shareable Meta tags

June 20, 2023
Make Your Website Shine Through Shareable Meta tags

Ever devel­oped a web­site? When’s the last time you looked at the metatags you’re using? If your answer is who cares,” then what hap­pens when you share a link to your web­site on Slack, LinkedIn, or any oth­er social media site? Does it look like this? 

Scott’s right, that looks real­ly bad. You’ve seen links shared that look great before, how do we go from this ter­ri­ble shared link, to some­thing that looks great, like this? 

The answer is metatags. In this post, I want to go over how you can make sure your con­tent looks amaz­ing when shared on oth­er websites.

Exam­ple #

Metatags are not spe­cif­ic to a frame­work, but are a uni­ver­sal stan­dard. This is how social media sites process what you want them to process. They also have the ben­e­fit of help­ing Google search engine crawlers cor­rect­ly iden­ti­fy your con­tent. If your web­site doesn’t have any metatags, typ­i­cal­ly a social media site will try to infer the infor­ma­tion they need, but they’re almost always wrong because it’s impos­si­ble to know the right details. 

I’ll be show­ing how we can set­up the right details in Nextjs and React, how­ev­er, the raw html metatag struc­ture is the same for any web frame­work you’re using. Below is an exam­ple of how I struc­ture my metatags for Nex­tjs v13 in the RootLayout component. 

This guar­an­tees that metatags are inject­ed into the head­er, where they’re expect­ed to be, for any giv­en page. Their names are pret­ty self-explana­to­ry, but some of the more impor­tant ones are image, title, descrip­tion, and author. This is because these tags are the main pieces of infor­ma­tion shown in a social media card. Type is more use­ful for web crawl­ing, and can be web­site” or arti­cle” as an example.

The rea­son this exam­ple is struc­tured with props, instead of being hard­cod­ed, is because we can pass the object below into the lay­out on any page. This makes it dynam­ic, and is espe­cial­ly use­ful for [slug].tsx pages (blogs or dynam­i­cal­ly gen­er­at­ed content). 

Trou­bleshoot­ing #

Once you’ve added metatags, how can you make sure it looks right? Some social media sites cache your web­site, so if you make changes they won’t be reflect­ed when you share a sec­ond time to val­i­date your metatags. We can solve this prob­lem by using some nice tools shared by the major social media sites:

  • LinkedIn Post Inspec­tor — this is my favorite tool. This site does not cache data, so it’s always up-to-date with your site. It shows you issues, what tags it’s look­ing for, and tips for improv­ing your tags.
  • Face­book Shar­ing Debugger
  • Twit­ter Card Validator
  • Social Share Pre­view — This site is use­ful as a catch-all, how­ev­er if your head­er isn’t con­fig­ured prop­er­ly, it might think every­thing is okay, but the actu­al social media site may disagree

You can also pop open the inspect element tool in your favorite brows­er, and look at the header tags man­u­al­ly to see if the metatags are show­ing up:

Con­clu­sion #

Metatags are pret­ty easy to imple­ment, and quick to val­i­date if they’re work­ing. I high­ly rec­om­mend set­ting up at least one sta­t­ic set of metatags, at a min­i­mum, so that if you share any page for your web­site, it will look real­ly nice. From there, you can add more and more depend­ing on how impor­tant each page’s iden­ti­ty is, and if you want dif­fer­ent head­er images or descrip­tions in the share link.

The real val­ue in adding metatags is how impor­tant sweat­ing the details is to you. This is one high­ly prac­ti­cal and easy way to make your web­site shine in how share­able it is.

David Crawford
David Crawford
Software Developer

Stay in the loop with our latest content!

Select the topics you’re interested to receive our new relevant content in your inbox. Don’t worry, we won’t spam you.

Using View Model Protocols to manage complex SwiftUI Views

Using View Model Protocols to manage complex SwiftUI Views

March 11, 2021

Managing complex screens or views that depend on asynchronous services or the need to pull in state from across your app can be tricky to get right. The most common way to address this in SwiftUI is by abstracting that logic into a dedicated view model for that piece of UI.

Read more
Product Strategy: Turning your App Ideas Into Reality

Product Strategy: Turning your App Ideas Into Reality

April 16, 2020

Anyone who has been there knows, it can be incredibly frustrating having an app idea and not being able to bring it to life. And with organizational, technical, or financial roadblocks in the way, it can be equally frustrating to simply get a project off the ground.

Read more
Why Your Business Needs to Be In the App Store—Yesterday

Why Your Business Needs to Be In the App Store—Yesterday

January 20, 2021

Whether you’re a Fortune 500, a startup, or somewhere in the middle, there are countless reasons to consider developing a mobile smartphone app. From giving customers a more complete brand experience to gaining credibility in the marketplace, here are just a few of the benefits of having an app.

Read more
View more articles