הגדרת Prerender.io ל-SEO ב-SPA: nginx, Express

השקתם SPA על Vue 3 — הדפים רצים, חוויית המשתמש מצוינת. אבל Googlebot רואה <div id="app"> ריק, האינדוקס הוא אפס. התנועה מהחיפוש לא גדלה. בניסיון שלנו, לקוח עם חנות מקוונת על Vue 3 לאחר הגדרת Prerender.io השיג עלייה של 40% באינדוקס תוך חודש, ו-LCP ירד מ-4.2 ל-1.1 שניות. אנחנו מסבירים כיצד להגדיר את השירות נכון וללא הפתעות.

Prerender.io הוא SaaS שכאשר מגיעה בקשה מבוט, מרנדר את הדף ב-headless Chrome ומחזיר HTML מוכן. עבור משתמשים רגילים, שום דבר לא משתנה. השתמשנו בו ביותר מ-50 פרויקטים — מאתרי תאגידים ועד מרקטים. חיסכון בזמן שרת בהשוואה ל-SSR מלא — עד 70%, ועומס השרת יורד פי 3–5.

בעיות שאנחנו פותרים

SPA כברירת מחדל לא מספקות תוכן כאשר JavaScript מושבת — בוטים של חיפוש רואים index.html ריק. כתוצאה מכך:

• דפים לא נכנסים לתוצאות החיפוש (או מקבלים אינדוקס עם שגיאות).
• סניפטים ריקים, Title הוא "React App".
• קישורים פנימיים לא מקבלים אינדוקס.

לדוגמה, לקוח עם קטלוג של 10,000 מוצרים: ללא prerender, בוטים קיבלו אינדוקס רק ל-12 מתוך 10,000 דפים. לאחר ההגדרה — 8,500 דפים בשבוע.

טעויות נפוצות:

• nginx לא מבדיל בין בוטים לבני אדם.
• Middleware מסנן User-Agent בצורה לא נכונה.
• המטמון לא נמחק לאחר דיפלוי.

ב-90% מהמקרים, הבעיה היא בדיוק בסינון User-Agent. אנחנו מגדירים את Prerender.io תוך התחשבות בניואנסים אלה — כך שבוטים מקבלים HTML מלא ומשתמשים מקבלים SPA מהיר.

למה Prerender.io במקום SSR מלא?

SSR (Nuxt 3, Next.js) מרנדר כל דף על השרת — זה עומס ומורכבות. Prerender.io עושה זאת רק עבור בוטים: הוא משקיע משאבים רק ברינדור למנועי חיפוש. חיסכון בזמן שרת — עד 70% בהשוואה ל-SSR. בנוסף, אין צורך לשכתב את הפרונטאנד — זה עובד עם כל פריימוורק SPA. בפועל, Prerender.io מפחית את עומס השרת פי 3–5 עבור פרויקטים עם תנועה גבוהה, במיוחד אם רוב הדפים הם סטטיים.

איך זה עובד (סכמטי)

1. בוט מבקש /products/42.
2. nginx / middleware מזהה User-Agent ומנתב לפרוקסי ל-prerender.io.
3. Prerender.io מרנדר את הדף ב-headless Chrome.
4. מחזיר HTML מוכן לבוט.

משתמשים מקבלים את ה-SPA הרגיל — ללא שינויים.

הגדרת Prerender.io עבור SPA

הגדרת nginx

map $http_user_agent $prerender_ua {
    ~*(Googlebot|AdsBot-Google|Googlebot-Image|Bingbot|Slurp| DuckDuckBot|Baiduspider|YandexBot|LinkedInBot| facebookexternalhit|Twitterbot|WhatsApp|TelegramBot) "1";
    default "0";
}

server {
    listen 443 ssl;
    server_name company.com;

    location / {
        if ($prerender_ua = "1") {
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass https://service.prerender.io;
            proxy_set_header X-Prerender-Token "YOUR_API_TOKEN";
            proxy_set_header X-Prerender-Host $host;
            proxy_connect_timeout 5s;
            proxy_read_timeout 60s;
        }
        try_files $uri /index.html;
    }
}

Middleware עבור Node.js (Express)

const prerender = require('prerender-node')
prerender.set('prerenderToken', process.env.PRERENDER_TOKEN)
prerender.set('prerenderServiceUrl', 'https://service.prerender.io/')
// Опциональные настройки
prerender.crawlerUserAgents.push('TelegramBot', 'WhatsApp')
prerender.set('blacklistPaths', ['/admin', '/dashboard', '/api'])
app.use(prerender)

הספרייה prerender-node זמינה ב-GitHub.

איך להגדיר ריקצ'ינג אוטומטי בדיפלוי?

Prerender.io שומר דפים במטמון אוטומטית. אבל לאחר דיפלוי, יש לנקות את המטמון עבור כתובות URL ששונו. אנחנו מבצעים אוטומציה של זה דרך API:

# Очистить конкретный URL
curl -X POST https://api.prerender.io/recache \
  -H "Content-Type: application/json" \
  -d '{"prerenderToken": "YOUR_TOKEN", "url": "https://company.com/product/42"}'

