BCMS Logo

Handling HTML Meta tags in BCMS - quickly and easily

HTML Meta tags in BCMS
By Branislav and Arso
Read time 9 min
Posted on 25 Oct 2022
Updated on 7 Mar 2023

Adding meta tags to a web page is a repetitive, manual, time-consuming, and tedious process. But meta tags are a powerful way to let your browser, visitor, and search engine know how to consume and render your website. Using BCMS to manage meta tags is an absolute power-up!

Widget seo is not handled

It takes a minute to start using BCMS

Start free with GitHub
Start free with Google
Gradient

What are meta tags?

Meta tags describe a website's content in brief terms for search engines. Meta tags tell the webpage in the document's HTML. The information is called "metadata," and it is visible only to search engines and web crawlers.

Why are meta tags so important for SEO?

Some tags are crucial for SEO, and others have little to no influence on ranking but are useful in other cases.

You should use high-quality meta tags on your web pages since they are often the primary factor determining which results users click on. 

Well-written meta descriptions will encourage visitors to click through and visit your website. They ensure that search engines know your content to show the website relevant results.

It's about correctly communicating with search engines using the right meta tags. The most important pieces of information for search engines are:

1. What is your page about
2. How to read it
3. Who should access it

Essential Meta tags

Here is a list of essential meta tags for SEO and how to use them properly.

Meta title

A meta title, also known as a title tag, refers to the text displayed on search engine result pages and browser tabs to indicate the name of a webpage. Title tags must provide a clear and comprehensive idea of what the page is about. 

<title>#1 Collaborative Headless CMS for agencies &amp; their clients | BCMS</title>

The title is the first thing a searcher sees in SERPs and evaluates whether the page will answer their question. The quality of a well-written one may influence the number of clicks and traffic, which then affects ranking.

What does a meta title look like?

Meta title needs to drive users’ attention, so they must provide the correct information in a clickbait way.

Meta title

How to improve your meta title for better SEO:

  • Keep tags short and clean. The ideal meta title length is between 55-60 characters. 

  • Use primary keywords in titles. 

  • Use action words that answer questions about how, why, what, and where. 

  • Create unique titles to stand out from the crowd!

  • To improve readability and brand recognition, try breaking up your title tag with a colon, question, or bracket and your company name.

Meta description

Meta descriptions summarize the content of a page. The snippet in search results is often based on it.

<meta name="description" content="BCMS is a headless CMS that makes managing content as easy as building Legos so that your clients control the content, and you control the code.">
Meta description

In spite of the fact that meta descriptions are not a ranking factor, Google uses the description meta tags as a pitch to convince the user that the page they're looking at is exactly what they need.

How to make a good meta description?

  • Keep it within 160 characters

  • Write it to be click-worthy

  • Write a unique description for each page

  • Avoid generic descriptions

  • Match search intent

  • Use your primary keyword 

  • Occasionally, use what-to-expect constructions – ‘Learn how,’ ‘Buy,’ and “Understand.”

Meta robots tag

The meta robots tag is a tag that tells search engines what to follow and what not to follow. In short, it's a simple code that lets you choose which pages you want to be hidden from search engine crawlers and which pages you want them to index.

What does a meta robot tag look like?

The meta robots tag is an HTML tag that provides instructions to bots. Meta robots actually help you to control the narrative. Being able to tell search engines what to follow and what not significantly impacts your site’s presence and SEO optimization. 

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

Here are the most used meta robots values in this tag:

index: tells bots to index the page

noindex: tells bots not to index the page

follow: tells bots to crawl links on the page and that you also vouch for them

nofollow: tells bots not to crawl links on the page and that no endorsement is implied.

When to use meta robots tag?

One colossal misunderstanding is that you have to have a meta robots tag. To be clear: For indexing and linking, if you do not provide a meta robots tag, boots and crawlers will read that as an index, follow, so use meta robots tags only when you want to restrict the way Google crawls a page.

Meta charset

