HTML Character Counter

The DCP Online HTML Character Counter is the best tool for counting the number of characters in your page titles, meta keywords and meta descriptions.

Optimise HTML meta data.

 

HTML Title & Meta Description Length Checker

Enter your HTML metadata to count the number of characters

Optimal length is 60 cHARACTERS
Optimal length is 160 cHARACTERS
Optimal length is 160 cHARACTERS

HTML Title & Meta Description Length Tools

How to count HTML metadata characters

Above you can see three different tools. There is a tool for counting the number of characters in your HTML titles, meta keywords and meta descriptions.

To use the tools, simply enter your text content and then select the blue "Check" button, the tool will show you the number of characters and words.

HTML Metadata Frequently Asked Questions (FAQs)

What is a title tag?

The title tag is an HTML element that specifies the title of a website page. A page title tag is displayed in many different locations such as search engine results pages, social media posts, browser tabs, browser bookmarks and many other places.

Title tag code example

<head><title>Example Title</title></head>

Title tag formatting

It is important to format your title tag correctly so your keywords are prominent.

At DCP we place our Primary Keyword First, then the Secondary Keyword and finally our Brand Name.

Title tag formatting example

Web Designers | Web Design London | DCP

  • Red = Primary Keyword
  • Blue = Secondary Keyword
  • Green = Brand Name
Optimal title length

In Google search results the title tag often displays the first 50 to 60 characters.

It is recommended that you try to keep your title tag to a maximum of 60 characters where possible.

It should be noted that there is no specified limit to the length of a title tag, but is it always recommend to use titles with 60 characters or less for better user readability.

Example title tag displayed in Google search results

Example title tag displayed in Google search results

Why are title tags important?

Web page title tags help search engines and internet users to understand what your pages are about. Most of us use search engines to find products or services, and we often use the title of a web page in the search engine results to determine the web page content. It should be noted that the title tag is also used in the web browser tab, webpage bookmarks and social media posts.

Below I have listed some examples of how title tags are used:

1. Search engine results page (SERPs)

In the image below you can see an example of a search result in Google for a blog post I created here: 30 essential tips for improving your web design

I have highlighted in yellow the web page title tag that is used in the search result.

It should be noted that the search result below is a rich snippet that contains more information than a standard search result.

HTML Title Search engine results pages (SERPs)

2. Web browser tab

All modern web browsers allow you to create tabs to open new web pages.

In the image example below I am using Google Chrome.

The tab contains some, but not all the title tag.

HTML Title Web Browser Tab

3. Facebook posts

In the Facebook post below you can see I have highlighted the title tag in yellow.

It should be noted that Facebook uses Open Graph tags to auto-generate content.

Here is an example of the OG (Open Graph) tags used on my blog post:

<meta property="og:type" content="website" />
<meta property="og:site_name" content="DCP Web Designers" />
<meta property="og:locale" content="en_GB" />
<meta property="og:url" content="https://www.dcpweb.co.uk/blog/30-essential-tips-for-improving-your-web-design">
<meta property="og:title" content="30 essential tips for improving your web design in 2021" />
<meta property="og:description" content="How to improve my business website? - This is probably one of the most frequent questions I am asked by my web development clients. It is not a simple question to answer as every client website project is different, but there are some common aspects of web design which all business can take advantage of. Take a look at these 30 Tips for improving your web design." />
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://cdn.dcpweb.co.uk/userfiles/blog_page/image/30 essential tips for improving your website design in 2021.jpg" />
<meta property="og:image:alt" content="30 essential tips for improving your web design in 2021" />

Read more about Open Graph Facebook Tags.

HTML Title Facebook Posts

4. LinkedIn posts

If you have already implemented the Open Graph for Facebook, then you are in luck!

LinkedIn also uses the Open Graph tags to pre-populate post content as shown in the image below.

In most cases, LinkedIn will automatically display the blog post thumbnail, Page Title (Highlighted in Yellow) and the website domain.

HTML Title LinkedIn Posts

5. Twitter Posts

Twitter is one of the most popular social media platforms.

Twitter also uses tags to markup content for Tweets.

Twitter card tags look similar to Open Graph tags, and are based on the same structure as the Open Graph protocol.

When you implement Twitter card tags the following content is auto-populated in a Tweet:

  • Page title
  • Thumbnail
  • Description
  • Website domain

