Why should you care about meta tags? Well, meta tags help ensure your website works as intended. They present your page in the optimal way to search engines and social media websites, thus helping your users with better content, and you increase your traffic and decrease your bounce rate. All while staying invisible to the user. A bit like ninjas.

Meta Tags relevant for SEO

Title

<title>The essential guide for using meta tags for SEO</title>

The content of the title tag directly influences the ranking of your page. It is shown in the browser tabs and is used as the, well, title of your website’s entry on the SERP.

There are no official recommendations concerning the length of the title tag from Google, but it makes sense to keep it around 50 - 60 characters, to ensure that the whole title is properly displayed on the SERP.

We recommend precisely describing the content of the page with the title. This makes it more likely for a user to stay on your page, as the content provides an answer for what they were looking for. What follows naturally from that is that every subpage should have a unique title.

If you want to have a more in depth look at how to perfectly title your page, here are Google’s recommendations.

Description

<meta
  name="description"
  content="Meta tags are essential to optimize your website for search engines. They increase traffic by shaping the first impression of a user."
/>

The description meta tag does not influence ranking, but is displayed on the SERP, unless Google can automatically find a description that’s more fitting to the user’s search query.

Words in your description that match the users search query are displayed bold on the SERP.

We recommend keeping your description short and snappy. Keep in mind that only about 160 characters will be properly displayed on the SERP. Again, the content of your site should actually fulfill what the description promises.

Tools for previewing the SERP look and feel

If you want to test out live how your search listing would look like using a certain title and description, you can use this free SERP snippet generator. It shows you previews for mobile and desktop. (https://app.sistrix.com/en/serp-snippet-generator)

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The viewport tag is vital to ensure your site is properly displayed across devices with different screen sizes. It influences the ranking of your site, because using it shows that your site is optimized for mobile.

Chances are you can copy paste the tag from above and it works. Using the options above sets the width of the page to the screen width of the device and resets the zoom to display a full width page.

For example, here’s our homepage viewed on mobile with the viewport tag (left) and without it (right):

If your page performs any special CSS magic tricks, you might have to go with different parameters. If so, have a look here.

Robots

<meta name="robots" content="noindex, nofollow" />

One tag we should at least briefly discuss is the robots tag, which you can use to explicitly tell search engines to NOT index your site.

This might be useful if you want to prevent certain subpages from showing up on the SERP. If the robots tag is missing, search engines will index your page.

To prevent the indexing of multiple files at once, you can create a robots.txt file. For an introduction on that, have a look here.

Social Media Meta tags

Technically not influencing SEO, social media meta tags are nonetheless crucial for increasing traffic. Using these tags you can specify how your page will look when it’s shared on social media websites like Twitter, Facebook and LinkedIn.

It makes sense to put those tags on every page that users or you might want to share.

OG Tags

OG stands for Open Graph protocol. Those tags are primarily used by Facebook and LinkedIn. If you are not using Twitter’s own meta tags (see below), Twitter also uses the OG tags.

og:title

<meta name="og:title" content="This title is shown when the site is shared on Facebook" />

Regarding content and length, the same guidelines as for your page title apply. It’s best not to include branding here, but focus on the content of the page.

og:url

<meta name="og:url" content="https://symflower.com/en/company/blog/2022/programming-principle-dry/" />

This tag specifies the URL to direct to when someone clicks the post. In most cases this simply should be the URL of the page itself. Using this tag ensures that the page is shared without any URL-parameters.

og:description

<meta
  name="og:description"
  content="Meta tags are essential to optimize your website for search engines. They increase traffic by shaping the first impression of a user."
/>

Use this tag to provide additional information about the content. Most of the time you can use the same description as in the description tag.

og:image

<meta name="og:image" content="https://symflower.com/img/share-image.png" />

The image specified in this tag will be prominently displayed when your page gets shared.

Ideally this image is custom made for the subpage and reflects the content. More generic images can be used for less frequently shared sites.

The aspect ratio for displaying share-images on Facebook is 1.91:1. LinkedIn and Twitter use 1:2. Images with 1200x630px resolution should work for all important social media platforms. Be sure to leave some space around the edges of the image to prevent it from being cropped off on certain platforms.

You can have a look at Facebook’s guidelines for share images for more information.

og:type

<meta name="og:type" content="article" />

This tag specifies the type of content on your page, i. e. article or website. If you don’t plan on implementing Twitter tags, you should at least include this tag. If og:type, og:title and og:description are defined, your page will be displayed more prominently on Twitter as well.

You can find a full documentation of all OG tags here.

Tools for previewing OG data

If you want to preview how your page will look when shared on Facebook, you can use their official sharing debugger

Twitter Tags

Twitter has its own dedicated tags for customizing the display of shared websites. Many of those tags serve the same purpose as the OG tags discussed above, i. e. twitter:title, twitter:description, twitter:image. Luckily it is enough to define OG tags, as Twitter will fall back and use those instead. In the following we will discuss important meta tags exclusive for Twitter.

twitter:card

<meta name="twitter:card" content="summary_large_image" />

The card type specifies the layout of the widget that is generated when your page is shared. Available card types are summary, summary_large_image, app or player. For most cases summary_large_image will be the desired one. This will display a big image and take up a large area inside the tweet, linking back to your page.

Using the card type player embeds a video player in the tweet sharing your site. If you want to use this card type, you have to include some additional Twitter tags as well. Here you can find all of the required tags for that.

The app card type is optimal if you want to make it easy for users to install your app. Again this requires some additional tags. You can find them here

twitter:site

<meta name="twitter:site" content="@symflower" />

With this tag, you can associate your own Twitter page with shared links from your website.

Tools for previewing Twitter tags

To preview how your page would look when shared, you can use Twitter’s card validator.

While working on your website locally, you can use this plugin for Chrome and Firefox to preview how a page would look when shared.

Conclusion

The impact of using meta tags on your website should not be underestimated. The first impression your website makes on a user - be it on the SERP or on social media - is heavily shaped by meta tags.

To get started with meta tags, you can copy the following template into the head tag of your page. Don’t forget to change the content of each tag accordingly!

<title>A nice 50 - 60 character title</title>
<meta name="description" content="Describe the content of your page here! You should use about 160 characters for that." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Open Graph -->
<meta property="og:title" content="The title for when your page gets shared" />
<meta property="og:description" content="Describe the content of your page here! You should use about 160 characters for that." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://symflower.com/" />
<meta property="og:image" content="https://symflower.com/img/shome-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@yourtwittername" />

We hope this guide was helpful to you. If so, consider sharing it, as it might be a helpful resource for others as well. That way you can check out the og:image we are using 😉.

That’s it for now. If you enjoyed this article, don’t forget to subscribe to our newsletter and follow us on Twitter, LinkedIn and Facebook for more articles and news about software development and software testing, or if you are simply into memes.