skip to content

Metadata and SEO

Everything in the head that talks to crawlers, social platforms, and the device rather than to the user: meta tags, share cards, canonical and robots directives, and structured data. Interviewers check that you know which of these are markup contracts and which are HTTP headers in disguise.

part ofHTMLoverview, primer and where to startread it →
on this pageshow

explore

questions

26

A responsive page opens on a phone rendered at desktop width and zoomed out, and its media queries appear to be ignored. What does `<meta name="viewport" content="width=device-width, initial-scale=1">` change, and why is the page broken without it?

level: juniorimportance: must knowfreq 80%

basics

~20 s

Without a viewport meta tag, phone browsers lay a page out in a pretend wide viewport (about 980 CSS pixels) and shrink the result to fit the screen. width=device-width, initial-scale=1 makes the layout width match the device, so width-based media queries see real sizes.

open as a page

When someone pastes a link to your page into Slack or a social feed, which Open Graph meta tags decide the preview's title, description and image, and why are Open Graph tags written with property= instead of name=?

level: juniorimportance: must knowfreq 70%

basics

~10 s

Open Graph tags in the head supply the preview: og:title, og:description and og:image, plus og:url and og:type. They use property= because Open Graph is an RDFa vocabulary, unlike Twitter's twitter:* tags, which use name=.

open as a page

What does a `<script type="application/ld+json">` block in an HTML page contain, and what does the browser do with its contents when it parses the page?

level: juniorimportance: must knowfreq 68%

basics

~20 s

A script tagged type="application/ld+json" holds JSON-LD data describing the page's entities, usually with schema.org vocabulary. The browser treats it as an inert data block: never executed, never displayed. Machines such as search crawlers read it.

open as a page

A URL is listed under `Disallow` in robots.txt and the page also serves `<meta name="robots" content="noindex">`. Why can that URL still turn up in search results?

level: middleimportance: must knowfreq 58%

basics

~20 s

robots.txt controls crawling, not indexing. A crawler that obeys the Disallow never fetches the page, so it never reads the noindex directive inside it — while the URL itself, discovered from links elsewhere, can still be indexed without a description.

open as a page

A page declares <meta property="og:image" content="/images/card.png"> and the link preview shows no image on any platform. What is wrong, and which companion og:image properties are worth adding?

level: middleimportance: must knowfreq 62%

basics

~20 s

Open Graph requires absolute URLs, so a root-relative path is unusable by the scraper. Use the full https:// URL, and add og:image:width, og:image:height, og:image:type and og:image:alt so platforms can lay the card out before the file downloads.

open as a page

schema.org data can be expressed as a JSON-LD script block, as microdata attributes (itemscope/itemtype/itemprop) on the visible markup, or as RDFa. Why do most teams choose JSON-LD, and what do they give up by doing so?

level: middleimportance: must knowfreq 58%

basics

~20 s

JSON-LD keeps structured data in one contiguous block, decoupled from the DOM, so it survives template and markup refactors and can be generated straight from the server's data model. The cost is duplication: the data now exists twice and can drift from the visible page.

open as a page

A single-page app writes each route's Open Graph tags into the document head from JavaScript after the app mounts, yet every shared link still previews with the same site-wide title and image. Why does that happen, and what actually fixes it?

level: seniorimportance: must knowfreq 58%

basics

~20 s

Link-preview scrapers read the HTML the server returns and generally do not execute JavaScript, so they only ever see the shell's fallback tags. The fix is to emit each route's Open Graph tags in the served HTML — server rendering or prerendering — not to inject them later.

open as a page

Your site must keep a set of PDF files out of search results. Why does `<meta name="robots" content="noindex">` not help there, and what do you use instead?

level: middleimportance: should knowfreq 36%

basics

~20 s

A robots meta tag only exists inside an HTML head, and a PDF has none, so there is nothing for a crawler to parse. Send the same directive as an X-Robots-Tag response header for those paths instead; it works for any file type.

open as a page

What does `<meta name="description">` actually do for a page in search results, and is it a ranking signal?

level: middleimportance: should knowfreq 45%

basics

~20 s

A meta description is not a ranking signal. It is a candidate for the snippet shown under the title in search results, and engines often rewrite it using page text that better matches the query. Its practical value is click-through rate, not position.

open as a page

A team ships `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">`. What do those last two values do, and why will an accessibility reviewer flag them?

level: middleimportance: should knowfreq 45%

basics

~20 s

maximum-scale=1 and user-scalable=no stop the user from pinch-zooming the page. That removes the main way low-vision users enlarge content, so it fails accessibility review; Safari on iOS has ignored these values since iOS 10, but Android browsers still honour them.

open as a page

In X/Twitter card markup, what does <meta name="twitter:card" content="summary_large_image"> change compared with content="summary", and which Open Graph tags does the card fall back to if you omit twitter:title, twitter:description and twitter:image?

level: middleimportance: should knowfreq 50%

basics

~20 s

summary_large_image renders a wide banner card with the image above the text, while summary renders a small square thumbnail beside it. Omitted twitter:title, twitter:description and twitter:image fall back to og:title, og:description and og:image; twitter:card itself has no Open Graph equivalent.

open as a page

A product page needs schema.org markup for the Product, for the site's Organization, and for a BreadcrumbList. How do you express several entities on one page in JSON-LD without repeating the Organization inside every node?

level: middleimportance: should knowfreq 36%

