Infinite scroll SEO #6598

kontrollanten · 2024-09-20T09:02:25Z

Description

Adds a "Load more" button on the bottom of MyInfiniteScrollerComponent. For a regular user the behavior should be the same.

Behavior for bots:

Loads the page and InifniteScroller will continue to load more content until the visible part of the page is full.
In the bottom the bot will see a link to page?{currentPage++}
Upon visiting this link the scenario will be repeated.

Background

Thoughts during the path

Skip the scroll logic and instead use IntersectionObserver to trigger "near bottom" when the Load more button becomes visible.
I began to add pagination URL query params upon scroll, but this went too complex. Maybe it can be nice for users to be able to link directly to a paginated page, but it's out of scope for this feature.
When watching a video in a playlist the query params will affect both the playlist and comments. Not ideal, but will only affect bots.

Todo

Add page query param to the canonical URL for pages where the main content is paginated. For other paginated pages (i.e. comments, watch playlist, etc) the canonical URL shouldn't include the page query param.

Related issues

#6332

Has this been tested?

👍 yes, I added tests to the test suite
💭 no, because this PR is a draft and still needs work
🙅 no, because this PR does not update server code
🙋 no, because I need help

To test it manually, add a "?page=1" query param to a route which has infinite scroll

Screenshots

Add a "Load more" button in the bottom to help search engine bots to navigate to the next page. In order to debug this functionality, add ?finiteScroll=true to the URL.

hasMoreItems has to be called before bumping the current page in order to work accordingly.

closes Chocobozzz#6332

kontrollanten · 2024-09-24T17:01:48Z

client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts

-    if (!hasMoreItems(this.pagination)) return
+    if (!hasMoreItems(this.pagination)) {
+      return
+    }


kontrollanten · 2024-09-24T17:02:42Z

client/src/app/+my-library/my-follows/my-followers.component.ts

-    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) {
+      return
+    }


kontrollanten · 2024-09-24T17:04:29Z

client/src/app/+my-library/my-follows/my-subscriptions.component.ts

  search: string

  constructor (
    private userSubscriptionService: UserSubscriptionService,
    private notifier: Notifier
-  ) {}
+  ) { }


kontrollanten · 2024-09-24T17:06:12Z

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts

-    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) {
+      return
+    }


kontrollanten · 2024-09-24T17:07:01Z

client/src/app/+search/search.component.ts

    this.pagination.totalItems = null
+    this.pagination.currentPage = 1


kontrollanten · 2024-09-24T18:36:57Z

client/src/app/shared/shared-video-miniature/videos-list.component.ts

@@ -152,7 +153,8 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
    private route: ActivatedRoute,
    private screenService: ScreenService,
    private peertubeRouter: PeerTubeRouterService,
-    private serverService: ServerService
+    private serverService: ServerService,
+    public router: Router


kontrollanten · 2024-09-24T18:37:44Z

client/src/app/shared/shared-video-miniature/videos-selection.component.ts

-    if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
+    if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) {
+      return
+    }


kontrollanten · 2024-09-24T18:40:00Z

client/src/app/shared/standalone-notifications/user-notifications.component.ts

    if (hasMoreItems(this.componentPagination)) {
      this.loadNotifications()
    }
+
+    this.componentPagination.currentPage++


This should be at line 89

kontrollanten · 2024-09-24T18:41:40Z

server/core/controllers/index.html

kontrollanten · 2024-09-24T18:42:29Z

server/core/lib/html/shared/video-html.ts

@@ -15,7 +15,6 @@ import { PageHtml } from './page-html.js'
 import { TagsHtml } from './tags-html.js'

 export class VideoHtml {
-


kontrollanten · 2024-09-24T18:44:04Z

@Chocobozzz I did a self-review and found some minor style changes. If you're okay with this implementation I'll fix them.

kontrollanten added 4 commits September 12, 2024 13:13

chore: fix eslint for vs code

c9258a1

feat(client/videos-list): infinite scroll SEO

542a147

Add a "Load more" button in the bottom to help search engine bots to navigate to the next page. In order to debug this functionality, add ?finiteScroll=true to the URL.

fix(client/user-notifications): load last page

77ea750

hasMoreItems has to be called before bumping the current page in order to work accordingly.

feat(client/infinite-scroll): SEO friendly

a85a48f

closes Chocobozzz#6332

kontrollanten marked this pull request as draft September 20, 2024 19:04

kontrollanten force-pushed the feat-6332-infinite-scroll-seo-2 branch from cfe81c1 to ad1d2d6 Compare September 24, 2024 09:59

feat: add canonical tag to pages with pagination

b620bea

kontrollanten force-pushed the feat-6332-infinite-scroll-seo-2 branch from ad1d2d6 to b620bea Compare September 24, 2024 10:12

kontrollanten marked this pull request as ready for review September 24, 2024 10:44

kontrollanten commented Sep 24, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Infinite scroll SEO #6598

Infinite scroll SEO #6598

kontrollanten commented Sep 20, 2024 •

edited

Loading

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten Sep 24, 2024

kontrollanten commented Sep 24, 2024

		this.pagination.totalItems = null
		this.pagination.currentPage = 1

		@@ -15,7 +15,6 @@ import { PageHtml } from './page-html.js'
		import { TagsHtml } from './tags-html.js'

		export class VideoHtml {

Infinite scroll SEO #6598

Are you sure you want to change the base?

Infinite scroll SEO #6598

Conversation

kontrollanten commented Sep 20, 2024 • edited Loading

Description

Background

Thoughts during the path

Todo

Related issues

Has this been tested?

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kontrollanten commented Sep 24, 2024

kontrollanten commented Sep 20, 2024 •

edited

Loading