Back to the blog

Inbound Marketing

What Is a Meta Tag? HTML Examples and Practical SEO Checks

Understand meta descriptions, robots rules, viewport settings and social previews, with HTML examples and a practical content review workflow in BrandWell.

Farnaz Kia5 min read

Current BrandWell RankWell editor showing article content, search preview, SEO recommendations, and growth-tool navigation
RankWell in the live BrandWell app, captured September 22, 2026. The article and score shown are an example from this workspace.
On this page
  1. Meta tags, titles and headings are different
  2. A short HTML example
  3. Write the title and description as a clear promise
  4. Understand robots instructions before changing them
  5. Use the viewport tag with a responsive layout
  6. Check the featured image used in social previews
  7. Review content and metadata in BrandWell
  8. A release checklist for an edited page
  9. Frequently asked questions

A meta tag is an HTML element that provides metadata about a page, such as its description, character encoding or instructions for search engines. Different tags do different jobs. Adding keywords to metadata is not a shortcut to higher rankings.

This guide explains the fields editors commonly encounter, shows short examples and outlines how to verify what your website actually publishes.

Meta tags, titles and headings are different

The <meta> element usually belongs in a page’s <head>. The <title> element is separate, while a main heading appears in the visible page. MDN’s meta element reference distinguishes these elements and explains the metadata attributes.

FieldExample purposeWhat to check
Title elementName the pageSpecific, accurate and consistent with the main answer
Meta descriptionSummarize the pageUseful promise supported by the content
Robots metadataExpress indexing or presentation instructionsIntentional rules and no contradictory output
Viewport metadataSet mobile viewport behaviorWorks with the responsive layout and zoom
Character encodingDeclare text encodingCorrect UTF-8 output
Social-preview metadataDescribe a shared pageCorrect title, description and representative image

Swipe the table to see all columns.

A short HTML example

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shared Inbox Workflow for Small Support Teams</title>
  <meta name="description" content="Learn how to assign conversations, prevent duplicate replies and review unresolved tickets.">
</head>

This is an illustrative fragment, not a complete site template. Your CMS may already generate these fields. Inspect its output before adding another copy, and use the field or template intended for the job.

Write the title and description as a clear promise

Start with the reader’s task. “Shared Inbox Workflow for Small Support Teams” is more useful than a repeated list of inbox-related keywords. A descriptive title should distinguish this page from other pages in the library.

A description can explain the scope: assigning conversations, avoiding duplicate replies and reviewing unresolved tickets. Only promise those details if the article actually delivers them. Do not claim a test, comparison or original study that you did not perform.

Use preview tools to inspect presentation on different screen widths. Fixed character counts do not guarantee that a title or description appears in full, or that Google uses the exact saved text.

Keep the main heading and opening answer aligned with the promise. If the content changes, review the title and description together instead of leaving an obsolete year or offer in the metadata.

Understand robots instructions before changing them

A noindex rule asks Google to exclude a page from search results. It must be crawlable for Google to discover the instruction. nofollow concerns links rather than excluding the page itself. Consult Google’s robots metadata specification before deployment.

Do not apply either rule across a live content library merely to tidy a report. Identify the page, intended outcome, relevant template and responsible owner first. Check any HTTP-level rules as well as HTML output.

Indexing controls are not access controls. If information must be private, protect access rather than treating absence from search as confidentiality.

Use the viewport tag with a responsive layout

The common width=device-width, initial-scale=1 setting aligns the viewport with the device width and initial scale. See MDN’s viewport reference. It does not repair a fixed-width table, oversized image or unusable form.

Test actual narrow layouts, readable text, horizontal containment, navigation and keyboard behavior. Preserve the ability to zoom. Avoid changing initial scale to enlarge the whole page instead of correcting typography and layout.

For a blog post, choose a relevant featured image and inspect the delivered Open Graph image value. It should represent the article, load publicly and remain legible at a small preview size. An old logo or unrelated image can misrepresent a newly updated post.

Use an appropriate crop and image dimensions. If a sharing platform still shows the old image, investigate its preview cache separately from the site’s saved setting. Correct metadata does not guarantee identical cropping across platforms.

Review content and metadata in BrandWell

  1. Open the relevant project and use Visibility → Keywords → Research to investigate the reader’s task in the appropriate market.
  2. Use RankWell’s Strategy check → Check opportunity to inspect the idea against existing content.
  3. Decide whether to improve an existing page or prepare a new brief for a distinct need.
  4. Review the draft, title, opening answer, supporting sources and search preview together in the editor.
  5. Choose relevant media and check the publishing destination and approval state.
  6. After delivery, inspect the public title, heading, description, featured image and mobile layout. Confirm technical rules in the website’s output.
RankWell article editor with search preview and recommendations
RankWell in BrandWell. Workspace content illustrates the editing workflow; verify the delivered page separately.

RankWell supports content planning and review. Server rules, templates and third-party integrations still require appropriate technical checks.

A release checklist for an edited page

  • Save a recoverable version and record the intended change.
  • Confirm the right title and description are emitted once without contradictory templates.
  • Check that indexing rules match the intended public status.
  • Inspect the featured social image and useful in-article alt text.
  • Test the mobile page, including code examples and wide tables.
  • Keep a measurement baseline with consistent dates and filters.

Fictional measurement example: 20 clicks from 2,000 impressions is a 1% CTR. Thirty clicks from 2,500 impressions is 1.2%, a 0.2 percentage-point increase. Changes in queries, position and seasonality can affect the result; this does not prove a metadata edit caused growth.

Frequently asked questions

Is a title tag technically a meta tag?

No. It is a separate HTML element, although editors often group it with metadata fields.

Should I add a meta keywords tag?

Do not add one as a Google ranking tactic. If a legacy internal system requires it, follow that system’s documented syntax. See the meta-keywords field guide.

Does a meta description guarantee a search snippet?

No. Write an accurate summary, then inspect actual search presentation without assuming the saved field will appear unchanged.

Does metadata replace the article itself?

No. The title and summary should describe a useful, supported answer. Better labels cannot supply evidence or functionality missing from the page.

Reviewed and updated October 6, 2026.

Written by

Farnaz Kia

Put your next growth opportunity to work.

Start with the product you need. Connect the work with AIMEE.