Angular Universal技术问询：SEO元标签更新与社交分享按钮添加

嘿，我来帮你搞定Angular Universal下的社交媒体分享和SEO元标签更新问题！

首先得指出你代码里的一个坑：window.location.href在服务器端渲染（SSR）时会直接报错，因为服务器环境根本没有window对象！下面是适配SSR的正确做法：

1. 依赖注入与环境判断 #

先注入必要的工具，区分客户端和服务器环境，同时在服务器端通过请求对象获取当前URL：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { Meta, ActivatedRoute } from '@angular/router';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  currentUrl: string;

  constructor(
    private meta: Meta,
    private activatedRoute: ActivatedRoute,
    @Inject(PLATFORM_ID) private platformId: object,
    @Inject(REQUEST) private request: Request // 仅服务器端可用
  ) {}

2. 安全获取当前URL并更新元标签 #

在ngOnInit里根据环境获取正确的URL，避免直接碰window，再动态更新元标签：

ngOnInit(): void {
  // 分环境获取当前页面URL
  if (isPlatformServer(this.platformId)) {
    // 服务器端从请求头拼接完整URL
    this.currentUrl = `${this.request.protocol}://${this.request.get('host')}${this.request.originalUrl}`;
  } else if (isPlatformBrowser(this.platformId)) {
    // 客户端再用window
    this.currentUrl = window.location.href;
  }

  // 从路由数据/服务获取页面动态内容（推荐用路由Resolver提前拉取）
  const pageData = this.activatedRoute.snapshot.data['pageData'];

  // 更新SEO元标签
  this.meta.updateTag({ name: 'title', content: pageData.title });
  this.meta.updateTag({ property: 'og:title', content: pageData.title });
  this.meta.updateTag({ property: 'og:url', content: this.currentUrl });
  this.meta.updateTag({ property: 'og:description', content: pageData.description });
  this.meta.updateTag({ property: 'og:image', content: pageData.imageUrl });
  // 按需添加其他标签（比如twitter:card等）
}

关键优化建议 #

用路由Resolver提前获取数据：把页面数据的获取逻辑放到路由Resolver里，这样服务器端渲染时会先拉取数据，再生成页面和元标签，确保搜索引擎爬虫能抓到完整的元信息，不会因为异步加载导致标签为空。

推荐两种方案，按需选择：

1. 静态分享链接（最简单，完美适配SSR） #

不需要加载任何第三方SDK，直接用<a>标签构建分享URL，服务器端渲染时就能生成完整链接，社交平台抓取也没问题：

<div class="social-share-buttons">
  <!-- Facebook分享 -->
  <a 
    href="https://www.facebook.com/sharer/sharer.php?u={{ currentUrl }}" 
    target="_blank" 
    rel="noopener noreferrer"
    class="social-btn fb-btn"
  >
    分享到Facebook
  </a>

  <!-- Twitter分享（可自定义文案） -->
  <a 
    href="https://twitter.com/intent/tweet?url={{ currentUrl }}&text={{ pageData.title }}" 
    target="_blank" 
    rel="noopener noreferrer"
    class="social-btn tw-btn"
  >
    分享到Twitter
  </a>

  <!-- LinkedIn分享 -->
  <a 
    href="https://www.linkedin.com/sharing/share-offsite/?url={{ currentUrl }}" 
    target="_blank" 
    rel="noopener noreferrer"
    class="social-btn ln-btn"
  >
    分享到LinkedIn
  </a>
</div>

• 加rel="noopener noreferrer"是为了安全，防止新打开的页面访问当前页面的上下文。
• 确保currentUrl和pageData在SSR时已经被正确赋值，这样生成的HTML里就有完整的分享链接。

2. 官方SDK方案（需要动态加载） #

如果需要用官方的互动组件（比如Facebook点赞按钮、Twitter推文按钮），要延迟到客户端再加载SDK，避免服务器端报错：

import { Component, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  constructor(@Inject(PLATFORM_ID) private platformId: object) {}

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 加载Facebook SDK
      const fbScript = document.createElement('script');
      fbScript.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0';
      fbScript.async = true;
      document.body.appendChild(fbScript);

      // 加载Twitter Widget脚本
      const twScript = document.createElement('script');
      twScript.src = 'https://platform.twitter.com/widgets.js';
      twScript.async = true;
      document.body.appendChild(twScript);
    }
  }
}

然后在模板里添加官方组件标签：

<!-- Facebook点赞+分享按钮 -->
<div class="fb-like" 
     data-href="{{ currentUrl }}" 
     data-layout="button_count" 
     data-action="like" 
     data-size="small" 
     data-share="true">
</div>

<!-- Twitter推文按钮 -->
<a class="twitter-share-button" 
   href="https://twitter.com/intent/tweet?url={{ currentUrl }}">
  Tweet
</a>

如果动态更新内容后需要刷新组件，可以调用SDK的刷新方法（比如Facebook的FB.XFBML.parse()）。

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