如何在IIS上为Angular SPA的index.html添加动态Meta标签？

因为你无法启用SSR，且没有IIS服务器配置权限，以下是几个无需依赖SSR的可行方案：

方案1：用ASP脚本作为请求入口（Hostgator共享IIS支持ASP） #

这个方案通过脚本动态渲染index.html内容，支持根据URL参数和爬虫UA替换Meta标签：

1. 准备模板文件：将原index.html重命名为index-template.html，把需要动态替换的Meta标签改成占位符，比如：

   <meta name="description" content="{{description}}">
   <meta property="og:title" content="{{ogTitle}}">
   <meta property="og:image" content="{{ogImage}}">
   

2. 创建映射JSON文件：在网站根目录新建meta-mapping.json，存储URL ID对应的Meta值：

   {
     "123": {
       "description": "商品123的详细描述",
       "ogTitle": "商品123 - 我的商城",
       "ogImage": "/images/products/123.jpg"
     },
     "456": {
       "description": "商品456的详细描述",
       "ogTitle": "商品456 - 我的商城",
       "ogImage": "/images/products/456.jpg"
     },
     "default": {
       "description": "我的商城首页",
       "ogTitle": "我的商城",
       "ogImage": "/images/home-banner.jpg"
     }
   }
   

3. 编写ASP处理脚本：新建index.asp，负责读取模板、替换占位符并输出内容：

   <%@ Language=VBScript %>
   <%
     ' 获取URL中的ID（假设URL格式为 /product/123）
     Dim urlParts, targetId
     urlParts = Split(Request.ServerVariables("PATH_INFO"), "/")
     If UBound(urlParts) >= 2 Then
       targetId = urlParts(2)
     Else
       targetId = "default"
     End If
   
     ' 读取Meta映射JSON
     Dim fso, jsonFile, jsonContent
     Set fso = CreateObject("Scripting.FileSystemObject")
     Set jsonFile = fso.OpenTextFile(Server.MapPath("meta-mapping.json"), 1)
     jsonContent = jsonFile.ReadAll()
     jsonFile.Close()
     Set jsonFile = Nothing
     Set fso = Nothing
   
     ' 解析JSON（需使用ASP JSON解析库，比如aspJSON）
     Set jsonParser = CreateObject("aspJSON")
     jsonParser.LoadJSON(jsonContent)
     Set metaData = jsonParser.data(targetId)
   
     ' 读取模板文件
     Set fso = CreateObject("Scripting.FileSystemObject")
     Set templateFile = fso.OpenTextFile(Server.MapPath("index-template.html"), 1)
     htmlContent = templateFile.ReadAll()
     templateFile.Close()
     Set templateFile = Nothing
     Set fso = Nothing
   
     ' 替换占位符
     htmlContent = Replace(htmlContent, "{{description}}", metaData("description"))
     htmlContent = Replace(htmlContent, "{{ogTitle}}", metaData("ogTitle"))
     htmlContent = Replace(htmlContent, "{{ogImage}}", metaData("ogImage"))
   
     ' 可选：仅针对爬虫UA返回修改后的内容
     Dim userAgent
     userAgent = LCase(Request.ServerVariables("HTTP_USER_AGENT"))
     If InStr(userAgent, "bot") > 0 Or InStr(userAgent, "crawler") > 0 Or InStr(userAgent, "spider") > 0 Then
       Response.Write(htmlContent)
     Else
       ' 普通用户返回修改后的内容（SPA加载后会接管路由）
       Response.Write(htmlContent)
     End If
   %>
   

4. 配置默认文档：在Hostgator后台将index.asp设为网站默认文档，或通过web.config添加配置。

方案2：通过web.config配置URL重写+PHP脚本（若支持PHP） #

如果你的共享主机支持PHP，逻辑和方案1类似，用PHP代替ASP处理：

1. 同样准备index-template.html和meta-mapping.json文件。

2. 编写index.php实现动态替换逻辑：

   <?php
   // 获取URL中的ID
   $path = $_SERVER['PATH_INFO'];
   $urlParts = explode('/', $path);
   $targetId = count($urlParts) >=3 ? $urlParts[2] : 'default';
   
   // 读取并解析Meta映射JSON
   $jsonContent = file_get_contents('meta-mapping.json');
   $metaMapping = json_decode($jsonContent, true);
   $metaData = $metaMapping[$targetId];
   
   // 读取模板文件
   $htmlContent = file_get_contents('index-template.html');
   
   // 替换占位符
   $htmlContent = str_replace('{{description}}', $metaData['description'], $htmlContent);
   $htmlContent = str_replace('{{ogTitle}}', $metaData['ogTitle'], $htmlContent);
   $htmlContent = str_replace('{{ogImage}}', $metaData['ogImage'], $htmlContent);
   
   // 输出内容
   echo $htmlContent;
   ?>
   

3. 修改web.config将所有非文件/目录请求转发到index.php：

   <?xml version="1.0" encoding="UTF-8"?>
   <configuration>
     <system.webServer>
       <rewrite>
         <rules>
           <rule name="SPA Route" stopProcessing="true">
             <match url=".*" />
             <conditions logicalGrouping="MatchAll">
               <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
               <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
             </conditions>
             <action type="Rewrite" url="index.php" />
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
   </configuration>
   

方案3：预生成静态HTML页面（适合有限数量的URL） #

如果URL中的ID数量不多，可使用Angular的预渲染工具@nguniversal/builders预生成对应路由的静态HTML：

1. 在Angular项目中配置预渲染，指定需要生成的带ID路由。
2. 生成静态HTML文件后，上传到服务器对应目录（比如/product/123/index.html）。
3. 爬虫请求对应URL时，IIS会直接返回预生成的静态HTML，包含正确的Meta标签。

这些方案都无需修改IIS服务器级配置，仅通过网站目录内的文件即可实现，适配共享主机环境。

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