具有动态路线和资源的 Angular Twitter 卡和 Facebook 帖子

Question

我正在开发 Angular 14 应用程序，并尝试制作带有动态路线的 Twitter 卡。案例如下：

1. 我有一个在线商店，显示不同的产品，显然是相同的路线，只是通过路线中的参数更改产品信息

   {
     path: 'product/:id',
     component: ProductLayoutComponent,
     children: [{ path: '',  loadChildren: () => import('./pages/section-custom/modules/product/product.module').then(m => m.ProductComponent) },  ]
   }
   

2. 该页面有两个按钮用于在 Facebook 和 Twitter 上分享产品的链接，这里是代码

   productId: string;
   constructor(public activatedRoute: ActivatedRoute) {
     this.activatedRoute.params.subscribe((params) => {   this.productId = params['id']; });
   }
   
   shareFacebook() {
     const facebookshare = 'https://www.facebook.com/sharer/sharer.php?u=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   
   shareTwitter() {
     const facebookshare = 'https://twitter.com/intent/tweet?url=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   

3. 每个产品都有自己的图像、标题和描述出现在 Twitter 卡片和 Facebook 帖子中，经过多天的研究，我了解到社交网络爬虫需要读取一些元标记才能正确显示帖子和卡片，所以当我加载时我的产品有这个功能：

    productId: string;
    constructor(public activatedRoute: ActivatedRoute: public http: HttpClient,  private metaService: Meta) {
        this.activatedRoute.params.subscribe((params) => {   
          this.productId = params['id'];
          this.loadResources();  
        });
    }
   
    loadResources() {
        this.http.get(`https://backend.demo.com/product/${this.productId}`).subscribe(data => {
            const shareLink = `${document.location.origin}/product/${this.productId}`;
            this.metaService.addTags([
                { name: 'twitter:card', content: 'summary_large_image' },
                { name: 'twitter:title', content: data.title },
                { name: 'twitter:description', content: data.description },
                { name: 'twitter:image', content: data.image },
                { name: 'twitter:domain', content: shareLink },
                { name: 'og:type', content: 'website' },
                { name: 'og:url', content: shareLink },
                { name: 'og:title', content: data.title },
                { name: 'og:description', content: data.description },
                { name: 'og:image', content: data.image },
            ]);
        });
    }
   

4. 我已经知道以前的解决方案不起作用，因为 Angular 是单页应用程序，并且爬虫不执行 JavaScript。因此，我实现了 Angular Universal 以使用服务器端渲染，但 SSR 不起作用，因为浏览器仍然是渲染应用程序的工具，而 Crowler 无法识别元标记。

5. 所以现在我正在尝试实现预渲染策略，但由于某种原因，它似乎不适用于这种情况，因为爬虫不知道有一个带有特定代码的根，例如“https://www.myfakesite .com/product/AAE607”，以便在复制和粘贴链接时获取特定图像、标题和描述，即使在我进行预渲染时也是如此

我认为 robots.txt 和 sitemap.xml 可能会参与其中，但我不知道如何参与。（产品数据库是在另一个系统中创建的，产品ID也是如此）

所以我的问题是，如何根据角度的动态路线共享包含动态图像、标题和描述的 Twitter 卡和 Facebook 帖子？

Answer 1

您执行的大多数步骤都是正确的，除了上述步骤之外，请检查以下步骤：

1. 尝试在新选项卡中加载直接网址“https://www.myfakesite.com/product/AAE607”，如果出现 404 或 500 错误，请应用 htaccess 直接加载页面，这将有助于浏览器将其视为单独的页面而不是S

如果您正在页面上加载数据，请检查页面并检查页面上是否添加了元数据

1. 还可以使用标题服务更改每个页面的标题
2. 添加规范 url

这里htaccess对于重定向起着重要的作用