The Rest of the Essential SEO Meta Tags (Part 3)

You have already handled the core tags in Part 1 and the behavior-control tags in Part 2. Now we finish the job. This final part covers four tags that matter specifically when you build for overseas markets: Twitter Cards, the viewport tag, the charset declaration, and hreflang.

None of these are magic. But skipping them can cause real problems: broken link previews, garbled text, a mobile layout that drives users away, or Google showing the wrong language version of your page. Let’s fix all of that.

1. Twitter Cards: Control How Your Page Looks When Shared

When someone shares your URL on X (formerly Twitter), the platform shows a preview card. You control that preview with Twitter Card meta tags.

The two main card types you will use:

• summary: Shows a small thumbnail, the title, and a description. Good for regular blog posts.
• summary_large_image: Shows a large landscape image with the title and description below. Better for product pages, portfolio pieces, or any page where the visual matters.

The four tags you need:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description here.">
<meta name="twitter:image" content="https://yoursite.com/images/og-cover.png">

Important caveat: X/Twitter falls back to Open Graph tags when twitter: tags are absent. If you already set up Open Graph correctly in Part 2, you are covered in most cases. The only tag worth adding explicitly is twitter:card to choose the large image layout. The rest will inherit from OG.

For summary_large_image, use a landscape image around 1200x630 pixels. A portrait or square image will get cropped awkwardly.

2. Viewport Meta Tag: Make Sure Mobile Users Can Read Your Page

This tag tells mobile browsers how to scale your page. Without it, a page designed for desktop displays as a tiny, zoomed-out version on a phone. Users have to pinch and zoom to read anything. They will leave.

The standard tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What it does: It sets the viewport width to the device’s screen width and sets the initial zoom level to 1.0 (no zoom).

Honest caveat: The viewport tag itself is not a ranking factor. Google does not look at it and say “this page ranks higher.” But Google uses mobile-first indexing. That means Google crawls and indexes your page as a mobile user would see it. If your page breaks on mobile, Google treats that as a mobile usability problem. A broken mobile experience leads to higher bounce rates, which hurts your rankings indirectly.

Rule: If you build for overseas markets, assume most of your traffic comes from phones. The viewport tag is non-negotiable.

3. Charset Declaration: Prevent Garbled Text

The charset declaration tells the browser which character encoding your page uses. The standard for the modern web is UTF-8, which supports every language, including Latin scripts, Cyrillic, Arabic, and CJK characters.

<meta charset="utf-8">

Where to put it: This should be the very first tag inside your <head>. Before the title, before anything else.

Why does this matter for SEO? If your page has garbled text, crawlers cannot read it correctly. They may misparse your content, misunderstand the language, or fail to index the page properly. Everything else you do for SEO depends on the crawler being able to read your page. The charset tag is the foundation.

If you skip it, a page with non-English characters might show as “é” instead of “é”. That is not just ugly. It is unreadable for users and confusing for search engines.

4. Hreflang: Tell Google Which Language Version to Show

This is the most complex tag in this series, and the one most relevant to you as a builder for overseas markets. Hreflang tells Google which language and regional version of a page to show to a user in a specific country.

The pattern looks like this:

<link rel="alternate" hreflang="en" href="https://yoursite.com/page">
<link rel="alternate" hreflang="de" href="https://yoursite.com/de/page">
<link rel="alternate" hreflang="fr" href="https://yoursite.com/fr/page">

You place these tags in the <head> of each page version. If you have an English page, a German page, and a French page for the same content, each page must list all three versions, including itself.

The two rules you cannot break:

1. Self-referencing: Each page must include a link to its own URL with its own hreflang code.
2. Reciprocal: If page A links to page B, page B must link back to page A. If you forget a return link, Google may ignore all your hreflang signals.

Common mistakes to avoid:

• Missing return links: The most common error. You added hreflang on the English page but forgot to add it on the German page.
• Wrong language/region codes: Use ISO 639-1 for language (en, de, fr) and ISO 3166-1 alpha-2 for region (US, GB, DE). en-US and en-GB are different. Do not invent codes.
• Pointing hreflang at non-canonical URLs: The URL you reference in hreflang must be the canonical version of that page. If you have tracking parameters or duplicate URLs, fix those first.

Honest caveat: Hreflang is not a ranking factor in the sense that it boosts your position. It is a relevance signal. It tells Google which version to show to which user. Without it, Google may show your English page to a German user, or worse, treat your language versions as duplicate content and suppress them all.

If you have fewer than five pages per language, you can manage hreflang manually. If you have more, use a plugin or a CMS that generates these tags automatically.

Series Recap: The Complete List of 10 Meta Tags

You have now covered all ten essential meta tags across this three-part series. Here is the full list, grouped by priority.

Tier 1: Do These First

1. Title tag — The clickable headline in search results. Your primary ranking signal for relevance.
2. Meta description — The snippet under your title. Not a ranking factor, but it controls click-through rate.
3. Heading tags (H1-H3) — Structure your content for readability and keyword relevance.

Tier 2: Behavior Control 4. Robots meta tag — Tells search engines whether to index a page and follow links. 5. Canonical tag — Prevents duplicate content issues by specifying the preferred URL. 6. Open Graph tags — Control how your page appears when shared on Facebook, LinkedIn, and other social platforms.

Tier 3: Polish and International 7. Twitter Cards — Control how your page appears when shared on X/Twitter. 8. Viewport tag — Ensures your page displays correctly on mobile devices. 9. Charset declaration — Prevents garbled text and ensures crawlers can read your content. 10. Hreflang tags — Tell Google which language/regional version to show to which user.

What to Do Next

You have the complete technical foundation. Now put it into practice. The three Tier-1 tags (title, description, headings) are the ones you will edit on every single page. The rest you set up once and mostly leave alone.

For a practical workflow that turns those three Tier-1 tags into a repeatable per-page process, read the companion article “From TDK to TDH”. It gives you a simple framework to write titles, descriptions, and headings for every page without overthinking it.

Build your site, set up these tags, and move on to content. The meta tags are the frame. The content is the picture.

Series: Overseas Website Building