The steps are really easy and enables you to have rich sharing links in you app with very little effort. I am going to focus on using this with Drupal rather than using a static php file like in the blog post from Michael.
Open Graph and specific protocols
Facebook and all the major social media platforms expect your page to have some specific metatags to better display Images, description and other information about the link you are sharing. The most common from facebook is the OpenGraph protocol. it looks something like this :
Twitter uses something simillar but with “twitter:” prefix instead of “og:”. Once you submit a page to be shared the crawler from facebook or twitter is going to start scan your page to find these tags, and also scan the regular HTML to find some images or tags that it can use to better display the link.
The problem with AngularJs
The Solution - server side render for bot crawlers
Since you don’t care how the page displays to these crawlers but rather just have the necessary tags and meta info that they need, you can use a server page to render this result to the crawlers. The only important thing is to make sure that only crawlers get this response and normal users are still getting the normal “Angular” page. Worth mentioning that this sever side page is Drupal which is giving us these pages essencially for free.
We will be needing
- A web server capable of URL rewriting. In this case, we are using Apache and the mod_rewrite module but we could use another option.
- A server-side page to generate our crawler-friendly pages. Because we are using Drupal, and these are nodes we basically have this for free. We just point the crawler to the Drupal node page and voilla, Meta info and a nice server side page. We can also enhance it with custom modules for better meta data as well.
- The Angular app must be using “html5mode” its URLs. This is because the # portion of a URL does not get sent to the server, so makes server-side redirection based on the Angular page impossible
In this example I have my own blog in which URL’s for specific pages match the ones in my blog_backoffice. So I have an angular page in http://joaogarin.com/blog/whats-coming-with-angular-2 and I simply point it to http://joaogarin.com/blog_backoffice/whats-coming-with-angular-2 which is the Drupal node for this page.
One you have this it will check the user agent for the correspondent crwalers, in this case Facebook, twitter, pinterest and google plus and it will redirect to the blog_backoffice directory where drupal is. You could essencially use anything here as long as you can map between them somehow. In my case its very easy since the URL’s follow the same pattern.
You can now go ahead and test it out in each of the platforms.
- Facebook Open Graph Object Debugger
- Twitter Card Validator
- Pinterest Rich Pin Validator
- Google Structured Data Testing tool
Enjoy your Angular App with Drupal backoffice.