`, boosting indexing accuracy - `

` signals navigation links, helping search engines discover internal pages - `

` marks supplementary content so it is not confused with the main topic - Screen readers can jump between landmark regions (`header`, `main`, `footer`, `nav`) Reference: [MDN - HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) --- ## Internal Linking Strategy **Impact: HIGH (Distributes page authority and aids discoverability)** Internal links pass PageRank between pages, help crawlers discover content, and establish topical relationships. A well-planned internal linking structure ensures every page is reachable and properly weighted. ## Incorrect ```html

We wrote a guide about page speed optimization. Click here to read it.

View Pricing

``` ```tsx // ❌ Inertia: using router.visit() instead of import { router } from '@inertiajs/react'; function ProductCard({ product }: { product: Product }) { return (

router.visit(`/products/${product.slug}`)} >

{product.name}

{product.summary}

{/* No tag — search engines cannot follow this link */}

); } ``` **Problems:** - "Click here" gives crawlers no context about the destination page's topic - JavaScript-only navigation is invisible to crawlers that do not execute JS - Orphan pages with zero internal links may never be crawled or indexed ## Correct ```html

Improve load times with our page speed optimization guide, covering image compression, caching, and lazy loading.

``` ```tsx // ✅ Inertia.js: crawlable links with component import { Link } from '@inertiajs/react'; function ProductCard({ product }: { product: Product }) { return (

{product.name}

{product.summary}

); } ``` **Benefits:** - Descriptive anchor text signals topic relevance to crawlers for both source and destination pages - Breadcrumbs keep every page within 3 clicks of the homepage, improving crawl efficiency - Using `` tags ensures links are discoverable without JavaScript execution - Related-content sections eliminate orphan pages and distribute link equity Reference: [Google Search Central - Links](https://developers.google.com/search/docs/crawling-indexing/links-crawlable) --- ## Image SEO and Alt Text **Impact: HIGH (Images appear in Google Image Search and affect CWV)** Properly optimized images improve page load performance (directly affecting Core Web Vitals), surface content in Google Image Search, and provide essential context for screen-reader users. ## Incorrect ```html

``` **Problems:** - Missing `alt` text means crawlers and screen readers get zero context about the image - Generic filenames like `IMG_1234.jpg` waste a ranking signal; Google reads filenames - Omitting `width` and `height` causes Cumulative Layout Shift (CLS) as images load - Serving a 4000px PNG when an 800px WebP would suffice wastes bandwidth and hurts LCP ## Correct ```html Blue trail running shoe with Vibram sole, side view