Here is an example of the Twitter card tags used on my blog post:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="30 essential tips for improving your web design in 2021" />
<meta name="twitter:description" content="How to improve my business website? - This is probably one of the most frequent questions I am asked by my web development clients. It is not a simple question to answer as every client website project is different, but there are some common aspects of web design that all business can take advantage of. Take a look at these 30 Tips for improving your web design.">
<meta name="twitter:image:src" content="https://cdn.dcpweb.co.uk/userfiles/blog_page/image/30 essential tips for improving your website design in 2021.jpg" />

Read more about Twitter Card Tags.

HTML Title Twitter Posts

As you can see from the above examples, it is important that the page title is accurate as it is displayed across all major social media platforms and in Google and other search engines.

Both Twitter and Facebook have their own meta tags that allow you to change the page title when sharing on these social media platforms. In general, it is advisable to keep your page titles consistent across all social media platforms, but you can change them if your page title is too long for social media posts.

What is a meta description tag?

The meta description is an HTML tag that provides a brief summary of the website pages content. Search engines like  Google or Yahoo often display the meta description in search results. It is worth putting in the effort to optimise your meta descriptions to improve clickthrough rates.

Title tag code example

<meta name="description" 
content="A short description of the content on your website page would go here."></head>

Optimal meta description length

In most cases, the length of your meta description should be a maximum of 160 characters in length. On many websites, I see that they state the meta description should be no more than 160 characters, but this is not true.

The meta description can be of any length, but most search engines will only display the first 160 characters on the search result page.

Example meta description displayed in Google search results

Example meta description displayed in Google search results

Meta description format

The best meta descriptions have an engaging opening sentence that draws people into clicking on them.

They describe what’s inside the page without being overly promotional or salesy.

The goal of your meta description tag is to provide enough detail so users know exactly what the page you linked to is about before deciding if they want to visit it.

If done right, this can lead to more clicks when visitors see these links in organic results.

What is meta keywords tag?

Meta Keywords are used to add content to your website page that help search engines understand what your page is about. Meta keywords are displayed in the code of your website and are not visible to your website visitors.

Title tag code example

<meta name="keywords" content="How to improve my business website, Tips for improving your web design, Website Design Tips" />

Optimal meta keyword length

All keyword phrases listed in your meta keyword tag are separated by commas. In the above example, you can see three keyword phrases. 

The meta keywords can be of any length, but in most cases, you should only add 4 to 5 keyword phrases with a total character count of 160.

Are meta keywords still relevant?

It would be noted that search engines no longer you meta keywords to understand the content of a website page, many years ago Google would use meta keywords to understand the content of a page, but this also allowed website developers to trick the search engines into ranking pages which had poor quality content.

I would still recommend adding meta keywords to your website pages, as these can still be useful for other web services like business directories. 

Are there any other tags I should implement on my website?

It is important at a minimum to add the following tags/markup to your website pages:

  • Meta Title
  • Meta Description
  • OG Tags (Facebook)
  • Twitter Card Tags

I would also recommend adding Schema Markup to your website pages which can help rank your website pages higher in Google search results.

What is Schema Markup?

Schema markup is code (semantic vocabulary) that you can add to your website pages that help search engines return more informative results to users.

For example, if you did a Google search for: 30 essential tips for improving your web design in 2021

You will see the following Rich Snippet Result:

Example Rich Snippet

As you can see in the above image a Rich Snippet contains more content than a normal Google search listing:

  • Sub Title
  • Bullet List
  • Image
  • Page URL
  • Page TItle

Rich Snippets will show different content depending on the schema markup used.

Here are a few examples of Schema Markups:

  • Local Business
  • Article
  • Book
  • Breadcrumb
  • Course
  • Critic review
  • Dataset
  • Event

You can view more examples of schema markup types here: Improve your website SEO using Schema Markup

It is worth spending the time to learn about schema markup as it has been adopted by all major search engines.

Ultimately schema markup will help Google and other search engines understand more about the content of your website pages.

You can learn more about Schema Markup by visiting my detailed article: How to improve your website SEO using Schema Markup - Beginners Guide to Structured Data 2021

How to improve your website SEO using Schema Markup - Beginners Guide to Structured Data

Tell Us Your Thoughts

back