avatar

SEO Friendly pagination with Firebase Firestore query

SEO Friendly pagination with Firebase Firestore query

bounty icon
$30
Multiple winner share bounty
Asked  3 months ago
Viewed  0 times

I build my news site using firestore, with the help of official doc Paginate data with query cursors , I build pagination with prev and next button.

Image for question

But this is clearly not SEO Friendly according to SEO-Friendly Pagination: A Complete Best Practices Guide

So, any help?

  • add comment
avatar

Firestore natively cannot be SEO friendly, you would need to rely on server side rendering with cloud functions to print the appropriate information from firestore, a native query would rely on the rest api which I'm fairly confident that search engine bot's purposefully avoid by design

  • Taken
  • add comment
  • 0
avatar

ALL credit goes to Digi Byte, do not take me as answer if it works for you.

Digi Byte's solution works ;

1.Here is key point to be SEO-Friendly:

A) You have to make every paginated page to be directly visitable by search engine, that means jumping to page X. As we all know firestore query can't jump or skip the query result, you have to start from the top down. This is why Digi Byte says:

print the appropriate information from firestore

B) All paginated page is better be static server side generated html, obviously. Search engine hates native query.

C) Every paginated page know the exact url of next and prev page.

2.Here is how to make SEO-Friendly pagination with firebase firestore:

Lets say a bloglist with every blog is a single firestore document, every 10 blog makes a page.

A) Assign a pageID for every blog post on it's creation, posts with same pageID go into same page.

B) To simplify things, pageID should start from 1 and incremented every 10 post, why? Because pageCount is starting from 1 . store current pageCount on firestore, you should find that pageCount == maxPageID == assigningPageID.

C) On client side, first page shows the question with pageID equals pageCount, THAT IS SO WRONG when you only have 1 or 2 post under this pageID, it can not fill up the space on the first page. So we show the posts with pageID == pageCount & pageCount -1 together on first page, it can be longer but not shorter to make a contentful page.

D) After we structure pageID like this, when search engine or user jump to page X , we know excatly we are sending posts under pageCount - X , also , every paginated page know the excat url of next & prev page (check out html <Link>).

Image for question

E) Then, server side render every paginated page, have a look at Nextjs incremental static generation & revalidation, fit right into your need, new pagination result is generated automatically whenever a new post come in.

  • Taken
  • add comment
  • 0
Sign In
Sign In
avatar

SEO Friendly pagination with Firebase Firestore query

SEO Friendly pagination with Firebase Firestore query

bounty icon
$30
Multiple winner share bounty
Asked  3 months ago
Viewed  0 times

I build my news site using firestore, with the help of official doc Paginate data with query cursors , I build pagination with prev and next button.

Image for question

But this is clearly not SEO Friendly according to SEO-Friendly Pagination: A Complete Best Practices Guide

So, any help?

  • add comment
avatar

Firestore natively cannot be SEO friendly, you would need to rely on server side rendering with cloud functions to print the appropriate information from firestore, a native query would rely on the rest api which I'm fairly confident that search engine bot's purposefully avoid by design

  • Taken
  • add comment
  • 0
avatar

ALL credit goes to Digi Byte, do not take me as answer if it works for you.

Digi Byte's solution works ;

1.Here is key point to be SEO-Friendly:

A) You have to make every paginated page to be directly visitable by search engine, that means jumping to page X. As we all know firestore query can't jump or skip the query result, you have to start from the top down. This is why Digi Byte says:

print the appropriate information from firestore

B) All paginated page is better be static server side generated html, obviously. Search engine hates native query.

C) Every paginated page know the exact url of next and prev page.

2.Here is how to make SEO-Friendly pagination with firebase firestore:

Lets say a bloglist with every blog is a single firestore document, every 10 blog makes a page.

A) Assign a pageID for every blog post on it's creation, posts with same pageID go into same page.

B) To simplify things, pageID should start from 1 and incremented every 10 post, why? Because pageCount is starting from 1 . store current pageCount on firestore, you should find that pageCount == maxPageID == assigningPageID.

C) On client side, first page shows the question with pageID equals pageCount, THAT IS SO WRONG when you only have 1 or 2 post under this pageID, it can not fill up the space on the first page. So we show the posts with pageID == pageCount & pageCount -1 together on first page, it can be longer but not shorter to make a contentful page.

D) After we structure pageID like this, when search engine or user jump to page X , we know excatly we are sending posts under pageCount - X , also , every paginated page know the excat url of next & prev page (check out html <Link>).

Image for question

E) Then, server side render every paginated page, have a look at Nextjs incremental static generation & revalidation, fit right into your need, new pagination result is generated automatically whenever a new post come in.

  • Taken
  • add comment
  • 0