Published on

How to make meta tags in 2021

Authors

How to make meta tags in 2021

As time goes on, more and more websites are integrating meta tags to pull information off your website. But... how do we set this information? This short blog post will cover it all.

What you'll need

  • Basic HTML knowledge
  • A website made in HTML

Use a meta generator

I made a pretty simple and straightforward meta generator that covers Facebook, OpenGraph, Twitter, Discord, Google, etc which you can get right here. It's free to use and React-safe. It does a lot more than some other meta generators.

Let's go over what it does

  • Webpage name - This field sets a name for your webpage, which Discord, and others show above your title. Put something like "AR's Bakery" here.
  • Title - This field sets your webpage's title on website previews (this doesn't set your actual webpage title, AKA <title>). Put something like "AR's Bakery - Brownies, Cookies And Everything In Between"
  • Description - Put a really short description of your website here. Do note, longer descriptions don't look so good on previews, so make it concise. Put something like "The best bakery in town with everything you need."
  • URL - A URL to your website. Don't use a URL shortener here, just a direct URL to your website. Put something like "https://www.arsbakery.com"
  • Twitter Username - A twitter username associated with your account. Don't put @ in front of it. Put something like "arsbakery"
  • Image - A URL to your website's banner or logo should go here. Use imgur if you don't have an image upload server. Put something like "https://imgur.com/h3hG2.png"
  • Primary language - This meta tag isn't used a lot, but it is always good to have it than to not. This specifies which language your website is using. I suggest you also put lang="some language" as part of your <html> tag as well. Put something like "en"
  • Theme color - This color is used as the top bar on Chrome mobile, and is displayed on your website's embed on Discord. Put a hex color code here, like "#121212"

Once you have filled that out, scroll back up, and click on either "Copy" or "Copy (React-safe)". If you are only putting this on a static HTML website, use the Copy button, and if you are putting this on a React, Next.js, or similar website, use the React-safe option.

Now you should have something like the following, copied:

<meta charset="UTF-8" /><meta property="og:type" content="website" /><meta
property="twitter:card"
content="summary_large_image"
/><meta name="viewport" content="width=device-width, initial-scale=1" /><meta
property="og:site_name"
content="AR's Bakery"
/><meta
property="og:title"
content="AR's Bakery - Brownies, Cookies And Everything In Between"
/><meta name="title" content="AR's Bakery - Brownies, Cookies And Everything In Between" /><meta
property="twitter:title"
content="AR's Bakery - Brownies, Cookies And Everything In Between"
/><meta
property="og:description"
content="The best bakery in town with everything you need."
/><meta
property="twitter:description"
content="The best bakery in town with everything you need."
/><meta name="description" content="The best bakery in town with everything you need." /><meta
name="language"
content="en"
/><meta name="twitter:site" content="@arsbakery" /><meta
property="og:url"
content="https://arsbakery.com"
/><meta property="twitter:url" content="https://arsbakery.com" /><meta
property="og:image"
content="https://imgur.com/h3hG2.png"
/><meta property="twitter:image" content="https://imgur.com/h3hG2.png" /><meta
property="language"
content="EN"
/><meta name="theme-color" content="#121212" />

Put this code under the <head> tag and before the </head> tag. If you don't have these tags, make them.

And that's all! You now have meta tags on your website!