``` ```tsx // ✅ React component with proper image optimization interface Product { slug: string; name: string; color: string; category: string; } function ProductImage({ product }: { product: Product }) { return ( {`${product.name}

); } ``` **Benefits:** - Descriptive `alt` text and filenames provide keyword signals for Google Image Search - Explicit `width` and `height` eliminate layout shift, improving CLS scores - ` ``` **Problems:** - Missing `position` property makes the item order undefined; Google requires it - Schema breadcrumb path does not match the visible breadcrumb UI, violating Google's consistency guidelines - Mismatched paths may trigger a structured data warning in Search Console ## Correct ```html ``` ```tsx // ✅ React component for Breadcrumb with JSON-LD interface BreadcrumbItem { name: string; href?: string; } interface BreadcrumbProps { items: BreadcrumbItem[]; baseUrl: string; } function Breadcrumb({ items, baseUrl }: BreadcrumbProps) { const schema = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: items.map((item, index) => ({ '@type': 'ListItem', position: index + 1, name: item.name, ...(item.href ? { item: `${baseUrl}${item.href}` } : {}), })), }; return ( <> {{-- Usage: --}} ``` **Benefits:** - Breadcrumb rich results replace raw URLs in SERPs, improving readability and click-through rates - `position` property ensures correct ordering regardless of DOM structure - Last item without `item` URL correctly represents the current page - Schema matches visible breadcrumbs, satisfying Google's consistency requirements Reference: [Google Search Central - Breadcrumb Structured Data](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb) --- ## Combining Multiple Schema Types with @graph **Impact: HIGH (Pages need multiple schema types — @graph combines them cleanly)** Most pages need more than one schema type — a blog post page typically needs Organization, WebSite, BreadcrumbList, and Article. Using `@graph` combines them into a single structured block that search engines parse as a connected entity graph, improving how Google understands relationships between entities on your page. ## Incorrect ```html ``` **Problems:** - Multiple ` ``` ```php {{-- ✅ Laravel Blade component that builds @graph from a $schemas array --}} {{-- Usage: --}} @props(['schemas' => []]) @php $graph = [ '@context' => 'https://schema.org', '@graph' => $schemas, ]; @endphp ``` ```php {{-- ✅ Using the component in a blog post Blade view --}} @php $orgSchema = [ '@type' => 'Organization', '@id' => url('/') . '/#organization', 'name' => config('app.name'), 'url' => url('/'), 'logo' => [ '@type' => 'ImageObject', 'url' => asset('images/logo.png'), ], ]; $websiteSchema = [ '@type' => 'WebSite', '@id' => url('/') . '/#website', 'name' => config('app.name'), 'url' => url('/'), 'publisher' => ['@id' => url('/') . '/#organization'], ]; $breadcrumbSchema = [ '@type' => 'BreadcrumbList', '@id' => route('posts.show', $post->slug) . '#breadcrumb', 'itemListElement' => [ ['@type' => 'ListItem', 'position' => 1, 'name' => 'Home', 'item' => url('/')], ['@type' => 'ListItem', 'position' => 2, 'name' => 'Blog', 'item' => route('posts.index')], ['@type' => 'ListItem', 'position' => 3, 'name' => $post->title], ], ]; $articleSchema = [ '@type' => 'Article', '@id' => route('posts.show', $post->slug) . '#article', 'headline' => $post->title, 'description' => $post->excerpt, 'image' => [asset("storage/{$post->featured_image}")], 'author' => [ '@type' => 'Person', 'name' => $post->author->name, 'url' => route('authors.show', $post->author->slug), ], 'publisher' => ['@id' => url('/') . '/#organization'], 'datePublished' => $post->published_at->toIso8601String(), 'dateModified' => $post->updated_at->toIso8601String(), 'isPartOf' => ['@id' => url('/') . '/#website'], 'breadcrumb' => ['@id' => route('posts.show', $post->slug) . '#breadcrumb'], 'mainEntityOfPage' => [ '@type' => 'WebPage', '@id' => route('posts.show', $post->slug), ], ]; @endphp ``` ```tsx // ✅ React component that builds @graph dynamically import { Head } from '@inertiajs/react'; type SchemaEntity = Record; interface SchemaGraphProps { schemas: SchemaEntity[]; } function SchemaGraph({ schemas }: SchemaGraphProps) { const graph = { '@context': 'https://schema.org', '@graph': schemas, }; return ( ``` ```php {{-- ✅ Laravel Blade generating FAQ schema from a $faqs collection --}} {{-- $faqs is a collection of objects with ->question and ->answer properties --}} @php $faqSchema = [ '@context' => 'https://schema.org', '@type' => 'FAQPage', 'mainEntity' => $faqs->map(fn ($faq) => [ '@type' => 'Question', 'name' => $faq->question, 'acceptedAnswer' => [ '@type' => 'Answer', 'text' => strip_tags($faq->answer), ], ])->values()->all(), ]; @endphp {{-- Visible FAQ content must match the schema --}}

Frequently Asked Questions

@foreach ($faqs as $faq)

{!! $faq->answer !!}

@endforeach

