Angular 7 Universal应用无法部署共享服务器，寻求SEO友好解决方案

Got it, let's break down your problem: you built an Angular 7 app with Universal for SEO, but your shared host doesn't support Node.js, so you can't run the SSR server. Here are the most practical solutions to keep your app SEO-friendly without needing Node.js on the server:

1. Use Angular's Built-in Prerendering #

Angular has native support for prerendering, which generates static HTML files for your routes at build time. This way, you just upload the static files to your shared server—no Node.js required.

How to set it up: #

• First, confirm you have Universal builders installed (since you already used Universal, you probably do, but double-check with npm install @nguniversal/builders @nguniversal/common --save-dev).
• Update your angular.json to add a prerender target under architect:

  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "browserTarget": "your-app:build:production",
      "serverTarget": "your-app:server:production",
      "routes": [
        "/",
        "/about",
        "/contact"
        // Add all your static routes here
      ]
    }
  }
  

• Run the prerender command: ng run your-app:prerender
• The output will be in dist/browser (or your configured output folder)—each route you listed will have its own index.html file. Upload this entire folder to your shared server like a regular static site.

Pros & Cons: #

• ✅ No Node.js needed on the server
• ✅ Simple to set up if you already have Universal configured
• ❌ Only works for static routes (if your content is dynamic and changes often, you'll need to rebuild and redeploy every time)
• ❌ Doesn't handle unlisted client-side generated routes (like lazy-loaded routes not added to the config)

2. Use Scully (Angular Static Site Generator) #

Scully is a dedicated SSG for Angular that's more powerful than native prerendering. It can crawl your app to discover routes automatically, fetch dynamic content from APIs at build time, and generate fully static HTML files.

How to set it up: #

• Install Scully compatible with Angular 7: npm install @scullyio/init@latest --save-dev (check Scully's docs for exact version compatibility if you hit issues)
• Run the initialization script: ng generate @scullyio/init:config
• Configure your scully.your-app.config.ts to handle dynamic routes (e.g., /blog/:id) using handlers to fetch API data during build.
• Build your Angular app first: ng build --prod
• Run Scully to generate static files: npm run scully
• Upload the dist/static folder (along with dist/browser) to your shared server.

Pros & Cons: #

• ✅ Automatically discovers routes (no manual listing required)
• ✅ Supports dynamic content by fetching data at build time
• ✅ Has a plugin ecosystem for SEO tools, sitemap generation, and more
• ❌ Requires a rebuild every time your content changes
• ❌ Angular 7 is older—you may need to tweak dependencies for compatibility

3. Use a Third-Party Prerendering Service (e.g., Prerender.io) #

If your content changes frequently and rebuilding isn't feasible, a third-party service can serve pre-rendered HTML to search engine crawlers while letting regular users load the SPA normally.

How it works: #

• Configure your shared server's .htaccess (Apache) or nginx config to redirect crawler requests to the service's API. When a crawler visits, the service renders the page server-side and returns static HTML; regular users get the standard Angular SPA.

Setup example (Apache): #

• Add this to your .htaccess file (replace YOUR_API_KEY and your-domain.com with your details):

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|slurp|duckduckbot|baiduspider|yandex|sogou|exabot|facebot|ia_archiver [NC,OR]
    RewriteCond %{QUERY_STRING} _escaped_fragment_
    RewriteRule ^(.*)$ https://service.prerender.io/http://your-domain.com/$1?key=YOUR_API_KEY [P,L]
  </IfModule>
  

Pros & Cons: #

• ✅ No rebuilds needed when content changes
• ✅ Handles dynamic content and client-side routes
• ❌ Free tiers have monthly request limits; paid plans are required for high traffic
• ❌ Relies on a third-party service (outages could affect crawler access)

4. Manual SPA SEO Optimization (Fallback Option) #

If none of the above work, you can optimize your Angular SPA for SEO without SSR/SSG. This won't be as effective as server-rendered content, but it can help search engines index your site better.

Key steps: #

• Use Angular's Meta and Title services to set page-specific meta tags, titles, and Open Graph tags:

  import { Meta, Title } from '@angular/platform-browser';
  
  constructor(private meta: Meta, private title: Title) {}
  
  ngOnInit() {
    this.title.setTitle('Home Page | My Angular App');
    this.meta.updateTag({ name: 'description', content: 'Welcome to my Angular app!' });
  }
  

• Define SEO metadata in your router's data property, then use a resolver to set tags during navigation.
• Create and submit a sitemap.xml to Google Search Console (generate it manually or use a tool like Scully even for partial use).
• Implement structured data (Schema.org) to help search engines understand your content (e.g., product info, blog posts).
• Enable pushState routing (useHash: false in RouterModule) to ensure crawlers can access all routes.

Pros & Cons: #

• ✅ No build changes or third-party services needed
• ✅ Works with any hosting
• ❌ SEO performance is weaker than SSR/SSG, especially for dynamic content
• ❌ Crawlers may miss content loaded asynchronously

内容的提问来源于stack exchange，提问作者EddyG