CODEWITHSUNDEEP
angularjsnginxprerender
JosMarRivera
JosMarRivera

Reputation: 533

prerender.io with nginx, angular.js and text before hashbang

I'm trying to work prerender.io with nginx and angular.js, in my case mainly for Facebook, to prevent typical angular braces when someone shares the page displayed. With nothing in front of URL hashbang it works properly. But if there is something in front of hashbang not working. example:

Work: midomain.com/#!/page1

Not work: midomain.com/mobile.html#!/page1

The problem seems to be in nginx configuration, since in this case the request is not made to prerender.io.

This is my setup, based on official documentation (https://gist.github.com/thoop/8165802):

location / {
try_files $uri @prerender;
}

location @prerender {
  proxy_set_header X-Prerender-Token XXXXXXXXXXXXXXX;
  set $prerender 0;
  #añadimos snippet para Google Plus
  if ($http_user_agent ~* "snippet|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
  set $prerender 1;
  }
  #Descartamos las búsquedas de Google porque ya lee angular y así evitamos redireccionamientos innecesarios
  #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)") {
  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;
  }
}

I have long with this, I have been studying the documentation Nginx, asking prerender.io support, etc. but I do not get it to work.

With G +, for example, is the same.

Any suggestions?

Upvotes: 1

Views: 779

Answers (2)

JosMarRivera
JosMarRivera

Reputation: 533

Finally, I created a subdomain for the mobile version, and everything works fine.

Thanks.

Upvotes: 0

QUIPHOP
QUIPHOP

Reputation: 93

You need to activate html5mode ,add the base href to remove this "ugly" urls, add <meta name="fragment" content="!"> for crawlers and set hashPrefix at your angular app. Anyway, here is the good example(with nginx config that You need to replace) https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

Upvotes: 1

Related Questions