What Are Meta Tags?
Meta tags are HTML elements placed inside the head section of a page. They are invisible to users but communicate important information to browsers, search engines, and social media platforms. Getting them right improves how your pages rank in search results and how they look when shared on social media.
The title Tag
The title tag is not technically a meta tag, but it is the most important element in the head. It appears as the clickable headline in search results and in the browser tab. Keep it between 50 and 60 characters to avoid truncation in Google results. Include the primary keyword near the front and add a brand suffix: "URL Parser - DevHexLab" or "How to Generate a .gitignore File | Your Site".
Every page should have a unique, descriptive title. Duplicate titles across pages confuse search engines about which page is most relevant for a given query.
The Description Meta Tag
The meta description provides a short summary of the page. Search engines often use it as the snippet shown below the title in results, though they may replace it with page text they consider more relevant. A good description is 120 to 160 characters, includes the primary keyword naturally, and gives users a reason to click.
Unlike the title, the description has no direct ranking impact -- but it affects click-through rate, which indirectly signals relevance to search engines.
The robots Meta Tag
The robots tag tells search engines what to do with the page. The most common values are index, follow (the default), noindex (do not include this page in search results), nofollow (do not follow links on this page), and combinations. Use noindex on thin, duplicate, or private pages to prevent them from diluting your site's authority.
Canonical URLs
The canonical link element tells search engines which version of a page is the authoritative one when the same content is accessible at multiple URLs (with and without trailing slash, HTTP vs HTTPS, with and without www). Without a canonical, search engines may split ranking signals across duplicates or choose a different URL than you intended.
Open Graph Tags
Open Graph is a protocol created by Facebook that controls how your page appears when shared on Facebook, LinkedIn, WhatsApp, Slack, and most other social platforms. The four essential Open Graph tags are og:title, og:description, og:image, and og:type.
The og:image is the most visually impactful. Use an image of at least 1200 by 630 pixels. Images smaller than 600 by 315 pixels may not display at all. Keep the important content away from the edges because some platforms crop the image. Use an absolute URL -- relative paths are not resolved.
The og:type value is usually website for general pages and article for blog posts or documentation. Other valid types include product, video.movie, and profile.
Twitter Card Tags
Twitter has its own set of tags separate from Open Graph. The twitter:card tag determines the card format. The two most useful values are summary (small image and text) and summary_large_image (large image above the text, which draws much more engagement).
Twitter falls back to Open Graph values if Twitter-specific tags are missing, but it is good practice to set them explicitly. The twitter:site tag is the @username of the website, and twitter:creator is the @username of the content author.
The Relationship Between the Three
Meta tag systems layer. Twitter falls back to Open Graph if its own tags are absent. Open Graph tags fill in where platform-specific tags are missing. And the basic title and description serve as the final fallback. A good setup defines the basics once and adds platform-specific overrides only when needed.
Common Mistakes
Not updating meta tags when page content changes is one of the most common errors. If you rename an article, update the title and description too.
Missing or wrong og:image dimensions cause platforms to display broken or cropped images. Always test your Open Graph tags using the Facebook Sharing Debugger or LinkedIn Post Inspector before publishing.
Using the same description on every page hurts SEO. Search engines see identical descriptions as a sign that the content is not distinct or valuable. Even a single sentence unique to each page is better than a site-wide default.
Forgetting the canonical tag on paginated content or filtered URLs (like /products?color=red) lets search engines index thousands of near-duplicate pages, which dilutes ranking signals for the pages that matter.
Testing Your Tags
After adding meta tags, verify them before going live. Chrome DevTools shows the parsed head elements. Online tools like the Twitter Card Validator, Facebook Sharing Debugger, and LinkedIn Post Inspector fetch your page and show a live preview of how it will appear when shared. Run these checks any time you change the og:image or title to confirm the new values are cached.