DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

Meta Tags Are Still the First Thing Search Engines Read

#webdev #seo #html #beginners

Every page on the internet starts with meta tags. Search engines, social platforms, and messaging apps all read these tags to understand and preview your content. Getting them wrong means your page shows up as an untitled link with no description.

The essential meta tags

Not all meta tags matter. Here are the ones that actually affect how your page appears and performs.

Title tag (technically not a meta tag, but part of the head):

<title>Your Page Title - Site Name</title>
Enter fullscreen mode Exit fullscreen mode

Keep it under 60 characters. Google truncates at roughly 600 pixels width, which is approximately 60 characters. Front-load the important keywords.

Meta description:

<meta name="description" content="A concise summary of the page content in 150-160 characters. This appears in search results below the title.">
Enter fullscreen mode Exit fullscreen mode

Google sometimes ignores your meta description and generates its own from page content, but providing one gives you the best chance of controlling the snippet.

Viewport tag (essential for mobile):

<meta name="viewport" content="width=device-width, initial-scale=1">
Enter fullscreen mode Exit fullscreen mode

Without this, mobile browsers render the page at desktop width and zoom out. Your mobile users see a tiny, unreadable page.

Open Graph tags

Open Graph (OG) tags control how your page appears when shared on Facebook, LinkedIn, Discord, Slack, and most messaging apps.

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description for social sharing">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
Enter fullscreen mode Exit fullscreen mode

The og:image tag is the highest-impact meta tag you can set. A page shared with an image gets dramatically more engagement than one shared without. The recommended size is 1200x630 pixels.

Twitter Card tags

Twitter uses its own meta tag format:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Description for Twitter">
<meta name="twitter:image" content="https://example.com/image.jpg">
Enter fullscreen mode Exit fullscreen mode

The summary_large_image card type displays a large image preview. The summary type shows a smaller thumbnail. For most content, the large image version gets more clicks.

Canonical URL 

<link rel="canonical" href="https://example.com/original-page">
Enter fullscreen mode Exit fullscreen mode

If the same content exists at multiple URLs (with and without www, HTTP and HTTPS, with query parameters), the canonical tag tells search engines which URL is the primary version. Without it, search engines might split your ranking signals across duplicate pages.

The tags that do not matter

Keywords meta tag. Google has publicly stated they ignore it. It was abused so heavily in the early days of SEO that it became worthless.

<!-- Don't bother with this -->
<meta name="keywords" content="...">
Enter fullscreen mode Exit fullscreen mode

Author meta tag. Search engines do not use it for ranking. It has no visible effect anywhere.

Generator meta tag. Tells the world what CMS you use. This is a security risk, not a feature.

For generating the correct meta tags for any page, I built a generator at zovo.one/free-tools/meta-tag-generator. Enter your page details, and it outputs the HTML for all relevant meta tags, including Open Graph and Twitter Cards. Copy, paste, done.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)