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

Question

早上好。

我正在处理一个需要注册产品的 OpenGraph 元标记的流程。但是该应用程序已经作为客户端开发，我唯一的想法是使用通用 angular.

转换为服务器端

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

Answer 1

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

Prerender® 是适用于较小应用程序的更具成本效益的选择 – 它最多可免费使用 250 页！

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

在this page中，您是

等技术的入门

ExpressJS (JavaScript)
Rails (Ruby)
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;
        }
    }
}

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

dynamic meta tags for client-side in angular 2+

angular

server-side-rendering

client-side

meta-tags

share-open-graph