``` ```tsx // ✅ Inertia/React FAQ page with schema markup import { Head } from '@inertiajs/react'; interface Faq { id: number; question: string; answer: string; } interface FaqPageProps { faqs: Faq[]; title: string; description: string; } function stripHtml(html: string): string { return html.replace(/<[^>]*>/g, ''); } export default function FaqPage({ faqs, title, description }: FaqPageProps) { const faqSchema = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faqs.map((faq) => ({ '@type': 'Question', name: faq.question, acceptedAnswer: { '@type': 'Answer', text: stripHtml(faq.answer), }, })), }; return ( <> {title} ``` **Problems:** - `loading="lazy"` on the hero image causes the browser to deprioritize the LCP element, delaying the largest paint - Custom JavaScript lazy loaders add bundle weight, introduce a runtime dependency, and are invisible to the browser's preload scanner - Images using `data-src` instead of `src` are not discoverable by the browser until JavaScript executes ## Correct ```html

``` ```tsx // ✅ React: eager loading for LCP image, lazy loading for below-fold images export default function HomePage() { return ( <> {/* LCP element: no lazy loading, high fetch priority */}

{/* Below-fold: native lazy loading */}

); } ``` **Benefits:** - `fetchpriority="high"` on the LCP element ensures it is fetched before other resources, improving LCP - Native `loading="lazy"` requires no JavaScript, works with the browser's preload scanner, and is supported by all modern browsers - Real `src` attributes allow the browser to discover images immediately, unlike `data-src` patterns - Explicit `width` and `height` reserve layout space and prevent CLS Reference: [Browser-level image lazy loading](https://web.dev/articles/browser-level-image-lazy-loading) --- ## Web Font Loading Strategy **Impact: HIGH (Prevents FOIT/FOUT and reduces CLS)** Web fonts cause Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) that shifts layout and degrades user experience. A proper font loading strategy uses `font-display: swap`, preloads critical fonts, subsets character sets, and self-hosts to eliminate third-party round trips. ## Incorrect ```css /* ❌ Bad: no font-display, loading all weights from third-party CDN */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=block'); body { font-family: 'Inter', sans-serif; } ``` ```html ``` **Problems:** - `font-display: block` causes FOIT, hiding text for up to 3 seconds while the font downloads - Loading all 9 font weights downloads hundreds of kilobytes that are never used - Third-party CSS from Google Fonts requires DNS lookup, TCP connection, and TLS handshake to `fonts.googleapis.com`, then another connection to `fonts.gstatic.com` - `@import` in CSS is render-blocking and delays font discovery further ## Correct ```css /* ✅ Good: self-hosted, subsetted fonts with font-display: swap and size-adjust */ @font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F; } /* Fallback font with size-adjust to minimize CLS */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } body { font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif; } ``` ```html ``` **Benefits:** - `font-display: swap` shows text immediately in the fallback font, eliminating FOIT - `size-adjust` on the fallback font matches metrics to the web font, minimizing layout shift (CLS) during the swap - Self-hosting eliminates third-party DNS lookups, connection overhead, and potential downtime - Subsetting with `unicode-range` reduces each font file to only the characters needed - Preloading the regular weight font starts the download before CSS is parsed Reference: [Best practices for fonts](https://web.dev/articles/font-best-practices) --- ## Resource Hints (Preconnect, Preload, Prefetch) **Impact: HIGH (Reduces connection latency and speeds up critical resources)** Resource hints tell the browser about resources it will need, allowing it to start DNS lookups, TCP connections, or full downloads before they would normally be discovered. Used correctly, they shave hundreds of milliseconds off critical resource loading. Used excessively, they waste bandwidth and compete with truly critical resources. ## Incorrect ```html ``` **Problems:** - Without `preconnect`, the browser must wait until it discovers each third-party resource before starting DNS + TCP + TLS (300-500ms per origin) - Preloading non-critical resources (footer images, chat widgets) competes with the LCP image and critical CSS for bandwidth - Too many preload hints cause the browser to ignore priority signals, negating the benefit entirely ## Correct ```html ``` ```tsx // ✅ React SPA: resource hints via Inertia.js Head component import { Head } from '@inertiajs/react'; export default function AppLayout({ children }: { children: React.ReactNode }) { return ( <> {children} ); } ``` **Benefits:** - `preconnect` eliminates 300-500ms of connection setup for critical third-party origins - `dns-prefetch` provides a graceful fallback in older browsers that do not support `preconnect` - Limiting preloads to 2-3 critical resources ensures they receive maximum bandwidth priority - `prefetch` prepares resources for future navigations during idle time without competing with the current page - `fetchpriority="high"` on the preloaded LCP image ensures it is prioritized above other preloaded resources Reference: [Preconnect to required origins](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect) --- ## Open Graph Meta Tags **Impact: HIGH (Controls how pages appear on Facebook, LinkedIn, Discord)** Open Graph tags control the title, description, and image shown when your page is shared on social platforms. Without them, platforms guess from page content and often produce unappealing or incorrect previews, reducing click-through rates from social traffic. ## Incorrect ```html ``` **Problems:** - `og:title` exceeds 60 characters and reads like keyword stuffing; platforms truncate it - `og:url` uses a relative path; platforms cannot resolve it to the correct page - `og:image` uses a relative URL and likely references a small logo instead of a 1200x630 share image - Missing `og:description`, `og:type`, and `og:image:alt` means platforms must guess or show nothing ## Correct ```html ``` ```tsx // ✅ React SPA: Open Graph tags with Inertia.js Head component import { Head } from '@inertiajs/react'; interface Product { name: string; slug: string; shortDescription: string; ogImageUrl: string; imageAlt: string; } export default function ProductPage({ product }: { product: Product }) { return ( <> {`${product.name} | SportShop`}

