0

Preamble

Hello,

I'm trying to improve SEO of a web app built with Angular 7. Unfortunately, I can't (not allowed to) install node on the server it's being hosted on, so I cannot implement server-side rendering.

In this case, with no SSR, I've decided to go with pre-rendering. I've tried using prerender.io with Apache middleware, but got no results, because proxy is not enabled on the server and I'm not allowed to enable it.

Then I've decided to create a local node.js app, which will make requests to https://render-tron.appspot.com/, save generated html files locally (in project dist/prerender folder).

I've configured .htaccess to serve those pre-rendered files to crawlers, it looks like this:

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]


    RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
    RewriteCond %{QUERY_STRING} _escaped_fragment_

        # Only proxy the request to Prerender if it's a request for HTML
    RewriteRule ^(?!.*?(\.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))(.*) https://website.com/prerender/$2 [P,L]


</IfModule>

So, I've got two questions:

  1. When I curl https://website.com --user-agent "Googlebot/2.1 (+http://www.google.com/bot.html)" -v $@ I'm not actually getting my pre-rendered, static html page, I'm getting my Angular page, containing only <app-root></app-root> in the body. Is something wrong with my .htaccess?
  2. Even if I get my htaccess to work, would this practice be considered cloaking? Basically the page looks exactly the same, even assets are loaded. But still, from what I've read, it may be considered cloaking.

Thanks!

Improve this question
6
  • Use Google Fetch, if it doesn't render, then you have to fix it, regardless.
    – Simon Hayter
    Commented May 23, 2019 at 12:37
  • Any Google tool I use (for example, rich data testing tool) does not fetch pre-rendered version. Google is pretty good at understanding client-side scripts, so it will (mostly) index an Angular app. The problem is with basically any other crawlers.
    – Nicolae Cojocaru
    Commented May 23, 2019 at 12:39
  • If Google Fetch does not work, then Googlebot won't work. It uses the same technology.
    – Simon Hayter
    Commented May 23, 2019 at 12:42
  • Googlebot, does not just look at source, it renders the page, hence why its able to send you complaints about 'buttons' being to close to one another, overflow caused on mobiles and so on. The only testing tool you should be using is Google Fetch, period, well for Google that is.
    – Simon Hayter
    Commented May 23, 2019 at 12:44
  • Thanks for the answer. Well, it's a sure thinng Googlebot has learned to understand Javascript. But I still want to implement pre-rendering, so other bots will be able to crawl this app. (main focus on facebook social share, twitter and stuff like that). Also, I'm a bit concerned if Google is able to crawl and understand rich data, dynamically provided by injecting json-ld scripts to a page. Because, from what I've seen, their Rich Data Testing Tool isn't really able to parse JS.. Can you share some experience related to this? Thanks
    – Nicolae Cojocaru
    Commented May 23, 2019 at 12:52

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.