使用Node.js、Express和MySQL構建REST API
你可能也喜歡這些API文章!
在這個示例中，Next.js 在運行時獲取數據并在服務器上預渲染頁面，使搜索引擎更容易抓取內容。SSR 確保將完整的 HTML 發送給客戶端，從而顯著改善 SEO——尤其是對于內容繁重的網站。
JavaScript 框架有時會生成同一頁面的多個版本，這可能會讓搜索引擎感到困惑。當 URL 因參數、過濾器或用戶導航狀態而異時，這種情況尤其常見。重復的頁面會導致排名信號稀釋，其中一個頁面的多個版本在搜索結果中相互競爭。
為了避免這種情況，請使用 rel=”canonical” 標簽來指示頁面的首選版本。這有助于合并所有信號，并告訴搜索引擎在搜索結果中優先考慮哪個版本。
示例：
<head>
<link rel="canonical" />
</head>添加此標簽有助于將重復的 URL 合并到一個權威頁面中，確保你不會因為錯誤的重復信號而分散頁面之間的排名信號。如果不這樣做，你建立的任何高權威反向鏈接都將因錯誤的重復信號而徒勞無功。因此，你必須始終查看你的 JavaScript 驅動的 URL，以識別任何潛在的重復項并相應地設置規范標簽。
React Router 等客戶端路由框架便于創建動態單頁應用程序(SPA)。但是，不正確的實現會導致抓取問題。如果未使用正確的鏈接或內容加載不正確，搜索引擎可能會難以處理客戶端路由。
在處理客戶端路由時，確保可以通過內部鏈接訪問內容，并且 history.pushState() 是用于更新 URL 而無需重新加載整個頁面確保使用適當的鏈接元素有助于搜索引擎正確理解和索引內容。
使用 React 路由的解決方案：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/about">About Us</Link>
<Link to="/contact">Contact</Link>
</nav>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
);
}確保內部鏈接始終是 Link 組件而不是通過 JavaScript 操作的動態生成的標簽。這可確保搜索引擎可以抓取和索引您的內容，而不會出現問題。
延遲加載是一種出色的技術，可以通過推遲加載非必要內容，直到需要時才加載，從而提高頁面加載速度和整體性能。但是，如果延遲加載未正確實施，則會對 SEO 產生負面影響。如果加載得太晚或搜索引擎無法觸發加載它的必需 JavaScript，則搜索引擎可能無法索引重要內容。
為了確保索引關鍵內容，您應始終優先考慮視口上方內容，并考慮為延遲加載的元素提供后備。使用 Intersection Observer API 有助于高效加載圖像，同時不影響 SEO。
使用 Intersection Observer 的示例：
// Lazy loading images
const images = document.querySelectorAll('img[data-src]');
const imgObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach(img => {
imgObserver.observe(img);
});確保關鍵圖像（如視口上方圖像）立即加載，并測試實施以確認所有基本內容對搜索引擎可見。
預渲染是一種有效的解決方案，可確保搜索引擎可以訪問 JavaScript 密集型頁面。當內容隱藏在復雜的 JavaScript 交互或登錄屏幕后面時，預渲染服務可以提供一個靜態 HTML 快照，搜索引擎可以輕松地對其進行索引。
使用 Prerender.io 或 Rendertron 等服務可以幫助使您的 JavaScript 內容更適合搜索引擎。這些服務充當中間件，為抓取器生成靜態 HTML 頁面，同時仍為用戶提供動態體驗。
使用 Express 設置：
const express = require('express');
const prerender = require('prerender-node');
const app = express();
app.use(prerender.set('prerenderToken', 'YOUR_TOKEN_HERE'));
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3000);此設置會為搜索引擎預渲染您的 JavaScript 頁面，確保它們可以在不執行 JavaScript 的情況下索引內容。對于通過正常抓取無法輕松訪問其基本內容的頁面，應考慮預渲染。
標題和描述等元標記在 SEO 和社交分享中扮演著重要角色。它們幫助搜索引擎理解頁面內容，并且當頁面出現在搜索結果中時，它們可以影響點擊率。對于 JavaScript 驅動的網站，必須動態呈現這些標記以反映內容。
在使用人工智能進行潛在客戶生成或實施任何其他類型的自動化時，這一點尤其重要。
使用 react-helmet 等工具使開發人員能夠根據內容動態更新元標記。這可確保搜索引擎和社交媒體平臺接收準確且經過優化的元數據，從而獲得更好的排名和提高分享率。
使用 React Helmet 的動態元標記：
import { Helmet } from 'react-helmet';
function BlogPost({ title, description }) {
return (
<div>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
</Helmet>
<h1>{title}</h1>
<p>{description}</p>
</div>
);
}使用 react-helmet 允許您動態設置元數據，這有助于搜索引擎和社交平臺理解您的頁面內容。為了最大化 SEO 收益，請確保所有頁面都有適當且唯一的標題和描述。
在 robots.txt 中阻止 JavaScript 文件阻止搜索引擎抓取器訪問這些腳本，這會嚴重損害您網站的可見性。搜索引擎需要訪問您的 JavaScript，以了解您的網頁如何構建以及內容如何呈現。
不要阻止 JavaScript 資源，而應使用配置良好的 robots.txt 文件，確保限制敏感區域，同時讓抓取器可以訪問基本資源。
安全的 robots.txt 配置示例：
User-agent: *
Disallow: /private/
Allow: /js/通過允許訪問 JavaScript 目錄，您可以確保搜索引擎可以正確呈現您的網頁。定期審核您的 robots.txt，以驗證重要的資源不會被無意中阻止。
面包屑導航通過提供清晰的鏈接路徑來改善用戶和搜索引擎的導航。Google 在搜索結果中顯示面包屑導航，這可以通過為用戶提供更多上下文來提高點擊率。
實施結構化數據（例如 JSON-LD）有助于搜索引擎解釋您的面包屑導航并提高其在 SERP 中的可見性。
JSON-LD 示例：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://www.example.com/blog"
}
]
}
</script>添加 JSON-LD 等結構化數據有助于 Google 了解您網站的內容層次結構（以及 AI API），使其更易于索引并增強整體用戶體驗。面包屑導航還可以通過讓用戶輕松瀏覽您的網站來降低跳出率。
抓取預算是指搜索引擎在給定時間范圍內將在您的網站上抓取的頁面數。繁重的 JavaScript 和不必要的腳本會消耗您的抓取預算，導致抓取和索引的頁面減少。
要提高抓取效率，請最小化 JavaScript 的復雜性，并在頁面加載期間避免不必要的外部 API 調用。保持 JavaScript 占用空間較小，以確保頁面加載更快，以便搜索引擎可以抓取更多內容。
提示：
示例：在頁面加載期間刪除不必要的 API 調用
function loadData() {
if (!sessionStorage.getItem('dataLoaded')) {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Process data
console.log(data);
sessionStorage.setItem('dataLoaded', true);
})
.catch(error => console.error('Error fetching data:', error));
}
}
document.addEventListener('DOMContentLoaded', loadData);在此示例中，通過使用 sessionStorage 在頁面重新加載之間存儲數據，將不必要的 API 調用最小化。這種方法減少了在初始頁面加載期間進行的 API 調用次數，從而優化了抓取預算并提高了頁面加載速度。
SPA 可能會導致帶有查詢字符串或片段 (#) 的 URL，這可能不太利于 SEO。使用 window.history.replaceState()允許您維護清晰、有意義的 URL，而無需觸發全頁面重新加載。
清晰的 URL 更容易讓用戶記住和分享，它們還有助于搜索引擎更好地理解頁面內容。使用 replaceState() 確保 URL 反映內容，使搜索引擎更容易正確抓取和索引。
示例：
// Clean up URL after loading dynamic content
window.history.replaceState(null, 'New Page Title', '/new-url-path');此函數在不重新加載頁面的情況下更新地址欄中的 URL，使您的 URL 更易于用戶使用，并確保它們與顯示的內容保持一致。
JS 的力量應該以不妨礙搜索引擎訪問和索引您的內容的方式加以利用。通過我們概述的這些 JS SEO 技巧，您將增強內容的可發現性，確保您的應用程序對爬蟲友好，并最終提高搜索引擎排名。
無論您是在優化客戶端渲染、管理抓取預算還是確保元標記設置正確，這些技巧中的每一個都是 JavaScript SEO 拼圖的關鍵部分。關鍵是要確保搜索引擎和用戶都可以輕松訪問您網站的寶貴內容。沒有必要忽視其中一個或另一個，對吧？
文章轉自微信公眾號@云云眾生s