{product.name}

); } ``` ```blade {{-- ✅ Laravel Blade: OG tags in the layout --}} ``` **Benefits:** - `og:title` under 60 characters displays fully on all platforms without truncation - `og:description` between 100-200 characters provides enough context to drive clicks - `og:image` at 1200x630px with an absolute URL renders correctly as a large preview card on Facebook, LinkedIn, and Discord - `og:image:alt` improves accessibility and provides context when the image fails to load - `og:url` with an absolute URL ensures the canonical page receives all share counts Reference: [Open Graph Protocol](https://ogp.me/) --- ## Twitter/X Card Meta Tags **Impact: HIGH (Controls how pages appear when shared on Twitter/X)** Twitter Card meta tags control the preview shown when your URL is posted on Twitter/X. A properly configured `summary_large_image` card with a high-quality image significantly increases engagement compared to a plain text link. Twitter falls back to Open Graph tags for `title`, `description`, and `image`, so you only need Twitter-specific tags for the card type and site handle. ## Incorrect ```html ``` ```html ``` **Problems:** - Without `twitter:card`, Twitter renders a minimal link preview with no image or only a tiny thumbnail - The `summary` card type shows a small square thumbnail; `summary_large_image` displays a full-width image that drives more engagement - Duplicating `title`, `description`, and `image` in both OG and Twitter tags is unnecessary since Twitter falls back to OG values ## Correct ```html ``` ```tsx // ✅ React SPA: Twitter card tags with Inertia.js Head component import { Head } from '@inertiajs/react'; export default function RunningTipsPage() { return ( <> 10 Tips for Better Running Form

10 Tips for Better Running Form

{/* Page content */}

); } ``` **Benefits:** - `summary_large_image` displays a full-width image preview that is significantly more engaging than the `summary` card - `twitter:site` attributes the content to your brand account, building recognition - `twitter:creator` credits the author and links to their profile - Relying on OG fallback for `title`, `description`, and `image` avoids duplication and simplifies maintenance **Validation:** Preview your cards by composing a draft post on [X.com](https://x.com) with the URL. Use [Open Graph Debugger](https://developers.facebook.com/tools/debug/) for Facebook and [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) for LinkedIn. Reference: [Twitter Cards documentation](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards) --- ## Rendering Strategy for SEO **Impact: HIGH (Wrong rendering strategy can make content invisible to search engines)** Search engines can execute JavaScript, but CSR-only pages are slower to crawl, have a secondary indexing queue, and risk incomplete rendering. Choosing the right rendering strategy for each page type ensures your content is immediately visible to crawlers and loads fast for users. | Strategy | Best For | SEO | Performance | |----------|----------|-----|-------------| | **Laravel (server-rendered)** | Content pages, blogs, marketing, products | Excellent | Excellent | | **Laravel + Inertia.js** | Full-stack apps needing SPA feel with server rendering | Excellent | Good | | **React SPA (Vite)** | Authenticated dashboards, admin panels | Poor | Varies | ## Incorrect ```tsx // ❌ Bad: CSR-only for public content pages import { useState, useEffect } from "react"; export default function ProductPage({ slug }: { slug: string }) { const [product, setProduct] = useState(null); useEffect(() => { fetch(`/api/products/${slug}`) .then((res) => res.json()) .then(setProduct); }, [slug]); if (!product) return