basics

~20 s

Give each entity a stable @id (conventionally a URL with a fragment), define it once, and reference it elsewhere as {"@id": "..."}. Put the nodes in one script block's @graph array, in a top-level array, or in separate script blocks — all three are valid.

open as a page

Search Console shows that Google selected a different canonical URL than the one your page declares in `<link rel="canonical">`. What causes a declared canonical to be overridden, and how would you investigate?

level: seniorimportance: should knowfreq 40%

basics

~20 s

A canonical is a hint weighed against other signals, so it loses when internal links, sitemap entries, redirects or hreflang point elsewhere, when the target is not indexable, or when the pages are not actually duplicates. Investigate by reading the raw HTML and comparing every signal.

open as a page

In a document's `<head>`, what can `<meta http-equiv="…">` actually deliver, and how does it differ from sending the same directive as an HTTP response header?

level: seniorimportance: should knowfreq 35%

basics

~20 s

Only a short list of pragma directives works in a meta tag — content-type, refresh, default-style, content-security-policy and the legacy x-ua-compatible. Others such as X-Frame-Options and Set-Cookie are ignored in markup, and a meta directive only applies once the parser reaches it.

open as a page

You deploy corrected Open Graph tags for an article, but pasting its link into Slack and Facebook still shows the old title and image. What explains that, and how do you get the platforms to pick up the new card?

level: seniorimportance: should knowfreq 42%

basics

~20 s

Platforms cache scraped metadata per URL, so a corrected tag does not take effect until they re-scrape. Force it with the platform's own tool where one exists, such as Facebook's Sharing Debugger, and change the og:image URL when the image itself changed.

open as a page

A product page's JSON-LD passes the schema.org validator without errors, but weeks later Google Search still shows no product rich result for those pages. How would you investigate?

level: seniorimportance: should knowfreq 42%

basics

~20 s

Valid schema.org is not the same as eligible: check the markup against the specific rich-result feature's required properties with Google's Rich Results Test on the live URL, confirm the crawler sees the block in the delivered HTML, and verify the data matches visible page content.

open as a page

A large catalogue site generates many URL variants — filter combinations, sort orders, pagination and tracking parameters. How do you decide, per surface, between disallowing the crawl, serving a noindex directive, canonicalising to a base URL, or leaving it indexable?

level: principalimportance: should knowfreq 28%

basics

~20 s

Match the tool to the intent: canonical for true duplicates that must stay crawlable, noindex for pages that should exist but never be listed, robots.txt only for near-infinite spaces where saving crawl effort outweighs losing visibility, and indexable for variants with genuine standalone demand.

open as a page

A page's `<head>` declares several `<link rel="icon">` candidates with different `sizes` and `type` values. How does the browser decide which one to use, and where does an SVG favicon fit into that set?

level: middleimportance: nice to knowfreq 30%

basics

~20 s

The browser treats the icon links as a candidate list and picks the one whose declared sizes and type best fit the surface it is drawing. An SVG icon is size-agnostic, so one file covers every density, with an ICO or PNG behind it as a fallback.

open as a page

What do `<meta name="theme-color">` and `<meta name="color-scheme">` each control, and which one stops a white flash before a dark stylesheet applies?

level: middleimportance: nice to knowfreq 30%

basics

~20 s

theme-color tints browser UI such as the Android Chrome toolbar and the Safari tab bar. color-scheme declares which schemes the page supports, so the browser paints its default canvas, form controls and scrollbars accordingly — and that is what removes the white flash before dark CSS loads.

open as a page

A shop serves the same product page at /en-gb/kettle and /de-de/wasserkocher. How should `<link rel="alternate" hreflang="…">` be set up across those pages, and how does it interact with each page's canonical?

level: seniorimportance: nice to knowfreq 22%

basics

~20 s

Every page in the language set lists the full set of alternates, including a link to itself, using matching language-region codes plus an optional x-default. Each page keeps a canonical pointing at itself — canonicalising one localisation to another collapses the set.

open as a page

A staging site sits behind a session-cookie login. The page itself loads fine, but the request the browser makes for the URL in `<link rel="manifest">` comes back as the login redirect instead of the manifest JSON. What about that link explains it, and what is the fix?

level: seniorimportance: nice to knowfreq 12%

basics

~20 s

The manifest is fetched without credentials by default, so the session cookie is not sent and the server answers with the login flow. Adding crossorigin="use-credentials" to the manifest link makes the browser send credentials — this applies even when the manifest is same-origin.

open as a page

On Android, a site's installed home-screen icon shows up shrunken inside a white circle rather than filling the shape. Which part of a web app manifest's `icons` entries controls that, and how do you author the asset?

level: seniorimportance: nice to knowfreq 15%

basics

~20 s

The icon entry's purpose member controls it. With the default purpose of any, the platform pads the icon onto a background shape; an entry marked purpose maskable tells it to crop your full-bleed asset to the device's mask instead.

open as a page

You lead frontend for a large catalogue site where each template's JSON-LD was hand-written by whoever built it. How do you decide what to mark up, and how do you keep the structured data trustworthy as the site changes?

level: principalimportance: nice to knowfreq 26%

basics

~20 s

Mark up only the entity types tied to a rich result you actually want, generate every block from the same data that renders the visible page, and treat the output as a tested artifact monitored in Search Console — not as documentation to hand-maintain per template.

open as a page