Advanced Meta Tags: Open Graph, Robots, and Viewport Settings

When business owners talk about meta tags, they usually focus on title tags and meta descriptions.

While these are critical for CTR in Google Search, they represent only a fraction of the invisible data sitting in your website's header code.

Advanced meta tags tell browsers how to render your pages on mobile devices, tell search engines which pages they are allowed to index, and control how your links look when shared on social platforms like Facebook or LinkedIn.

Here is a plain-English guide to the advanced meta tags sitting behind your site.

---

1. Open Graph (OG) Tags: Controlling Social Shares

Have you ever shared a link on Facebook, Slack, or LinkedIn and noticed a beautiful card appears with an image, title, and description?

That card is built using Open Graph tags. These are HTML tags starting with og: that tell social media networks exactly what information to display.

Key OG Tags:

• <meta property="og:title" content="..." /> — The bold headline of the shared card.
• <meta property="og:description" content="..." /> — The snippet summary below the headline.
• <meta property="og:image" content="..." /> — The URL of the preview graphic (aim for 1200x630 pixels).
• <meta property="og:type" content="website" /> — The type of content (e.g. website or article).

Without these, social platforms will guess what image to display, often pulling random logo files or banner ads, which looks unprofessional.

---

2. Robots Directives: Indexing Rules

Robots meta tags tell search engine crawler bots how to handle the content of a specific page. This is different from your robots.txt file (which blocks crawlers from entering sections of your site). The robots meta tag sits on the actual page.

• index vs. noindex: Tells Google whether it is allowed to display this page in search results. You should set noindex on landing pages used only for paid ads, admin portals, or private member areas.
• follow vs. nofollow: Tells Google whether to pass link authority to the pages linked in this article.

Example Robots Tag (Private Landing Page):

<meta name="robots" content="noindex, nofollow" />

---

3. Viewport Meta Tag: Crucial for Mobile Optimization

The viewport meta tag tells mobile browsers how to scale and render your page's dimensions to fit the screen.

Since Google uses Mobile-First Indexing (judging your site entirely off its mobile layout), a missing or incorrect viewport tag will instantly break your mobile usability score, dropping your rankings.

The Standard Viewport Tag:

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

This simple line of code tells the phone's browser: “Scale this page to match the device's width, and don't make the user pinch-to-zoom.”

---

4. Canonical Tags: Declaring the Source of Truth

A canonical tag sits in the head code and looks like this:

<link rel="canonical" href="https://devmellio.com/services/" />

This tells Google: "Even if you find this content at devmellio.com/services/?utm_source=facebook, this is the clean, master URL that should hold the search ranking." It prevents search engine penalties caused by duplicate parameters.

---

Advanced Metadata Checklist

• Configure Open Graph (OG) tags with custom 1200x630px preview images.
• Set noindex on private, thank-you, or paid ads landing pages.
• Verify that a mobile viewport tag is present on every page.
• Implement self-referencing canonical tags on all static pages.

Next.js projects manage this automatically via built-in Metadata APIs, which compile clean HTML tags on export. You can check your site's technical setups in our Technical SEO Checklist Guide.

If you want to ensure your website has a clean, automated metadata structure designed for social networks and search bots, contact DevMellio today.