Advanced Technical SEO

<!-- Initially loads empty -->
<div id="root"></div>
<script>
  // Content only appears after JS runs
  document.getElementById('root').innerHTML = 'Content'
</script>

// Wrong - Google sees default tags
<title>Home</title>

// Better - tags set in JavaScript
useEffect(() => {
  document.title = 'Dynamic Title'
})

// Wrong - not crawlable
<div onClick={() => navigate('/page')}>Link</div>

// Better - crawlable
<a href="/page">Link</a>

// Next.js example (automatic)
export default function Page({ data }) {
  return <div>{data.title}</div>
}

// Page fully rendered on server
// User receives complete HTML

// Built at build time (not request time)
export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 3600, // ISR - revalidate hourly
  }
}

Normal request from user: Sends fully rendered HTML
Crawler request: Sends pre-rendered HTML

// Check if content appears
document.body.innerText
// Should contain full content, not just skeleton

// Check TTFB
// Chrome DevTools → Network → Time
// Queueing time: Time waiting for server response

// Solutions:
// - Use CDN (Vercel does this)
// - Upgrade hosting
// - Optimize database queries
// - Server-side caching

<!-- Slow: Large unoptimized image -->
<img src="large-image.jpg" width="800" height="600">

<!-- Optimized: Multiple formats, lazy loading -->
<img 
  src="image.jpg" 
  srcset="image-small.webp 500w, 
          image-large.webp 1000w"
  sizes="(max-width: 600px) 500px, 1000px"
  loading="lazy"
  width="800"
  height="600"
  alt="Description"
/>

import Image from 'next/image'

export default function MyImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Description"
      width={800}
      height={600}
      priority={true} // For LCP image
    />
  )
}

<!-- Blocking: Stops page rendering -->
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">

<!-- Non-blocking: Async loading -->
<script src="script.js" async></script>
<link rel="stylesheet" href="styles.css">

<!-- Or defer -->
<script src="script.js" defer></script>

/* Without optimization: Flash of Invisible Text (FOIT) */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2');
  font-display: auto; /* Waits up to 3 seconds */
}

/* With optimization: Shows fallback immediately */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2');
  font-display: swap; /* Shows system font, swaps when ready */
}

// Browser caching
Cache-Control: public, max-age=31536000

// For Vercel (vercel.json)
{
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

// Bad: Long blocking task
function doWork() {
  // 500ms of work
  for(let i = 0; i < 1000000; i++) {
    compute();
  }
}

// Good: Break into chunks
function doWork() {
  if (remaining > 0) {
    let end = performance.now() + 50;
    while (performance.now() < end && remaining > 0) {
      compute();
      remaining--;
    }
    setTimeout(doWork, 0);
  }
}

// Execute when browser is idle
if ('requestIdleCallback' in window) {
  requestIdleCallback(doWork);
} else {
  setTimeout(doWork, 1);
}

import dynamic from 'next/dynamic'

// Load component only when needed
const HeavyComponent = dynamic(
  () => import('./HeavyComponent'),
  { loading: () => <div>Loading...</div> }
)

export default function Page() {
  return <HeavyComponent />
}

// Move heavy computation off main thread
const worker = new Worker('worker.js')
worker.postMessage({ data: largeDataset })
worker.onmessage = (e) => {
  console.log('Computation done:', e.data)
}

// worker.js
self.onmessage = (e) => {
  const result = expensiveComputation(e.data)
  self.postMessage(result)
}

<!-- Bad: No space reserved -->
<div id="ad-container"></div>

<!-- Good: Space reserved -->
<div id="ad-container" style="min-height: 250px;">
  <!-- Ad loads here -->
</div>

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2');
  font-display: swap; /* Prevents layout shift from font swapping */
}

<!-- Bad: Dimensions unknown until image loads -->
<img src="image.jpg">

<!-- Good: Browser allocates space -->
<img src="image.jpg" width="800" height="600">

<!-- Next.js: Automatic -->
<Image src="/image.jpg" width={800} height={600} />

// Bad: Inserting content above existing content
document.body.insertBefore(newElement, document.body.firstChild)

// Good: Append to end or use absolute positioning
document.body.appendChild(newElement)

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Premium React Course",
  "description": "Complete React course for developers",
  "image": ["image.jpg"],
  "brand": {
    "@type": "Brand",
    "name": "Harsh Dev"
  },
  "offers": {
    "@type": "Offer",
    "price": "99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "url": "https://harsh-softwaredev.vercel.app/course"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "150"
  }
}

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is React?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "React is a JavaScript library for..."
      }
    },
    {
      "@type": "Question",
      "name": "How do React Hooks work?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Hooks are functions that let you..."
      }
    }
  ]
}

{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "React Workshop",
  "description": "Learn React fundamentals",
  "startDate": "2024-02-15T09:00:00",
  "endDate": "2024-02-15T17:00:00",
  "eventAttendanceMode": "OnlineEventAttendanceMode",
  "eventStatus": "ScheduledEvent",
  "organizer": {
    "@type": "Organization",
    "name": "Harsh Dev",
    "url": "https://harsh-softwaredev.vercel.app"
  },
  "offers": {
    "@type": "Offer",
    "price": "49",
    "priceCurrency": "USD",
    "availability": "https://schema.org/PreOrder"
  }
}

// app/layout.tsx
export const metadata = {
  title: 'Harsh Dev - Web Developer',
  description: 'Full-stack developer specializing in React',
  openGraph: {
    title: 'Harsh Dev',
    description: 'Web Developer',
    image: '/og-image.jpg',
  },
}

// App automatically generates sitemap, robots.txt
// Handles redirects, dynamic routes, image optimization