Meta Tags for SEO: Title, Description and Open Graph Tags Explained

What are meta tags?

Meta tags are lines of HTML placed inside the head section of a web page. Visitors do not see them on the page, but search engines, browsers and social platforms read them. The title tag is technically not a meta tag, but it is always grouped with them, because it is the headline shown in search results and in the browser tab.

Together these tags describe the page: its title, a short summary, how it should be indexed, how it should fit a mobile screen and how it should look when shared.

The most important meta tags for SEO

• Title tag. The clickable headline in search results. It is one of the strongest on-page signals and should include your main keyword.
• Meta description. A short summary under the title. It is not a direct ranking factor, but a clear description gets more clicks.
• Meta robots. Tells search engines whether to index a page and follow its links, for example noindex for login or thank-you pages.
• Viewport. Makes the page fit mobile screens. Without it, your page looks tiny on a phone.
• Canonical link. Points to the main version of a page, so similar URLs do not compete with each other.
• Charset. Sets the character encoding, usually UTF-8, so text displays correctly.

The old meta keywords tag is ignored by Google, so you do not need it.

Meta title length: how long should it be?

Search engines show titles by pixel width, not by a fixed number of characters, but around 50 to 60 characters usually fits. Longer titles get cut off with three dots, which can hide your keyword or brand name.

Put the main keyword near the start, keep the title unique for every page and add your brand name at the end if there is room. Avoid stuffing several keywords or writing in all capitals, which looks spammy and gets fewer clicks.

Meta description length and how to write one

A meta description should be around 150 to 160 characters. Google may show more or fewer characters depending on the device, and it sometimes rewrites the description to match the search query, but a well-written one is still the best way to control your snippet.

Here is an example: Count words, characters and reading time instantly with a free online word counter. No signup, works on any device. A good description follows these rules:

• Include the main keyword. Search engines bold words that match the search, which draws the eye.
• Promise a clear benefit. Tell the reader what they will learn or get.
• Use an action word. Words such as learn, compare, count or download invite a click.
• Make it unique. Never copy the same description onto every page.

Open Graph tags explained

Open Graph tags were created by Facebook and are now read by LinkedIn, WhatsApp, Slack and many other apps. When someone shares your link, these tags decide the title, description and image of the preview card. Without them, platforms guess, and the result is often a blank or ugly preview.

• og:title. The title shown in the preview card.
• og:description. A short summary of the page.
• og:image. The preview image. Use 1200 by 630 pixels for a sharp card on most platforms.
• og:url. The canonical address of the page.
• og:type. The kind of content, such as website or article.

X, formerly Twitter, also reads Open Graph tags and adds its own twitter:card tag. The value summary_large_image gives you the big image card.

How to add meta tags to your website

The method depends on how your site is built.

• Plain HTML. Paste the tags inside the head section of each page.
• WordPress. Use an SEO plugin to set the title, description and social tags for every post and page.
• Frameworks such as Next.js. Set the title and description in the page metadata, so each page gets its own tags.
• Shopify, Wix and Squarespace. Use the SEO or social sharing settings in the page editor.

Common meta tag mistakes

• Duplicate titles and descriptions. Every page needs its own, or search engines struggle to tell pages apart.
• Too long or too short. Very short titles waste space, and very long ones are cut off.
• Missing Open Graph image. Shared links look plain and get fewer clicks.
• Accidental noindex. A leftover noindex tag from development can keep a live page out of search results.
• Keyword stuffing. Repeating the same phrase makes tags look spammy and does not help.

Generate your meta tags now

Writing tags by hand is easy to get wrong, and one missing quote can break a tag. Our meta tag generator builds clean HTML for the title, description, robots, viewport and social tags. Fill in the fields, copy the code and paste it into your page. It is free and needs no signup.

Frequently asked questions