; return (

{product.name}

{product.description}

); } ``` **Problems:** - Search engine crawlers see "Loading..." instead of product content on the initial HTML response - Content depends on client-side JavaScript execution, which Googlebot processes in a deferred rendering queue - No meta tags are available on the server-rendered HTML, so social sharing previews are empty - Time to first meaningful content is delayed by JavaScript download, parse, and API fetch ## Correct ```php {{-- ✅ Laravel Blade: server-rendered product page with full HTML in initial response --}} {{-- resources/views/products/show.blade.php --}} @extends('layouts.app') @section('title', $product->name . ' | SportShop') @section('meta_description', $product->short_description) @section('og_title', $product->name) @section('og_image', $product->og_image_url) @section('content')

${{ number_format($product->price, 2) }}

@endsection ``` ```tsx // ✅ Laravel + Inertia.js: server-rendered React pages with SPA navigation // resources/js/Pages/Products/Show.tsx import { Head } from "@inertiajs/react"; interface Product { name: string; slug: string; description: string; short_description: string; price: number; og_image_url: string; } export default function ProductShow({ product }: { product: Product }) { return ( <> {`${product.name} | SportShop`}

{product.name}

{product.description}

${product.price.toFixed(2)}

); } ``` ```php // ✅ Laravel + Inertia.js: controller passes data to the React page // app/Http/Controllers/ProductController.php namespace App\Http\Controllers; use App\Models\Product; use Inertia\Inertia; class ProductController extends Controller { public function show(Product $product) { return Inertia::render('Products/Show', [ 'product' => $product->only([ 'name', 'slug', 'description', 'short_description', 'price', 'og_image_url', ]), ]); } } ``` **Benefits:** - Full HTML content is present in the initial server response, immediately visible to crawlers - Meta tags are server-rendered, enabling rich social sharing previews - Laravel Blade pages are fully server-rendered with zero JavaScript dependency for crawlers - Inertia.js combines Laravel's server-side rendering with React's SPA navigation experience - CSR is reserved for authenticated pages where SEO is not a concern Reference: [Rendering on the Web](https://web.dev/articles/rendering-on-the-web) --- ## Dynamic Meta Tag Management in SPAs **Impact: HIGH (Every route must have unique, server-rendered meta tags)** Every page in your application needs a unique `` and `<meta name="description">` that accurately describes its content. In single-page applications, meta tags must be updated on every route change and rendered on the server so that search engine crawlers and social media scrapers see the correct values in the initial HTML response. ## Incorrect ```html  <!DOCTYPE html> <html> <head> <title>My App

``` ```tsx // ❌ Bad: client-only meta updates with useEffect import { useEffect } from "react"; export default function ProductPage({ product }) { useEffect(() => { document.title = product.name; document .querySelector('meta[name="description"]') ?.setAttribute("content", product.description); }, [product]); return

{product.name}

; } ``` **Problems:** - A single `` and `<meta>` description for the entire app means all pages show "My App" in search results - Client-side `document.title` updates happen after JavaScript executes; crawlers that read the initial HTML see the default values - Social media scrapers (Facebook, Twitter, LinkedIn) never execute JavaScript, so shared links always show "Welcome to my app" - No `og:title` or `og:description` means social previews are generic or empty ## Correct ```tsx // ✅ React SPA: Inertia.js Head component for per-route meta tags import { Head } from '@inertiajs/react'; interface Product { name: string; category: string; slug: string; shortDescription: string; description: string; ogImageUrl: string; imageAlt: string; } export default function ProductPage({ product }: { product: Product }) { return ( <> <Head> <title>{`${product.name} - ${product.category} | SportShop`}

