![Make Your Website Shine Through Shareable Meta tags](https://gratis-creeper.transforms.svdcdn.com/staging/blog/title-image-Meta-tags.png?w=1800&h=1200&auto=compress%2Cformat&fit=crop&dm=1708017688&s=c74f189c2ffc3ce37034930049e42f80)
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.
Looking for more like this?
Sign up for our monthly newsletter to receive helpful articles, case studies, and stories from our team.
![What to know about the cost of custom app development](https://gratis-creeper.transforms.svdcdn.com/staging/blog/Custom-app_web-thumbnail-1080x1080-px.png?w=1080&h=1080&auto=compress%2Cformat&fit=crop&dm=1708017468&s=ddd49f5cb9b41e947fcc9157bc8a7d73)
What to know about the cost of custom app development
January 10, 2024We 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![What the smartest executive leaders are doing right now](https://gratis-creeper.transforms.svdcdn.com/staging/blog/Smartest-execs_1080x1080_040424.jpg?w=2250&h=2250&auto=compress%2Cformat&fit=crop&dm=1721919838&s=b986884e81efdeed51ef17bec2bbd746)
What the smartest executive leaders are doing right now
July 25, 2024We are consistently seeing three things right now in terms of how executives are tackling the technological challenges they are facing.
Read more![Between the brackets: MichiganLabs’ approach to software development](https://gratis-creeper.transforms.svdcdn.com/staging/blog/approach-to-software-development-thumbnail_2024-02-15-200634_fdwn.png?w=1200&h=1200&auto=compress%2Cformat&fit=crop&dm=1708027595&s=b1cfebad3bdfb518b25297b50603c688)