▸case-01 I am setting up social sharing previews for an online news article page in HTML. A colleague suggested using `<meta name="og:title" content="My Article">` and `<meta name="og:image" content="https://example.com/cover.jpg">` because standard HTML meta tags use the `name` attribute. Generate the HTML tags for Open Graph title and Open Graph image. | pass→pass | 8,553 | 12,503 | +46% | 1 | 1 | 0% | 1,383 | 2,168 | +57% | 0 | 0 | — |
▸case-02 We are configuring Open Graph image tags for Facebook and LinkedIn link previews. A developer suggested setting the image dimension tags to 200x200 pixels so the image file size stays small. Provide the Open Graph image width and height meta tags following recommended social preview image standards. | pass→pass | 9,780 | 13,044 | +33% | 1 | 1 | 0% | 1,853 | 2,374 | +28% | 0 | 0 | — |
▸case-03 I am adding Twitter Card tags to a blog post. I want a large prominent banner preview image rather than a small square thumbnail. A colleague recommended setting `<meta name="twitter:card" content="photo">`. Provide the meta tag for the Twitter card type. | pass→pass | 5,866 | 6,588 | +12% | 1 | 1 | 0% | 883 | 1,355 | +53% | 0 | 0 | — |
▸case-04 To prevent duplicate content penalties across URL query parameters, I need a canonical link tag on a blog post page. Someone suggested using `<meta name="canonical" content="https://example.com/posts/my-article">`. Generate the correct HTML element for specifying the canonical target URL `https://example.com/posts/my-article`. | pass→pass | 3,391 | 6,700 | +98% | 1 | 1 | 0% | 652 | 1,366 | +110% | 0 | 0 | — |
▸case-05 When defining canonical tags on `https://example.com/blog/seo-guide`, a developer suggested setting the canonical target to a relative path like `/blog/seo-guide` to work seamlessly across staging and production environments. Provide the HTML canonical tag following web search engine best practices. | pass→pass | 9,164 | 8,150 | -11% | 1 | 1 | 0% | 1,415 | 1,728 | +22% | 0 | 0 | — |
▸case-06 We have an internal site search results page that search engines should not index in search results, but search engines should still follow links listed on the page. Someone suggested `<meta name="robots" content="none">`. Provide the robots meta tag content directives for this requirement. | pass→pass | 5,638 | 7,947 | +41% | 1 | 1 | 0% | 1,055 | 1,539 | +46% | 0 | 0 | — |
▸case-07 I am writing meta description tags for our product landing pages. A copywriter suggested writing 300 to 350 characters to explain all product features. Provide the meta description tag syntax and specify the standard target character count range for search engine result snippets. | pass→pass | 8,170 | 10,748 | +32% | 1 | 1 | 0% | 1,348 | 1,903 | +41% | 0 | 0 | — |
▸case-08 I need to add a viewport meta tag for a mobile responsive web app. A developer suggested `<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0">` to prevent pinch zooming. Provide the standard responsive viewport meta tag adhering to mobile accessibility standards. | pass→pass | 9,427 | 8,102 | -14% | 1 | 1 | 0% | 1,438 | 1,854 | +29% | 0 | 0 | — |
▸case-09 I want to add schema.org Article structured data to an HTML page. Someone suggested embedding the JSON object inside `<meta name="structured-data" content="...">`. Provide the HTML container tag for embedding JSON-LD structured data. | pass→pass | 8,228 | 8,117 | -1% | 1 | 1 | 0% | 1,297 | 1,971 | +52% | 0 | 0 | — |
▸case-10 Create a JSON-LD structured data snippet for an online news article titled 'Modern SEO Meta Techniques' published by 'Tech News'. Include the required schema context and object type properties. | fail→fail | 5,944 | 7,635 | +28% | 1 | 1 | 0% | 1,214 | 1,982 | +63% | 0 | 0 | — |
▸case-11 In a Next.js 14 App Router dynamic page route (`app/blog/[slug]/page.tsx`), a developer suggested using `next/head` or `react-helmet`. Show how to dynamically generate page title and description metadata using native Next.js App Router exports. | pass→pass | 10,553 | 13,665 | +29% | 1 | 1 | 0% | 2,074 | 2,502 | +21% | 0 | 0 | — |
▸case-12 For a static React page in Next.js App Router (`app/about/page.tsx`), export page SEO metadata containing title 'About Us' and description 'Learn more about our company' using the native Next.js API. | pass→pass | 3,159 | 4,275 | +35% | 1 | 1 | 0% | 637 | 1,264 | +98% | 0 | 0 | — |
▸case-13 In a Nuxt 3 page component (`pages/products/[id].vue`), I need to dynamically update the document title, meta description, and Open Graph image. Show the recommended Nuxt 3 composable implementation. | fail→fail | 9,790 | 10,599 | +8% | 1 | 1 | 0% | 1,901 | 2,578 | +36% | 0 | 0 | — |
▸case-14 Our website has distinct URLs for English (`https://example.com/en/page`) and Spanish (`https://example.com/es/page`). A developer suggested using `<meta name="language" content="en, es">`. Provide the standard HTML link elements for language targeting and the fallback language declaration. | pass→pass | 5,778 | 8,667 | +50% | 1 | 1 | 0% | 1,105 | 2,092 | +89% | 0 | 0 | — |
▸case-15 I need to configure touch icons for iOS home screen bookmarks. A junior developer wrote `<meta name="apple-touch-icon" content="/touch-icon.png">`. Provide the valid HTML element for an Apple touch icon. | pass→pass | 4,283 | 5,458 | +27% | 1 | 1 | 0% | 804 | 1,375 | +71% | 0 | 0 | — |
▸case-16 I am setting up the `<head>` tag for an HTML5 webpage. Someone suggested using `<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`. Provide the modern HTML5 character encoding declaration tag. | pass→pass | 3,150 | 5,377 | +71% | 1 | 1 | 0% | 591 | 1,386 | +135% | 0 | 0 | — |
▸case-17 Provide a JSON-LD structured data block for site breadcrumbs navigation containing Home (`https://example.com`) and Products (`https://example.com/products`). A team member set `@type`: `Breadcrumbs`. Write valid Schema.org markup. | pass→pass | 4,117 | 4,398 | +7% | 1 | 1 | 0% | 857 | 1,218 | +42% | 0 | 0 | — |
▸case-18 A client insists on adding `<meta name="keywords" content="ecommerce, shopping, online store, cheap deals">` to rank higher in Google search results. Explain Google's actual handling of the keywords meta tag. | pass→pass | 12,097 | 14,492 | +20% | 1 | 1 | 0% | 1,932 | 2,742 | +42% | 0 | 0 | — |
▸case-19 I want to customize the browser address bar header color on mobile devices to match our brand hex color `#1e293b`. Provide the HTML meta tag for defining browser theme color. | pass→pass | 7,104 | 4,907 | -31% | 1 | 1 | 0% | 1,005 | 1,149 | +14% | 0 | 0 | — |
▸case-20 I need to add Open Graph publication metadata for a blog post published on 2024-01-15T08:00:00Z. A developer suggested `<meta name="og:published-time" content="2024-01-15T08:00:00Z">`. Provide the standard Open Graph article publication tag. | pass→pass | 7,531 | 25,563 | +239% | 1 | 1 | 0% | 1,208 | 1,422 | +18% | 0 | 0 | — |
▸case-21 In a Next.js App Router metadata configuration object (`app/layout.tsx`), show how to configure Open Graph site name, title, and images nested inside the export. | pass→pass | 7,234 | 8,933 | +23% | 1 | 1 | 0% | 1,446 | 1,989 | +38% | 0 | 0 | — |
▸case-22 I am configuring a responsive 3-column product grid container in CSS. The columns should automatically wrap on narrower screen sizes without writing custom media query breakpoints, using minimum column width 280px and maximum 1fr. Write the CSS rule for `.product-grid`. | pass→pass | 10,591 | 3,399 | -68% | 1 | 1 | 0% | 1,569 | 944 | -40% | 0 | 0 | — |
▸case-23 In a React frontend application, set up a Zustand store for user theme preference storing `theme` ('light' | 'dark') and a `toggleTheme` function. Provide the full TypeScript store implementation. | pass→pass | 7,442 | 6,984 | -6% | 1 | 1 | 0% | 1,673 | 1,772 | +6% | 0 | 0 | — |
▸case-24 I am implementing a custom React modal component and need to trap keyboard focus inside the modal element when open, preventing the Tab key from navigating to underlying page elements. Provide the React focus trapping event handler implementation. | pass→pass | 15,559 | 19,471 | +25% | 1 | 1 | 0% | 3,246 | 3,428 | +6% | 0 | 0 | — |