angular - Angular 2+ 中客户端的动态元标记

Question

早上好。

我正在开发一个需要注册产品的 OpenGraph 元标记的流程。但是该应用程序已经作为客户端开发，我唯一的想法是使用通用角度转换为服务器端。

我还有其他解决方案吗？或者真的唯一的选择就是我想的那个。

Answer 1

你可以使用Prerender.io。官方网站称：“Prerender® 将您的动态网页呈现为静态 HTML 页面，网络爬虫可以持续阅读、理解和索引。它消除了服务器端渲染通常需要的人力和繁忙工作。

Prerender® 对于较小的应用程序来说是一种更具成本效益的选择——它可以免费使用多达 250 页！

而且，Prerender® 包含在 Google 用于动态渲染的工具列表中，使其成为少数获得 Google 认可的第三方软件推荐之一。”

在此页面中，您是技术的入门，例如

• ExpressJS (JavaScript)
• 导轨（红宝石）
• Nginx
• 阿帕奇

这里我将做一个 Nginx 配置的例子：

# Change YOUR_TOKEN to your prerender token
# Change example.com (server_name) to your website url
# Change /path/to/your/root to the correct value

server {
    listen 80;
    server_name example.com;

    root   /path/to/your/root;
    index  index.html;

    location / {
        try_files $uri @prerender;
    }

    location @prerender {
        proxy_set_header X-Prerender-Token YOUR_TOKEN;
        
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
            set $prerender 0;
        }
        
        #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;

        if ($prerender = 1) {
            
            #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
            set $prerender "service.prerender.io";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}