Ever developed a website? When’s the last time you looked at the metatags you’re using? If your answer is “who cares,” then what happens when you share a link to your website on Slack, LinkedIn, or any other social media site? Does it look like this?
Scott’s right, that looks really bad. You’ve seen links shared that look great before, how do we go from this terrible shared link, to something that looks great, like this?
The answer is metatags. In this post, I want to go over how you can make sure your content looks amazing when shared on other websites.
Example #
Metatags are not specific to a framework, but are a universal standard. This is how social media sites process what you want them to process. They also have the benefit of helping Google search engine crawlers correctly identify your content. If your website doesn’t have any metatags, typically a social media site will try to infer the information they need, but they’re almost always wrong because it’s impossible to know the right details.
I’ll be showing how we can setup the right details in Nextjs
and React
, however, the raw html metatag structure is the same for any web framework you’re using. Below is an example of how I structure my metatags for Nextjs v13 in the RootLayout
component.
This guarantees that metatags are injected into the header, where they’re expected to be, for any given page. Their names are pretty self-explanatory, but some of the more important ones are image, title, description, and author. This is because these tags are the main pieces of information shown in a social media card. Type is more useful for web crawling, and can be “website” or “article” as an example.
The reason this example is structured with props, instead of being hardcoded, is because we can pass the object below into the layout on any page. This makes it dynamic, and is especially useful for [slug].tsx
pages (blogs or dynamically generated content).
Troubleshooting #
Once you’ve added metatags, how can you make sure it looks right? Some social media sites cache your website, so if you make changes they won’t be reflected when you share a second time to validate your metatags. We can solve this problem by using some nice tools shared by the major social media sites:
- LinkedIn Post Inspector — 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 looking for, and tips for improving your tags.
- Facebook Sharing Debugger
- Twitter Card Validator
- Social Share Preview — This site is useful as a catch-all, however if your header isn’t configured properly, it might think everything is okay, but the actual social media site may disagree
You can also pop open the inspect element
tool in your favorite browser, and look at the header
tags manually to see if the metatags are showing up:
Conclusion #
Metatags are pretty easy to implement, and quick to validate if they’re working. I highly recommend setting up at least one static set of metatags, at a minimum, so that if you share any page for your website, it will look really nice. From there, you can add more and more depending on how important each page’s identity is, and if you want different header images or descriptions in the share link.
The real value in adding metatags is how important sweating the details is to you. This is one highly practical and easy way to make your website shine in how shareable it is.
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
May 22, 2024Explore 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 moreHow our Associates are using AI tools: Advice for early-career developers
August 13, 2024Our 2024 Associates at Michigan Labs share their experiences using AI tools like GitHub Copilot and ChatGPT in software development. They discuss how these tools have enhanced their productivity, the challenges they've faced, and provide advice for using AI effectively.
Read moreChicago Roboto 2022 Retrospective
August 11, 2022Scott Schmitz shares some notes of interest from talks at Chicago Roboto 2022, an Android community conference, that took place August 1-2.
Read more