The meta charset specifies to the browser what character encoding to use for the page. Browsers use this information to render the web page appropriately. Said charset gives the browser instructions on how to display text on a web page.

<meta charset="UTF-8">

From the SEO perspective, this process is necessary because using a wrong character encoding can lead to SEO problems like:

  • Search engines need to understand your content, resulting in a lousy ranking.

  • Character formatting issues are destructive to UX

  • Causing your pages to look quite broken

How to set the meta charset properly?

It is crucial to have meta tags that Google understands, so the best thing you can do is to use meta charset tags on all web pages. Doing this will make your content more readable and understandable to crawlers.

There is a list of dozen of different character sets. Still, the most used one, and Google’s favorite one, is UTF-8 because it can show proper text in any language whose alphabet does not consist of English characters. So, use UTF-8 as much as possible.

Meta viewport

Viewport meta tag is used to adapt the site to various devices and to define its visible area for different screen sizes. Using the viewport meta tag, you can determine the width and scaling of the viewport on all devices. The viewport meta tag prevents mobile devices from rendering pages on typical desktop-sized screens, which makes them difficult to read.

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

Meta viewport and SEO

Using the viewport tag, you can optimize the mobile website version and create a more responsive design, which is crucial for a better UX. Moreover, if this tag is present, Google counts mobile-friendly web pages higher in mobile search results. This has an immediate effect on the ranking of the website. With meta viewport, you get: 

  • Better user experience on your website page

  • Mobile friendly website

  • A positive impact on your traffic and engagement rates

Social media meta tags

Social meta tags, aka open graph meta tags, enable you to adjust how your content looks when shared on social networks. Using social media meta tags on your website makes sharing your content more accessible and functional.

Basically, social meta tags provide instructions on what specific image, video, title, URL, etc., a website should show when shared on social media.

Social media tags

As you can see, each features multiple attributes of the shared Web page: 

  • the main image 

  • title

  • a description  

  • domain name

There are two ways how you can achieve this:

  • adding the necessary HTML code to your website 

  • using a suitable social media markup plugin if there is one available for your content management system.

The most used social media tags

  • og:title – Your page title should appear here when it is linked to

  • og:url – your page’s URL 

  • og:description – your page’s description. This should be the post's 1-2 sentence snippet or preview text

  •  og:image – the URL of an image you want to be shown when your page is linked to. The image must be in PNG, JPEG, or GIF format and meet the size requirements of the social media platform (this varies by platform)

  • og:type – The category type the content falls into (blog, article, etc.)

Social media tags and SEO

Social media shares are a significant source of website traffic. People share your content on Twitter, LinkedIn, and Facebook by encouraging their followers to do the same. The more people share your content, the more exposure your website gets. That's why controlling how content appears when someone posts a link on a social network is crucial. Social meta tags are elements in your HTML that boost online exposure, increase social media traffic, and improve click-through rates, just like page title tags and meta description tags on your web page.

Creating Meta tags with BCMS

After the theoretical part and familiarization with the basic types of meta tags, in the continuation of this text, we will deal with the technical side, i.e. show you how easy it is to create all the necessary meta tags and handle them through BCMS - headless CMS.

How to use BCMS widgets

Requirements

  • Running BCMS

  • NextJS, NuxtJS, or Gatsby project

What is the BCMS widget?

Simply said, the BCMS widget is a data structure you can use inside an Entry content. They are very useful because they allow you to create complex dynamic page layouts.

Widgets can be placed anywhere in the content. For example, on a website, you might want a paragraph of text, then some testimonial card, and after that, some paragraph of text. BCMS widgets will allow you to do this.

Another use case might be to create a widget for SEO optimization, which we will cover how to do in this post.

How to create a widget?

This is very simple, navigate to widget sections, click on Add new widget button and give a name to the widget. You can also describe what this widget is used for and add an image of how it will look on the website.

Widget pure_image is not handled

After this, we can add properties to the widget. We will add property Title (of type String), Description (of type String), and Image (of type Media). This widget is not available to all Entries in the BCMS.

