Maximize Your Angular Website's Visibility with Rendertron
Table of Contents
- Introduction
- What is Render Tron?
- Setting up an Angular 5 Progressive Web App
- Adding Meta Tags for SEO
- Generating Meta Tags Dynamically
- Integrating Firebase with Angular
- Deploying Render Tron
- Creating the Cloud Function Middleware
- Optimizing the Progressive Web App for Search Engines
- Conclusion
Introduction
In this article, we will explore how to make an Angular 5 Progressive Web App (PWA) fully optimized for search engine crawlers like Googlebot and Bing Bots. We will achieve this by using a new library called Render Tron, developed by the Google Chrome team. Render Tron allows us to render our Angular app on the server side, making it readable by social media link bots and improving its compatibility with asynchronous data sources such as Angularfire. The best part is that we can accomplish all of this without using Angular Universal. So let's dive in and see how easy it is to implement this with an existing Angular app.
What is Render Tron?
Render Tron is a Chrome browser that runs on the server side. It can render your website just like a normal user would and return that data back to the bot that needs to read the meta tags or any asynchronous data loaded into the page. It is an invaluable tool for anyone who has struggled with client-side JavaScript frameworks and search engine optimization. By using Render Tron with Angular 5 and Firebase Cloud Functions, we can ensure that our app is SEO friendly and fully accessible to bots.
Setting up an Angular 5 Progressive Web App
To begin, we need to generate a new Angular app and include the routing module. This will allow us to navigate between different components in our app. We can then add meta tags for Twitter and Open Graph in the index.html file. Meta tags provide information to link bots about how to display our page, including the title, description, and image. By generating these meta tags dynamically for each component, we can create SEO-friendly pages that will be properly indexed by search engines.
Adding Meta Tags for SEO
To add meta tags dynamically, we will create an SEO service. This service will use the Angular Meta service, which allows us to set meta tags dynamically in the head of the document. We can inject the SEO service into the constructor and set up a configuration object to customize the meta tags for each component. By calling the meta.updateTag method with the appropriate name and content, we can easily update the meta tags for each component. This approach helps us keep our code DRY and avoid repeating code for each individual component.
Generating Meta Tags Dynamically
With the SEO service in place, we can now generate meta tags dynamically using data loaded from the Firebase database. By importing the AngularFire database, we can retrieve data as an observable and inject it into our SEO service. In the component's ngOnInit lifecycle hook, we can subscribe to this observable and use the data to set the meta tags for that specific component. This allows us to dynamically generate meta tags based on the content from the Firebase database, making our app even more SEO friendly.
Integrating Firebase with Angular
To integrate Firebase with Angular, we first need to set up a firebase account and install the necessary dependencies, including Angularfire. Once that is done, we can import the AngularFire database and create a reference to the Firebase object in our component. We can then retrieve the data as an observable using the valueChanges method. By subscribing to this observable, we can get the data and use it to set the meta tags dynamically in the component. This integration allows us to load data from Firebase and optimize our app for search engines.
Deploying Render Tron
Now that we have set up our Angular app and integrated it with Firebase, we can deploy our own instance of Render Tron. Although Google offers Render Tron as a service, it is recommended to deploy our own instance for production use. We can clone the Render Tron project and deploy it to App Engine. The process involves building a Docker container and deploying it to a backend of our choice. By following the instructions provided, we can have our own custom production-ready version of Render Tron.
Creating the Cloud Function Middleware
To determine whether a user is a bot or an actual human, we need to create a cloud function middleware that acts as a middleware between the bot and the Angular app. We need to configure Firebase Hosting to use this cloud function for all URLs other than the root URL. This can be done by adding a rewrite rule in the hosting section of the Firebase configuration file. In the cloud function, we will use Express.js to handle routing and node-fetch to fetch the rendered HTML from Render Tron. By detecting the user agent header, we can determine if the request is coming from a bot or a human. If it is a bot, we will fetch the rendered page from Render Tron and return it as a response. Otherwise, we will fetch the Angular app directly and serve it to the human user.
Optimizing the Progressive Web App for Search Engines
With Render Tron and the cloud function middleware set up, our progressive web app is now optimized for search engines. By serving fully rendered HTML to link bots, we can ensure that our app is properly indexed and displayed in search results. The asynchronous data loaded into the page can still be read by bots, improving the visibility of our app. By following the steps outlined in this article, we can make our Angular app SEO friendly without compromising its functionality.
Conclusion
In this article, we have explored how to optimize an Angular 5 Progressive Web App for search engines using Render Tron and Firebase Cloud Functions. By rendering our app on the server side, we can make it readable by bots and improve its compatibility with asynchronous data sources. The combination of Render Tron, Angular, and Firebase provides a powerful solution for achieving both SEO optimization and a smooth user experience. By following the steps outlined in this article, you can ensure that your Angular app is fully optimized for search engines and ready to attract more organic traffic.
FAQs
Q: What is Render Tron?
Render Tron is a Chrome browser that runs on the server side, allowing you to render your website just like a normal user would and return the fully rendered data back to bots.
Q: Can I use Render Tron for my Angular 6 app?
Yes, Render Tron can be used with any version of Angular.
Q: How do I deploy Render Tron?
You can deploy Render Tron to App Engine by following the instructions provided in the article.
Q: Can I use Render Tron in production?
While Google has deployed an instance of Render Tron that you can use, it is not recommended for production use. It is recommended to deploy your own instance of Render Tron for better customization and control.
Q: Can I use Render Tron with other JavaScript frameworks?
Yes, Render Tron can be used with other client-side JavaScript frameworks, not just Angular.
Q: Are there any limitations to using Render Tron?
Render Tron has a render timeout of 10 seconds, meaning it will send the response as soon as the page finishes rendering. This may impact the rendering of pages with complex rendering requirements.
Q: Can I use Render Tron with Firebase Cloud Firestore instead of the Realtime Database?
Yes, you can use Render Tron with Cloud Firestore by making the necessary changes to your code.
Resources
