Search code examples
angularjsseoprerender

Enable SEO for AngularJs (1x) website


I am trying to build my personal website. I am using angularjs (1.6.4) with laravel backend. But even after submitting to Google for indexing, the website is not appearing in the google searches. If I check in "Fetch as Google", I see Google is fetching the pages as blank: Fetch as Google.

Further many of the times "Fetch as Google" is failing with a status message "Temporarily unreachable". I also tried redirecting the googlebot requests through .htaccess file. But in that case the status is coming as "Redirected". Not sure what's wrong I am doing. Screenshots.

I have searched online for finding a solution, but unfortunately I am still not able to get through this. My website is hosted in a shared space, so not sure if I can use prerendering using headless browser. Also, I do not want to shell out money for using online prerendering services.

Is there any other way of enabling SEO for my website so that it starts appearing in google searches. And also the previews are available when sharing in social medias like Facebook? Unfortunately I am not able to find any proper tutorial or working example anywhere. Can anybody please guide me?


Solution

  • There is no such way of "enabling SEO". It depends on the way you make your website, lots of different factors actually (content, text in links, backlinks).

    I'm using Angular 1.6 aswell, and, no worries, GoogleBot can render javascript. Maybe use the /#!/url to try to render without redirecting.

    No need for online prerendering services. I'm using a Grunt task to generate snapshots : grunt-ng-html-snapshot.

    This link is a good way to start. But beware: the Grunt task used is not the good one.

    To share on social media you need to use Open Graph for Facebook (and something different for Twitter). Note that the social medias crawlers can't read javascript and that you will need to serve the snapshots for these crawlers (from your .htaccess). You don't need to serve a snapshot for GoogleBot.

    An example of .htaccess (i'm far from being good at this but this is what i use) :

    RewriteCond %{HTTP_USER_AGENT} (facebook|bot|spider|whatsapp) [NC]
    RewriteCond %{HTTP_USER_AGENT} !googlebot [NC]
    RewriteRule ^(.*)$ https://%{HTTP_HOST}/resources/snapshots/%{REQUEST_URI}.html [QSA,L,R=301]
    

    Where resources/snapshots/ is the directory containing the snapshots