The last step is to add the widget in some Entries. We will create a new Blog and add the widget to it.

Widget pure_image is not handled

With this done, everything is ready to move to the next project.

How to use a widget in NextJS?

We will open a vanilla NextJS project created with the CLI, and if we navigate to localhost:3000/blogs/test-blog, we will be able to see that our widget is available in the content.

Don't worry; you do not have to parse the content yourself! BCMS' Next.js plugin provides a Content Manager component. First, let's pass out content to the Content Manager.

// File: ./pages/blogs/[slug].tsx

import { GetServerSideProps } from 'next';
import { getBcmsClient } from 'next-plugin-bcms';
import { BCMSContentManager } from 'next-plugin-bcms/components';
import React, { FC } from 'react';
import { BlogsEntry } from '../../../bcms/types';

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const client = getBcmsClient();
  const blog = await client.entry.get({
    template: 'blogs',
    entry: ctx.params?.slug as string,
  });

  return {
    props: {
      blog,
    },
  };
};

interface Props {
  blog: BlogsEntry;
}

const Blog: FC<Props> = (props) => {
  return (
    <div>
      {props.blog.content.en && (
        <BCMSContentManager
          items={props.blog.content.en}
          widgetComponents={{}}
        />
      )}
    </div>
  );
};

export default Blog;

If you refresh the page, you will be able to see only the heading, but if you inspect the page, you will be able to see that there is an invisible div with the text: "Widget meta_tags is not handled." This is because the Content Manager does not know how to handle this custom data type.

Let's create a MetaTags component so that we can add it to the Content Manager.

// File: ./components/widgets/meta-tag.tsx

import React, { FC } from 'react';
import type { MetaTagsWidget } from '../../bcms/types';

interface Props {
  data: MetaTagsWidget;
}

export const MetaTags: FC<Props> = ({ data }) => {
  return (
    <pre>
      <code>{JSON.stringify(data, null, '  ')}</code>
    </pre>
  );
};

Now, if we add the MetaTags component to the list of widget components in Content Manager, we can see our widget handler.

return (
  <div>
    {props.blog.content.en && (
      <BCMSContentManager
        items={props.blog.content.en}
        widgetComponents={{
          meta_tags: MetaTags,
        }}
      />
    )}
  </div>
);

Since MetaTags is a React component, we can do with it whatever we like. In our case, we would like to add the widget properties to the head of the document. We can do this using the Next Head.

// File: ./components/widgets/meta-tags.tsx

import React, { FC } from 'react';
import type { MetaTagsWidget } from '../../bcms/types';
import Head from 'next/head';
import { bcmsMediaToUrl } from '@bcms/most/frontent';

interface Props {
  data: MetaTagsWidget;
}

export const MetaTags: FC<Props> = ({ data }) => {
  return (
    <Head>
      {data.title && (
        <>
          <title>{data.title}</title>
          <meta key="title" property="og:title" content={data.title} />
          <meta key="og:title" property="twitter:title" content={data.title} />
        </>
      )}
      {data.description && (
        <>
          <meta
            key="description"
            property="description"
            content={data.description}
          />
          <meta
            key="og:description"
            property="og:description"
            content={data.description}
          />
          <meta
            key="twitter:description"
            property="twitter:description"
            content={data.description}
          />
        </>
      )}
      {data.image && (
        <>
          <meta
            key="og:image"
            property="og:image"
            content={bcmsMediaToUrl(data.image)}
          />
          <meta
            key="twitter:image"
            property="twitter:image"
            content={bcmsMediaToUrl(data.image)}
          />
        </>
      )}
    </Head>
  );
};

How to use a widget in NuxtJS?

We will open a vanilla NuxtJS project created with the CLI, and if we navigate to localhost:3000/blogs/test-blog, we can see that our widget is available in the content.

Don't worry, you do not have to parse the content yourself! BCMS' Nuxt.js plugin provides a Content Manager component. First, let's pass out content to the Content Manager.

