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.

Making your Android project modular with convention plugins
Android Development

Making your Android project modular with convention plugins

May 22, 2024

Explore the journey of Gradle and build tools like it, particularly in the context of Android development. You'll learn the necessity of separating code into modules as projects grow and how Gradle convention plugins can streamline this process.

Read more
What to know about the cost of custom app development
Business Process

What to know about the cost of custom app development

January 10, 2024

We hear a lot of ideas for apps at MichiganLabs. People from large enterprises and small startups, located all over the world, call us to explore their mobile and web-based application ideas, and one of the first questions they ask is: How much is this app going to cost?

Read more
Web app vs. mobile app: How to decide which is best for your business
Business Development

Web app vs. mobile app: How to decide which is best for your business

March 26, 2024

When considering whether to develop a web app or a mobile app for your business, there’s honestly no definitive answer. But this article will help you make an informed decision that aligns with your business goals and sets you up for success.

Read more
View more articles