{product.name}

{product.description}

); } // No provider wrapper needed — Inertia.js handles Head management automatically ``` ```blade {{-- ✅ Laravel Blade: dynamic meta tags via layout sections --}} {{-- layouts/app.blade.php --}} @yield('title', config('app.name')) {{-- products/show.blade.php --}} @extends('layouts.app') @section('title', $product->name . ' - ' . $product->category . ' | SportShop') @section('meta_description', $product->short_description) @section('canonical', route('products.show', $product->slug)) @section('og_title', $product->name) @section('og_image', $product->og_image_url) ``` **Benefits:** - Every route has a unique `` and `<meta>` description, giving search engines accurate information for each page - Laravel Blade `@section` directives provide server-rendered meta tags visible in the initial HTML - Inertia.js Head component updates meta tags on every client-side route change in React SPAs - Canonical URLs prevent duplicate content issues across pagination, filters, and query parameters - Open Graph and Twitter Card tags ensure rich previews when pages are shared on social platforms Reference: [Google - Control your title links](https://developers.google.com/search/docs/appearance/title-link) --- ## SPA Routing and Crawlability **Impact: HIGH (Search engines need real links and unique URLs to crawl)** Search engines discover pages by following links. If your application uses click handlers instead of real anchor tags, crawlers cannot discover or index your pages. With Laravel + Inertia.js, routing is handled server-side by Laravel, but the frontend must still use proper `<Link>` components to render crawlable `<a>` elements. ## Incorrect ```tsx // ❌ Bad: onClick-only navigation with no real links import { router } from '@inertiajs/react'; export default function Navigation() { return ( <nav> <button onClick={() => router.visit('/products')}>Products</button> <span onClick={() => router.visit('/about')} style={{ cursor: "pointer" }}> About Us </span> <div onClick={() => window.location.hash = "#contact"}>Contact</div> </nav> ); } ``` ```tsx // ❌ Bad: product card with no crawlable link import { router } from '@inertiajs/react'; function ProductCard({ product }: { product: { slug: string; name: string } }) { return ( <div className="product-card" onClick={() => router.visit(`/products/${product.slug}`)} > <h3>{product.name}</h3> {/* No <a> tag — search engines cannot follow this link */} </div> ); } ``` **Problems:** - `<button>` and `<span>` with `onClick` or `router.visit()` are not crawlable; search engines cannot follow them - No `<a href>` means users cannot right-click to open in a new tab, copy the link, or share the URL - `router.visit()` works for navigation but does not render a crawlable HTML element ## Correct ```tsx // ✅ Good: Inertia <Link> renders real <a> tags import { Link } from '@inertiajs/react'; export default function Navigation() { return ( <nav> <Link href="/products">Products</Link> <Link href="/about">About Us</Link> <Link href="/contact">Contact</Link> </nav> ); } ``` ```tsx // ✅ Good: product card with crawlable Inertia Link import { Link } from '@inertiajs/react'; function ProductCard({ product }: { product: { slug: string; name: string; summary: string } }) { return ( <article className="product-card"> <h3> <Link href={`/products/${product.slug}`}>{product.name}</Link> </h3> <p>{product.summary}</p> </article> ); } ``` ```php // ✅ Laravel: proper route definitions with named routes // routes/web.php Route::get('/', [HomeController::class, 'index'])->name('home'); Route::get('/products', [ProductController::class, 'index'])->name('products.index'); Route::get('/products/{product:slug}', [ProductController::class, 'show'])->name('products.show'); Route::get('/about', [AboutController::class, 'index'])->name('about'); // 404 handling is automatic — Laravel returns a 404 response for undefined routes // Customize with resources/views/errors/404.blade.php ``` **Benefits:** - Inertia's `<Link>` renders real `<a href>` elements that crawlers can follow to discover all pages - Laravel handles routing server-side, so every page has a unique, indexable URL by default - Inertia's first page load is server-rendered HTML, making content immediately visible to crawlers - Users can right-click, open in new tab, copy link, and share URLs naturally - Laravel's built-in 404 handling returns proper status codes for undefined routes Reference: [Google - Links crawlable](https://developers.google.com/search/docs/crawling-indexing/links-crawlable) --- ## Viewport and Responsive Configuration **Impact: MEDIUM (Required for mobile-first indexing)** Google uses mobile-first indexing, meaning it primarily uses the mobile version of your page for ranking and indexing. A properly configured viewport meta tag is the foundation of responsive design and is required for your page to render correctly on mobile devices and pass Google's mobile-friendliness checks. ## Incorrect ```html  <head> <title>My Website ``` ```html ``` ```html