// File: ./pages/blogs/_slug.vue

<template>
  <div class="container">
    <template v-if="blog">
      <template v-if="blog.content.en">
        <BCMSContentManager :items="blog.content.en" />
      </template>
    </template>
  </div>
</template>

<script lang="ts">
import BCMSContentManager from 'nuxt-plugin-bcms/components/bcms-content-manager.vue';
import Vue from 'vue';
import type { BlogsEntry } from '~/bcms/types';

export default Vue.extend({
  components: {
    BCMSContentManager,
  },
  async asyncData(ctx) {
    const entrySlug = ctx.route.params.slug;
    const blog = await ctx.$bcms.entry.get({
      template: 'blogs',
      entry: entrySlug,
    });

    return { blog };
  },
  data(): {
    blog: BlogsEntry | null;
    } {
    return {
      blog: null,
    };
  },
});
</script>

If you refresh the page, you can see only the heading. This is because the Content Manager does not know how to handle this custom data type.

Let's create a MetaTags component so that we can add it to the Content Manager.

// File: ./components/meta-tag.vue

<template>
  <pre>
    <code>{{ data }}</code>
  </pre>
</template>

<script lang="ts">
import Vue from 'vue';
import type { PropType } from 'vue';
import type { MetaTagsWidget } from '~/bcms/types';

export default Vue.extend({
  props: {
    data: {
      type: Object as PropType<MetaTagsWidget>,
      required: true,
    },
  },
});
</script>

Believe it or not, that's it! You should be able to see our component on the screen. There is one thing to note: the component's name must be the same as the widget's name.

Since MetaTags is a Vue component, we can do with it whatever we like. In our case, we would like to add the widget properties to the head of the document. We can do this using the Nuxt Head.

// File: ./components/meta-tags.vue

<template>
  <span style="display: none" />
</template>

<script lang="ts">
import Vue from 'vue';
import type { PropType } from 'vue';
import type { MetaTagsWidget } from '~/bcms/types';
import { bcmsMediaToUrl } from '@becomes/most/frontent';

export default Vue.extend({
  props: {
    data: {
      type: Object as PropType<MetaTagsWidget>,
      required: true,
    },
  },
  head() {
    const meta = [];
    if (this.data.title) {
      meta.push(
        {
          hid: 'og:title',
          name: 'og:title',
          content: this.data.title,
        },
        {
          hid: 'twitter:title',
          name: 'twitter:title',
          content: this.data.title,
        },
      );
    }

    if (this.data.description) {
      meta.push(
        {
          hid: 'description',
          name: 'description',
          content: this.data.description,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.data.description,
        },
        {
          hid: 'twitter:description',
          name: 'twitter:description',
          content: this.data.description,
        },
      );
    }

    if (this.data.image) {
      meta.push(
        {
          hid: 'og:image',
          name: 'og:image',
          content: bcmsMediaToUrl(this.data.image),
        },
        {
          hid: 'twitter:image',
          name: 'twitter:image',
          content: bcmsMediaToUrl(this.data.image),
        },
      );
    }

    return {
      title: this.data.title || '',
      meta,
    };
  },
});
</script>

How to use a widget in Gatsby?

We will open a vanilla Gatsby project created with the CLI, and if we navigate to localhost:3000/blogs/test-blog, we can see that our widget is available in the content.

Don't worry, you do not have to parse the content yourself! BCMS' Gatsby plugin provides a Content Manager component. First, let's pass out content to the Content Manager.

// File: ./src/templates/blog.tsx

import React, { FC } from 'react';
import { Layout } from '../layout';
import type { BlogsEntry } from '../../bcms/types';
import { PageProps } from 'gatsby';
import { BCMSContentManager } from 'gatsby-source-bcms/components';

interface Ctx {
  blog: BlogsEntry;
}

const Entry: FC<PageProps<undefined, Ctx>> = (props) => {
  const blog = props.pageContext.blog;
  return (
    <Layout>
      {blog.content.en && (
        <BCMSContentManager items={blog.content.en} widgetComponents={{}} />
      )}
    </Layout>
  );
};

