I am not looking for a specific tutorial on how to set this up. I am actually wanting to know what is possible and what is not.
In my Angular 6 application I am learning how to load content serverside so bots can index the client data. There is a lot of data that comes from api requests that I would like to be crawled also. For example the following code gets the current pages project data from my ecommerce’s API.
In my Angular Component
getProductById(product_id) {
const data = { product_id: product_id };
return this.http.get<any>( api_url + '/getProductById', {params: data} );
}
this is a call to my api which returns data from BigCommerce (see below)
my Express API
getProductById = (req, res, next) => {
let product_id = req.query.product_id;
return bc_v3.get(`/catalog/products/${product_id}`).then(data => {
return data; // this data will then return back to the client async
});
};
is it possible to index data coming from an API?
Can the data returned from the API be indexed by SEO bots?
2
Answers
I believe it can, if you use server side pre-rendering and inject the data into your html. There is an example of how to do this using .Net Core here: https://github.com/MarkPieszak/aspnetcore-angular2-universal
There are two parts to this answer:
For google bots you don’t need to do anything extra with angular to make google bot render all your page data. You can read these links to understand how SPA is being rendered by google bot. John Mueller created this google group to help developers resolve their doubts about what and how google bot works when dealing with SPA.
In a nutshell if your webmaster fetch as google is working properly then you don’t need to worry about google bot indexing the pages. All you need is to create proper sitemaps and have title meta tags generated properly
For social media bots like facebook crawler you need to incorporate angular universal so that your pages are having appropriate preview on share. To implement social share you must use resolve to fetch data from backend.
For example
routing.module.ts should have the resolve to fetch data from backend before the component is initialized