dynamic meta tags for client-side in angular 2+

Question

Good Morning.

I'm working on a process that needs OpenGraph metatags of registered products. but the application is already developed as a client-side and my only idea is to convert to server side using the universal angular.

do I have any other solution? or really the only option will be the one I thought.

user_11903099 · Answer

you can use the Prerender.io. The official site says: "Prerender® renders your dynamic web pages into static HTML pages that web crawlers can consistently read, understand and index. It erases the need for the manpower and busy work normally required for server-side rendering.

Prerender® is a more cost-effective option for smaller applications – it’s free to use up to 250 pages!

And, Prerender® is included in Google’s list of tools to use for dynamic rendering, making it one of the few third-party software recommendations with Google’s seal of approval."

In this page you'he the Getting Started for technologies like

ExpressJS (JavaScript)
Rails (Ruby)
Nginx
Apache

Here I will make a example of Nginx config:

# 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;
        }
    }
}

dynamic meta tags for client-side in angular 2+

1 Answers