export default Entry;

If you refresh the page, you will be able to see only the heading, but if you inspect the page, you will be able to see that there is an invisible div with the text: "Widget meta_tags is not handled." This is because the Content Manager does not know how to handle this custom data type.

Let's create a MetaTags component so that we can add it to the Content Manager.

// File: ./src/components/widgets/meta-tag.tsx

import React, { FC } from 'react';
import type { MetaTagsWidget } from '../../../bcms/types';

interface Props {
  data: MetaTagsWidget;
}

export const MetaTags: FC<Props> = ({ data }) => {
  return (
    <pre>
      <code>{JSON.stringify(data, null, '  ')}</code>
    </pre>
  );
};

Now, if we add the MetaTags component to the list of widget components in Content Manager, we can see our widget handler.

return (
  <div>
    {props.blog.content.en && (
      <BCMSContentManager
        items={props.blog.content.en}
        widgetComponents={{
          meta_tags: MetaTags,
        }}
      />
    )}
  </div>
);

Since MetaTags is a React component, we can do with it whatever we like. In our case, we would like to add the widget properties to the head of the document. We can do this using the React Helmet.

// File: ./src/components/widgets/meta-tags.tsx

import React, { FC } from 'react';
import type { MetaTagsWidget } from '../../../bcms/types';
import { Helmet } from 'react-helmet';
import { bcmsMediaToUrl } from '@becomes/most/frontent';

interface Props {
  data: MetaTagsWidget;
}

export const MetaTags: FC<Props> = ({ data }) => {
  const meta: Array<{
    property: string;
    content: string;
  }> = [];
  if (data.title) {
    meta.push(
      {
        property: 'og:title',
        content: data.title,
      },
      {
        property: 'twitter:title',
        content: data.title,
      },
    );
  }

  if (data.description) {
    meta.push(
      {
        property: 'description',
        content: data.description,
      },
      {
        property: 'og:description',
        content: data.description,
      },
      {
        property: 'twitter:description',
        content: data.description,
      },
    );
  }

  if (data.image) {
    meta.push(
      {
        property: 'og:image',
        content: bcmsMediaToUrl(data.image),
      },
      {
        property: 'twitter:image',
        content: bcmsMediaToUrl(data.image),
      },
    );
  }

  return <Helmet title={data.title} meta={meta} />;
};

And that's it!

As you can see, creating custom components for widgets is simple, easy, and clean.

Meta tags and BCMS

Even though they are invisible, meta tags provide data about your page to search engines and website visitors. Handling meta tags through BCMS is an example of how headless CMS improves your SEO. In this guide, you learned how meta tags are easy to understand. 

With BCMS, you get an easy-to-use interface for managing content and a tool that helps you adjust and edit your unique content so that Google will recognize and value it as high-quality and relevant content, ranking it at the top of search results. BCMS can be highly potent in terms of SEO, which you can see in our guide to programmatic SEO through BCMS.

At the end of this, I just want to remind you that you should never forget about content creation. Why? Well, I have a question for you.

What do you think, can good meta tags make up for bad content?

The answer is no. You are making your content for people and meta tags for search engines. Don’t forget that ever.

Meta tags are telling search engines what the page is all about—making them vital for SEO. You make content for visitors, telling them that you are relevant.

I firmly believe that any SEO expert would agree that you need high-quality content that focuses on user experience to rank highly.

It takes a minute to start using BCMS

Start free with GitHub
Start free with Google
Gradient
Content

Join our Newsletter

Get all the latest BCMS updates, news and events.

You’re in!

The first mail will be in your inbox next Monday!
Until then, let’s connect on Discord as well:

Join BCMS community on Discord

By submitting this form you consent to us emailing you occasionally about our products and services. You can unsubscribe from emails at any time, and we will never pass your email to third parties.

Gradient

Continue reading

There are many actionable insights in this blog post. Learn more: