Tips for optimizing SEO by efficiently indexing data from client-side API requests

I'm not seeking a step-by-step tutorial on how to set this up. I'm genuinely curious about what's achievable and what's not.

Within my Angular 6 application, I am exploring the implementation of server-side content loading for better indexing by search engine bots. I have numerous data arriving from API requests that I want to ensure can also be crawled. For instance, the code snippet below demonstrates retrieving project data for the current page from my ecommerce platform'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 function calls my API which fetches data from BigCommerce (as shown 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 Feasible to Index API Data?

Can the data retrieved from APIs be indexed effectively by SEO bots?

javascriptangulartypescriptseoangular-universal

Answer №2

There are a couple of key points to consider in this response:

  • Google bots
  • Social media platforms such as Facebook, Instagram, and other social media bots

When it comes to Google bots, you don't have to take any additional steps with Angular to ensure that Google properly renders all the data on your page. You can refer to resources like the Google group created by John Mueller to gain insights into how single-page applications (SPAs) are handled by Google bot.

In essence, if your webmaster tools' "fetch as Google" feature is functioning correctly, there's no need to worry about Google bot indexing your pages. Just make sure you have appropriate sitemaps and well-generated title meta tags in place.

As for social media bots like Facebook crawler, integrating Angular Universal is crucial to ensure that your pages display correctly when shared. To enable social sharing capabilities, you'll need to utilize the resolve function to fetch data from the backend.
For instance, your routing.module.ts file should include a resolve to retrieve data from the backend before the component is initialized:

        path: 'content/:id',
        component: contentDetailComponent,
        resolve: {
          content: DetailResolve
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to adjust a specific div within an ng repeat using the value from JSON in AngularJS

When I select a different option from the dropdown menu, such as cities or states, the values are populated from a JSON file. My specific requirement is to hide a button only when the value 'No data' is populated upon changing the dropdown select ...

javascripthtmlangularjs

A novel RxJS5 operator, resembling `.combineLatest`, yet triggers whenever an individual observable emits

I am searching for a solution to merge multiple Observables into a flattened tuple containing scalar values. This functionality is similar to .combineLatest(), but with the added feature that it should emit a new value tuple even if one of the source obser ...

javascripttypescriptrxjsrxjs5angular2-observables

Error Message Missing from Google Cloud Function Response

In my Google Cloud function code, I have encountered an issue where the status changes to 400 when there is an error creating a new user. However, on the client side, I always receive an "Error: invalid-argument" message regardless of the actual error from ...

javascriptnode.jsfirebasegoogle-cloud-functionshttp-status-codes

A method for retrieving a collection of information from a Mongoose model

I am working on a function within Express to retrieve a list of data from a mongoose model. The 'MiModelo' model is created using a Schema. //Retrieving data from the database function getAllData() { var promise = MiModelo.find().exec(); ...

javascriptnode.jsexpressasynchronousmongoose

What is the best method for generating a vertical tab using JavaScript in a paragraph format?

Struggling to create a menu similar to this using bootstrap 4. Despite my efforts, I keep encountering various issues. Is there someone who can help me solve this problem? Remember, I am using bootstrap 4. Here is a demo: <!doctype html> <html ...

javascripthtmlcssresponsive-designbootstrap-4

When the route is modified, the image fetched from the JSON disappears

When using a div tag to display JSON values on an image, I noticed that the values disappear when navigating to other pages and then returning to the home page. This issue is occurring as I develop with Angular.js NumberJson.get().then(function (resul ...

javascripthtmlangularjs

Gitlab runner fails to complete lint command due to timeout issue

I am facing an issue with a specific GitLab CI step that I have defined as follows: lint: stage: frontend_check only: changes: - frontend/**/* script: - cd frontend/ngapp - npm run lint - npm run prettier Whenever I run this on ...

node.jsangulargitlabgitlab-ci-runner

Using React for Right-to-Left (RTL) Support

How can RTL (Right-to-Left) support be effectively implemented in React applications? Is there a method to customize default <p> and <span> components for RTL support without the need to rewrite existing components? For instance, using a global ...

javascriptreactjsright-to-left

Accessing environmental variables from pug template

Currently, I am utilizing pug to generate static HTML for my own customized static site builder. In my package.json file, the only line of Node.js server code present is: "watch-pages": "pug -O options.json -w pages/ --out _static-website/" However, the ...

javascriptjsonnode.jspug

Converting RGB color values to HSL color values using a unique, randomized Javascript approach

On this site, I have added a random color overlay to the media-boxes. Check it out here Thanks to the helpful folks at stackoverflow, I was able to create this script: var getRandomInRange = function(min, max) { return Math.floor(Math.random() * (ma ...

javascriptcssrandomrgbhsl

Nesting forms in Rails is a common practice where one form

As a newcomer to web development, I'm looking for some guidance! I've set up a page where Rails fetches room data from the database and displays it in a table. Everything is going smoothly, but I want to enable users to click a button next to eac ...

javascriptruby-on-railsrubyformsruby-on-rails-4

Problem: Repeated attempts to open the popup are unsuccessful

Developed a leaflet map featuring markers that open popups when clicked. Also integrated a search bar for marker searchability. However, encountering an issue where each popup can only be opened once and on selecting a marker name, the zoom functionality w ...

javascriptpopupleaflet

Adjusting the position of the arrow helper to create more space from the

I am currently working on achieving a specific goal. https://i.sstatic.net/XnAmo.png Instead of moving farther away from the object, the two arrow helpers seem to be shifted inward. How can I adjust their positioning to move them away from the object? B ...

javascriptthree.js

Discover the most recent date of a document by analyzing two distinct fields: the month and the year

In my mongoDB database, the documents have the following structure: {username:String, paymentYear:Int, paymentMonth:Int} I am trying to retrieve the latest document for a specific username, which would be the one with the date closest to the current Date ...

javascriptmongodbdate

Steps for dynamically adding a link to images in React with TypeScript based on a condition

In my project, I am looking to dynamically add links to images based on certain conditions using JavaScript and React. Here's what I aim to achieve: I have separate mobile and desktop images in my application. Under the mobile image, there is a text ...

reactjstypescript

Exploring ways to extract key:value pairs from an encoded URL form using POST in express/node.js

I have a web form with 4 input fields. The form is set up as follows: <form action="/" method="post" onsubmit="alert('data submittet')"> It should default to x-www-form-urlencoded. The form functions correctly and I am able to submit my d ...

javascriptnode.jsexpresspostbody-parser

Modify KeyboardDatePicker to display the full name of the day and month

Date Selector Hey there, I'm looking to modify the date format from Wed, Apr 7 to Wednesday, April 7. Is there a way to display the full name of the day and month instead of the short abbreviation? ...

javascriptreactjsmaterial-ui

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

javascripthtmljquerycheckboxfilter

Javascript code for toggling the visibility of a div element not functioning as expected

This problem is becoming quite frustrating as it appears to be straightforward but still doesn't work. Inside my document, I have <div id ="splashscreen" style="display:block"> <h3>title</h3> <p>text</p> &l ...

javascriptcss

Proper method for inserting a value into a string array in a React application using TypeScript

How can I properly add elements to a string array in react? I encountered an error message: Type '(string | string[])[]' is not assignable to type 'string[]' You can view the code on this playground link : Here Could it be that I&apos ...

reactjstypescriptreact-hooks