AngularJS SEO for Facebook, Twitter, Slack, Whatsapp, Viber, Telegram, …

In the previous article I covered how to make crawlers (first of all Google’s, but also all the other crawlers that comply with the _escaped_fragment_ rule) index our AngularJS content, but that’s not enough; we need to be able to share our pages also on Facebook, Twitter and a lot of other places, for example in Instant Chat apps like Slack (used at fleka on a daily basis), Whatsapp, Viber, Telegram, just to name some of them.

Long story short, on Apache, we use .htaccess to fetch the requests using their bot’s names.

IMPORTANT: it seems that Google Bot doesn’t like that someone tells him what to do, so it’s important that you don’t add a googlebot exception to your server’s configuration rules. You can check here how to correctly route Google Bot to fetch your content.

We don’t want to show AngularJS handlebars content:

We don’t want to show AngularJS handlebars content

but we we want to see something like this:

This is a nice rendered content in Slack, with Title, Description and Image

Let’s see how to explain to the different bots that our content is on Prerender.io, and that they have to go there to fetch it; but we also don’t need to poke Prerender.io everytime if the request is about a static file, like an image, a document or any other that we host on our Servers:

But we already had several rules in our .htaccess, needed for example to redirect all requests to our index.html page, to make our AngularJS code work correctly:

The simplest task here is to merge our rules and obtain the final .htaccess, using also the token obtained by our Prerender.io account:

The final result renders well the content of the pages on all the social networks and apps we added in the .htaccess rule:

The content of the page as previewed by Facebook (when sharing the URL in your story for example)

The content of the page as previewed by Twitter

These are examples based on an Apache configuration file, but the same results can be achieved using nginx or NodeJS for example.

UPDATE

It seems Viber doesn’t want to work in the same way… still waiting for an answer from their support…