Loading...
← NOT EXECUTED YET
EXTRACTED IMMEDIATELY:
- Title: "Running Shoes | Example"
- Meta description
- Any visible text: "Loading..."
- Links for further crawling
- Nothing from JavaScript!
STEP 5: Rendering Queue (DELAYED)
- If page seems JS-dependent, added to rendering queue
- Could be minutes, hours, or days later
- Headless Chrome executes JavaScript
- Final DOM captured for indexing
```
### The Rendering Budget Problem
Google allocates finite resources to rendering:
```
GOOGLE'S RENDERING CONSTRAINTS:
Total pages to render: ~billions
Rendering capacity: ~millions per day (estimated)
Your site's share: depends on "crawl budget"
CRAWL BUDGET FACTORS:
1. Site authority (PageRank-like signals)
2. Update frequency (how often content changes)
3. Server response time (fast = more crawling)
4. Errors encountered (errors = less crawling)
IMPLICATIONS:
- Large sites: Not all pages get rendered
- Low-authority sites: Lower priority in queue
- Slow sites: Fewer resources allocated
- Error-prone sites: Crawl budget wasted
RECOMMENDATION:
Don't RELY on rendering - serve complete HTML
```
### Understanding Indexing vs Ranking
Many developers confuse these:
```
INDEXING: Is your page in Google's database?
- Google knows the page exists
- Has parsed its content
- Stored in the index
Check: site:example.com/your-page
If it appears: indexed
If it doesn't: not indexed (or blocked)
RANKING: Where does your page appear in results?
- Page is indexed, now competing with millions of others
- Algorithm determines position
- 200+ ranking factors
A page can be:
✓ Indexed but ranking poorly (page 10+)
✓ Indexed but not ranking for your target keywords
✗ Not indexed at all (biggest problem for SPAs)
```
### How Google Processes JavaScript SPAs
```javascript
// YOUR REACT SPA:
// Server returns:
Welcome to My App
Content that was invisible before
// NOW Google can index the real content
// But this delay means:
// - Time-sensitive content may be stale
// - Pages might rank for "Loading..." text
// - Some pages may never get rendered
```
### The Two-Wave Indexing Phenomenon
SPAs often show strange indexing behavior:
```
WAVE 1: HTML-only indexing
- Title and meta description captured
- Body appears empty or "Loading..."
- May rank for title keywords only
- Incomplete representation in SERPs
WAVE 2: Post-render indexing (if it happens)
- Full content now visible
- Rankings may change dramatically
- Could take days or weeks
OBSERVABLE SYMPTOMS:
- Search result shows "Loading..." as snippet
- Page ranks for title but not body content
- Search Console shows "Page is not indexed" then later "Indexed"
- Rankings fluctuate as rendering catches up
```
### Core Web Vitals: The Technical Details
Understanding how metrics are measured:
```javascript
// LARGEST CONTENTFUL PAINT (LCP)
// Measures: When largest visible content renders
// Elements considered: images, videos, block-level text
// Browser tracks LCP candidates:
// t=0ms: Navigation starts
// t=100ms: First text paints (small heading) - LCP candidate 1
// t=500ms: Hero image loads - LCP candidate 2 (larger, replaces)
// t=2500ms: No more updates - final LCP = 500ms ✓ GOOD
// LCP KILLERS:
// - Slow server response (TTFB)
// - Render-blocking JavaScript
// - Slow image loading
// - Client-side rendering (content waits for JS)
// INTERACTION TO NEXT PAINT (INP)
// Measures: Responsiveness to user input
// Captures: click, tap, keypress → visual update
// How it works:
// 1. User clicks button
// 2. Browser creates "click" event
// 3. Your JavaScript handler runs (event processing time)
// 4. React re-renders (presentation delay)
// 5. Browser paints the update
// 6. INP = time from click to paint complete
// INP KILLERS:
// - Long JavaScript tasks (>50ms)
// - Hydration blocking main thread
// - Heavy re-renders
// - Too many event listeners
// CUMULATIVE LAYOUT SHIFT (CLS)
// Measures: Visual stability (unexpected movement)
// Calculated: impact fraction × distance fraction
// Example of bad CLS:
// t=0ms: Heading renders at y=0
// t=500ms: Ad loads above heading, pushes it to y=250px
// Impact: 100% of viewport affected
// Distance: 250px / viewport height
// CLS KILLERS:
// - Images without dimensions
// - Ads/embeds without reserved space
// - Dynamically injected content
// - Web fonts causing text resize
```
### How Google Evaluates Page Quality
Beyond technical SEO, Google assesses quality:
```
E-E-A-T SIGNALS (Experience, Expertise, Authoritativeness, Trust):
EXPERIENCE:
- Does content show first-hand experience?
- Product reviews: Did you actually use it?
- Travel guides: Did you actually visit?
EXPERTISE:
- Is the author qualified to write this?
- For medical content: Is author a doctor?
- For legal content: Is author a lawyer?
AUTHORITATIVENESS:
- Is this site a known authority?
- Do other sites link to it?
- Is it cited in the industry?
TRUSTWORTHINESS:
- Secure connection (HTTPS)?
- Clear contact information?
- No deceptive practices?
HOW GOOGLE MEASURES:
- External links (authority)
- Author bios and credentials
- Site reputation
- User behavior signals
- Content accuracy (fact-checking)
```
### Canonical URLs: Preventing Duplicate Content
Duplicate content confuses Google:
```
SCENARIO: Same product at multiple URLs
/products/shoes
/products/shoes?color=red
/products/shoes?color=red&size=10
/products/shoes?utm_source=facebook
PROBLEM:
- Google sees 4 different "pages"
- Splits ranking signals across them
- May pick wrong one as "canonical"
SOLUTION: Canonical tags
{/* ... */}
;
}
```
### Building Structured Data Injection
```javascript
// STRUCTURED DATA (JSON-LD) SYSTEM
class StructuredDataManager {
constructor() {
this.schemas = new Map();
}
// Register schema for a route
setSchema(id, schema) {
this.schemas.set(id, schema);
}
// Build JSON-LD from data
buildProductSchema(product) {
return {
'@context': 'https://schema.org',
'@type': 'Product',
name: product.name,
description: product.description,
image: product.images,
sku: product.sku,
brand: {
'@type': 'Brand',
name: product.brand,
},
offers: {
'@type': 'Offer',
url: product.url,
priceCurrency: product.currency,
price: product.price,
availability: product.inStock
? 'https://schema.org/InStock'
: 'https://schema.org/OutOfStock',
},
aggregateRating: product.rating ? {
'@type': 'AggregateRating',
ratingValue: product.rating,
reviewCount: product.reviewCount,
} : undefined,
};
}
buildBreadcrumbSchema(breadcrumbs) {
return {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: breadcrumbs.map((crumb, i) => ({
'@type': 'ListItem',
position: i + 1,
item: {
'@id': crumb.url,
name: crumb.name,
},
})),
};
}
buildArticleSchema(article) {
return {
'@context': 'https://schema.org',
'@type': 'Article',
headline: article.title,
description: article.excerpt,
image: article.image,
author: {
'@type': 'Person',
name: article.author.name,
url: article.author.url,
},
publisher: {
'@type': 'Organization',
name: article.publisher.name,
logo: {
'@type': 'ImageObject',
url: article.publisher.logo,
},
},
datePublished: article.publishedAt,
dateModified: article.updatedAt,
};
}
// Render all schemas
toString() {
const schemas = Array.from(this.schemas.values());
if (schemas.length === 0) return '';
const combined = schemas.length === 1
? schemas[0]
: { '@context': 'https://schema.org', '@graph': schemas };
return ``;
}
}
```
### Sitemap Generation
```javascript
// SITEMAP GENERATOR
async function generateSitemap(config) {
const { baseUrl, routes, outputPath } = config;
const urls = [];
for (const route of routes) {
// Static routes
if (!route.isDynamic) {
urls.push({
loc: `${baseUrl}${route.path}`,
lastmod: route.lastModified || new Date().toISOString(),
changefreq: route.changefreq || 'weekly',
priority: route.priority || 0.7,
});
continue;
}
// Dynamic routes - get all paths
if (route.getStaticPaths) {
const paths = await route.getStaticPaths();
for (const path of paths) {
const fullPath = route.path.replace(
/\[(\w+)\]/g,
(_, param) => path.params[param]
);
urls.push({
loc: `${baseUrl}${fullPath}`,
lastmod: path.lastModified || new Date().toISOString(),
changefreq: path.changefreq || 'weekly',
priority: path.priority || 0.5,
});
}
}
}
// Generate XML
const xml = `