# Рекэшировать при деплое (список измененных URL)
CHANGED_URLS=$(git diff HEAD~1 --name-only | grep "pages/" | ...)
for url in $CHANGED_URLS; do
  curl -X POST https://api.prerender.io/recache \
    -d "{\"prerenderToken\": \"$TOKEN\", \"url\": \"https://company.com/$url\"}"
done

אם יש הרבה דפים, אנחנו משתמשים בפריקינג דרך sitemap:

import requests
import xml.etree.ElementTree as ET

def precache_sitemap(sitemap_url, prerender_token):
    response = requests.get(sitemap_url)
    root = ET.fromstring(response.content)
    ns = {'sm': 'http://www.sitemaps.org/schemas/sitemap/0.9'}
    urls = [loc.text for loc in root.findall('.//sm:loc', ns)]
    print(f"Precaching {len(urls)} URLs...")
    for url in urls:
        requests.post('https://api.prerender.io/recache', json={'prerenderToken': prerender_token, 'url': url})

precache_sitemap('https://company.com/sitemap.xml', os.environ['PRERENDER_TOKEN'])

Prerender.io שומר מטמון על השרתים שלו. ברירת המחדל של TTL במטמון היא 30 דקות; ניתן להגדיר אותה דרך כותרות map $http_user_agent $prerender_ua { ~*(Googlebot|AdsBot-Google|Googlebot-Image|Bingbot|Slurp| DuckDuckBot|Baiduspider|YandexBot|LinkedInBot| facebookexternalhit|Twitterbot|WhatsApp|TelegramBot) "1"; default "0"; } server { listen 443 ssl; server_name company.com; location / { if ($prerender_ua = "1") { rewrite .* /$scheme://$host$request_uri? break; proxy_pass https://service.prerender.io; proxy_set_header X-Prerender-Token "YOUR_API_TOKEN"; proxy_set_header X-Prerender-Host $host; proxy_connect_timeout 5s; proxy_read_timeout 60s; } try_files $uri /index.html; } } . אנחנו ממליצים להגדיר const prerender = require('prerender-node') prerender.set('prerenderToken', process.env.PRERENDER_TOKEN) prerender.set('prerenderServiceUrl', 'https://service.prerender.io/') // Опциональные настройки prerender.crawlerUserAgents.push('TelegramBot', 'WhatsApp') prerender.set('blacklistPaths', ['/admin', '/dashboard', '/api']) app.use(prerender) עבור דפים סטטיים ו-# Очистить конкретный URL curl -X POST https://api.prerender.io/recache \ -H "Content-Type: application/json" \ -d '{"prerenderToken": "YOUR_TOKEN", "url": "https://company.com/product/42"}' # Рекэшировать при деплое (список измененных URL) CHANGED_URLS=$(git diff HEAD~1 --name-only | grep "pages/" | ...) for url in $CHANGED_URLS; do curl -X POST https://api.prerender.io/recache \ -d "{\"prerenderToken\": \"$TOKEN\", \"url\": \"https://company.com/$url\"}" done עבור דינמיים. ריקצ'ינג אוטומטי בדיפלוי מבטיח שבוטים רואים את הגרסה העדכנית.

איך לוודא ש-Prerender עובד?

# Запрос как Googlebot
curl -A "Googlebot/2.1 (+http://www.google.com/bot.html)" \
  https://company.com/products/iphone-15 | \
  grep -o '<title>[^<]*</title>'
# Должен вернуть реальный title, не "React App" или пустую строку

Chrome DevTools → Network → Disable JS → רעננו את הדף — אם התוכן נראה ללא JS, הרינדור המוקדם עובד נכון עבור בוטים.

אילו יתרונות Prerender.io מציע עבור SPA?

אינטגרציה מהירה — ההגדרה אורכת מ-0.5 ימים. אין צורך בשכתוב קוד. חיסכון במשאבי שרת עד 70%. זמן רינדור ראשון ממוצע לדף קר — 1.5 שניות, חם — 100 אלפיות השנייה. Prerender.io תומך בכל הפריימוורקים הפופולריים: Vue, React, Angular.

מה כלול בהגדרה סוהר

לוח זמנים ועלות

הגדרה בסיסית (nginx + פריקינג) — מ-0.5 עד יום עבודה אחד. אינטגרציה מורכבת (מספר middleware, ריקצ'ינג מותאם אישית) — עד יומיים. העלות קבועה ומחושבת באופן אישי. אנחנו מבטיחים שאחרי ההגדרה, Googlebot יתחיל לראות תוכן. לצוות שלנו יש ניסיון של 10+ שנים וביצענו 50+ פרויקטים של אופטימיזציית SEO ל-SPA.

הזמינו הגדרת Prerender.io — קבלו ייעוץ מהנדס. צרו קשר כדי לדון בפרויקט שלכם. קבלו ייעוץ מהנדס — נעזור לכם לבחור את הפתרון האופטימלי.