``` **Problems:** - Without a viewport tag, mobile browsers render at a default width of ~980px and zoom out, making text unreadable - `user-scalable=no` and `maximum-scale=1.0` prevent users from zooming, which is an accessibility violation (WCAG 1.4.4) - A fixed pixel width like `width=1024` forces horizontal scrolling on any device narrower than 1024px - Google's mobile-friendliness test will flag all of these as failures ## Correct ```html ``` ```css /* ✅ Good: responsive layout using relative units and media queries */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } /* Use relative units for typography */ body { font-size: 1rem; /* 16px base */ line-height: 1.5; } h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); } /* Prevent images from overflowing */ img { max-width: 100%; height: auto; } ``` **Benefits:** - `width=device-width` tells the browser to match the page width to the screen width, eliminating horizontal scrolling - No `maximum-scale` or `user-scalable` restriction ensures users can zoom for accessibility - Relative units (`rem`, `%`, `vw`) and CSS Grid/Flexbox adapt layout to any screen size - `clamp()` for typography scales text smoothly between breakpoints without media queries - `max-width: 100%` on images prevents overflow on narrow screens Reference: [Responsive web design basics](https://web.dev/articles/responsive-web-design-basics) --- ## Content Parity Between Mobile and Desktop **Impact: MEDIUM (Google indexes mobile version -- hidden content won't rank)** With mobile-first indexing, Google primarily crawls and indexes the mobile version of your page. If content, structured data, or images are present on desktop but hidden on mobile, Google may never see them. Both versions must contain the same meaningful content, even if the layout differs. ## Incorrect ```html

Premium Running Shoes

Lightweight and responsive design.

Technical Specifications

Weight	245g
Drop	8mm
Cushioning	React foam

``` ```css /* ❌ Bad: removing content from mobile view */ @media (max-width: 768px) { .desktop-only { display: none; } /* Different heading text per viewport */ .hero h1 .full-title { display: none; } .hero h1 .short-title { display: block; } } @media (min-width: 769px) { .hero h1 .full-title { display: block; } .hero h1 .short-title { display: none; } } ``` **Problems:** - `display: none` on mobile removes the technical specifications from the indexed version of the page - Different heading text per viewport means Google indexes the shorter mobile heading, not the more descriptive desktop version - Structured data referencing desktop-only content creates a mismatch that Google may penalize - Hidden images on mobile are not indexed, losing image search traffic ## Correct ```html

Premium Running Shoes

Lightweight and responsive design.

Technical Specifications

Weight	245g
Drop	8mm
Cushioning	React foam

``` ```css /* ✅ Good: CSS changes layout and presentation, never removes content */ .product-details { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .product-details { grid-template-columns: 1fr 1fr; } } /* Reorder sections visually without hiding them */ .specs { order: 2; } @media (min-width: 768px) { .specs { order: 1; } } /* Use a scrollable container instead of hiding wide tables */ .specs table { width: 100%; } @media (max-width: 768px) { .specs { overflow-x: auto; -webkit-overflow-scrolling: touch; } } ``` ```tsx // ✅ Good: same content rendered for all viewports, styled responsively export default function ProductSpecs({ specs }: { specs: { label: string; value: string }[] }) { return (

