JavaScript渲染SEO陷阱丨Vue/React站点的爬虫空白率超90%自救指南

<!-- 异步组件导致的解析断层 --> 
<div id="app"> 
 {{ ssrState }} <!-- 服务端注水数据 --> 
 <script>loadComponent('product-desc')</script> <!-- 阻塞解析 --> 
</div>

// 爬虫会跳过的危险操作
setTimeout(() => { 
 document.title = "动态标题"; // 因延迟超出200ms失效 
}, 250); 

// 客户端路由的噩梦
history.pushState({}, '', '/new-page'); // URL改变 
fetch('/api/content').then(render); // 内容更新 

# 使用curl查看爬虫解析的原始HTML 
curl --user-agent "Googlebot/2.1" https://your-site.com 

# 使用Lighthouse检测可索引内容 
lighthouse --emulated-user-agent=googlebot https://your-site.com --view 

# 启动无头浏览器获取爬虫视角 
chrome --headless --disable-gpu --dump-dom https://your-site.com 

// 服务端预置关键SEO标签 
document.querySelector('title').setTextContent('Fallback Title'); 
document.querySelector('meta[description]').setAttribute('content','预置描述'); 

<!-- 原始HTML --> 
<div id="root"></div> 

<!-- 渲染后DOM --> 
<div id="root"> 
+ <h1>产品名称</h1> <!-- 异步加载未捕获 --> 
- <div class="loading"></div> 
</div> 

graph TD 
A[流量规模] -->|>1万UV/日| B(Next.js/Nuxt.js) 
A -->|<1万UV/日| C(自定义Node中间件) 
D[内容时效性] -->|实时数据| E(流式SSR) 
D -->|静态为主| F(预渲染+CSR) 

// 页面级SSR控制 
export async function getServerSideProps(context) { 
 const res = await fetch(`https://api/product/${context.params.id}`); 
 return { 
 props: { 
 product: await res.json(), // 服务端获取数据 
 metaTitle: res.data.seoTitle // 同步注入SEO标签 
 } 
 }; 
} 

// 动态路由兼容 
export async function getStaticPaths() { 
 return { paths: [], fallback: 'blocking' }; // 确保新页面即时渲染 
} 

location / { 
 proxy_cache ssr_cache; 
 proxy_cache_key "$scheme$request_method$host$request_uri$isBot"; 
 proxy_cache_valid 200 10m; // 普通用户缓存10分钟 
 if ($http_user_agent ~* (Googlebot|bingbot)) { 
 proxy_cache_valid 200 0; // 爬虫请求实时穿透 
 } 
} 

// gatsby-node.js 
exports.createPages = async ({ actions }) => { 
 const products = await fetchAllProducts(); 
 products.forEach(product => { 
 actions.createPage({ 
 path: `/product/${product.slug}`, 
 component: require.resolve('./templates/product.js'), 
 context: { 
 productData: product, // 构建时注入数据 
 seoData: product.seo 
 }, 
 }); 
 }); 
}; 

// 增量构建配置 
exports.onCreateWebpackConfig = ({ actions }) => { 
 actions.setWebpackConfig({ 
 experiments: { incrementalBuild: true }, // 仅更新变化页面 
 }); 
}; 

<!-- 静态骨架 + 客户端水合 --> 
<div id="product-detail"> 
 <!-- SSG预渲染内容 --> 
 <script> 
 window.__HYDRATE_DATA__ = { product: {{productData}} }; 
 </script> 
 <!-- CSR交互增强 --> 
</div> 

location / { 
 if ($isBot = 1) { 
 proxy_pass http://rendertron/your-url; 
 break; 
 } 
 # 正常处理 
} 

# 爬虫识别规则 
map $http_user_agent $isBot { 
 default 0; 
 ~*(Googlebot|bingbot|Twitterbot|FacebookExternalHit) 1; 
} 

await page.evaluate(() => { 
 document.querySelectorAll('[data-lazy]').forEach(el => el.remove()); 
}); // 清除懒加载元素 

await page.setRequestInterception(true); 
page.on('request', req => { 
 if (req.resourceType() === 'image') req.abort(); 
 else req.continue(); 
}); 

chrome --disable-dev-shm-usage --single-process