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.