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

Looking for more like this?

Sign up for our monthly newsletter to receive helpful articles, case studies, and stories from our team.

UX Writing Tips
Design Process

UX Writing Tips

February 3, 2023

Kai shares a few tips he's collected on how to write for user interfaces.

Read more
3 tips for navigating tech anxiety as an executive

3 tips for navigating tech anxiety as an executive

March 13, 2024

C-suite leaders feel the pressure to increase the tempo of their digital transformations, but feel anxiety from cybersecurity, artificial intelligence, and challenging economic, global, and political conditions. Discover how to work through this.

Read more
Between the brackets: MichiganLabs’ approach to software development
Development Team

Between the brackets: MichiganLabs’ approach to software development

February 12, 2024

Read more
View more articles