Technical Specifications

{specs.map((spec) => ( ))}

{spec.label}

{spec.value}

); } ``` **Benefits:** - All content is present in the DOM for both mobile and desktop, ensuring Google indexes everything - CSS Grid and `order` allow visual rearrangement without removing elements from the document flow - Horizontal scrolling for wide tables preserves all data on small screens without hiding it - Consistent headings across viewports mean Google always indexes the same, descriptive title - Structured data matches the visible content on both versions, avoiding indexing penalties Reference: [Mobile-first indexing best practices](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing) --- ## Mobile UX Requirements for SEO **Impact: MEDIUM (Google penalizes poor mobile UX)** Google evaluates mobile user experience as part of its page experience signals. Pages with tiny tap targets, text requiring pinch-to-zoom, or intrusive interstitials may be demoted in mobile search results. Meeting these UX thresholds improves both rankings and real user engagement. ## Incorrect ```html ``` ```css /* ❌ Bad: tiny, crowded tap targets and small text */ .nav-link { padding: 4px 6px; margin: 0; font-size: 11px; } .fullscreen-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; } .close-btn { font-size: 12px; padding: 2px; cursor: pointer; } ``` **Problems:** - Nav links with 4px padding create tap targets far below the 48x48px minimum, causing accidental taps on adjacent links - 11px font size forces users to pinch-to-zoom to read content, which Google flags as a mobile usability issue - Full-screen popup on page load is classified as an intrusive interstitial and triggers a ranking penalty - The close button at 12px with 2px padding is nearly impossible to tap on mobile ## Correct ```html ``` ```css /* ✅ Good: accessible tap targets, readable fonts, non-intrusive overlay */ .nav-link { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; padding: 12px 16px; margin: 4px; font-size: 1rem; /* 16px base */ line-height: 1.5; text-decoration: none; } body { font-size: 1rem; /* 16px minimum for body text */ line-height: 1.5; } /* Small text still needs to be readable */ .caption, .footnote { font-size: 0.875rem; /* 14px minimum for secondary text */ } /* Non-intrusive bottom banner */ .bottom-banner { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px; background: #f8f9fa; border-top: 1px solid #dee2e6; display: flex; align-items: center; justify-content: space-between; z-index: 100; } .close-btn { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; } ``` ```javascript // ✅ Good: show newsletter banner after user engagement, not on page load document.addEventListener("DOMContentLoaded", () => { const banner = document.getElementById("newsletter-banner"); const closeBtn = banner.querySelector(".close-btn"); // Show after the user has scrolled 50% of the page const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { banner.hidden = false; observer.disconnect(); } }, { threshold: 0.5 } ); const midPageMarker = document.querySelector(".page-midpoint"); if (midPageMarker) observer.observe(midPageMarker); closeBtn.addEventListener("click", () => { banner.hidden = true; localStorage.setItem("newsletter-dismissed", "true"); }); }); ``` **Benefits:** - 48x48px minimum tap targets with 4px spacing between them prevent accidental taps and pass Google's mobile usability audit - 16px base font size ensures text is readable without zooming on all mobile devices - A small bottom banner shown after user engagement is not classified as an intrusive interstitial by Google - `aria-label` on the close button ensures screen readers can identify its purpose - Dismissal state is persisted so returning users are not shown the banner again Reference: [Mobile usability report](https://support.google.com/webmasters/answer/9063469) ---

Latest News

Latest News

{article.title}

{product.name}

{product.name}

{category}

Welcome to Our Store

Latest Products

Running Shoes

Customer Reviews

About Us

Free shipping on orders over $50

` tags dilute the primary topic signal for crawlers - Skipping from `

` to `

` breaks the logical outline and confuses assistive technology - Using heading tags for visual styling instead of structure misleads search engines about content importance ## Correct ```html

Running Shoes for Every Terrain

Latest Products

Trail Running Shoes

Road Running Shoes

Customer Reviews

Top-Rated This Month

Understanding Semantic HTML

Why It Matters

Key Elements

Technical Specifications

Technical Specifications