Setting up blog pages

[nandinighosh]

Hi! The blog page of my website currently works by hiding/showing posts using JavaScript for each "page" number. I'm trying to convert this to a more useful setup by linking every batch of posts to an actual page so that I can add code for the pagination. Is the blog_page_link function useful for this? How does it exactly work? I've gone through the HubL documentation for it, but I'm still a bit confused about its implementation.

Additionally, what would the best practices be for setting up a paginated blog in HubSpot?

Thank you!

[danmoyle · Accepted solution]

@nandinighosh when I've set up my blog in HubSpot, I didn't use much pagination except for what's baked in standard. So when you're on your blog listing page and get to the end, and hit next, it gives the next batch a page dynamically. 

Example: 

https://impulsecreative.com/blog/ (the current most recent articles)

https://impulsecreative.com/blog/page/2 (the next recent articles)

And so on.

As for other segmentation, I used tags for separating topics of interest. So I've not needed any additional coding. 

If it helps, I did find some resources on best practices for adding pagination to a HubSpot blog: 

You can set up a paginated blog in HubSpot by configuring the blog settings and customizing the template to accommodate pagination. 

• Enable blog pagination: In your HubSpot account, go to the Blog Dashboard and navigate to the "Settings" tab. Under "Listing Page," select the option to enable pagination.
• Determine the number of posts per page: Decide how many blog posts you want to display on each page. This will depend on factors like the length of your posts and user experience. A common practice is to display 10 to 15 posts per page.
• Customize the blog template: HubSpot provides default blog templates, but you can customize them to incorporate pagination. Modify the template to include navigation links for previous and next pages, as well as the option to jump to specific pages.
• Implement pagination logic: Within the blog template, use HubL (HubSpot's templating language) or HTML/CSS to implement the pagination logic. You'll need to calculate the total number of pages based on the total blog posts and the posts per page setting. Then, display the appropriate posts for each page.
• Style the pagination links: Customize the styling of the pagination links to ensure they are visually appealing and user-friendly. Consider using CSS to make the active page visually distinct and provide clear navigation cues.
• Handle SEO considerations: Pagination can have an impact on SEO, so it's crucial to implement best practices. Use rel=prev and rel=next tags in the header section of each paginated page to indicate the relationship between the pages. This helps search engines understand the paginated structure and consolidate ranking signals.
• Test and optimize: After setting up the paginated blog, thoroughly test the functionality and ensure that all pages are displaying the correct posts. Check for any issues with loading speed, mobile responsiveness, and usability. Monitor the performance of your blog pages and make adjustments if necessary.

These best practices are specific to setting up a paginated blog in HubSpot. Remember to keep in mind your broader content strategy, user experience, and SEO principles. This helps to ensure your blog effectively engages readers and performs well in search engine rankings. Hope that helps!

Thanks for the tag @PamCotton 😊

[danmoyle · Accepted solution]

@nandinighosh when I've set up my blog in HubSpot, I didn't use much pagination except for what's baked in standard. So when you're on your blog listing page and get to the end, and hit next, it gives the next batch a page dynamically. 

Example: 

https://impulsecreative.com/blog/ (the current most recent articles)

https://impulsecreative.com/blog/page/2 (the next recent articles)

And so on.

As for other segmentation, I used tags for separating topics of interest. So I've not needed any additional coding. 

If it helps, I did find some resources on best practices for adding pagination to a HubSpot blog: 

You can set up a paginated blog in HubSpot by configuring the blog settings and customizing the template to accommodate pagination. 

• Enable blog pagination: In your HubSpot account, go to the Blog Dashboard and navigate to the "Settings" tab. Under "Listing Page," select the option to enable pagination.
• Determine the number of posts per page: Decide how many blog posts you want to display on each page. This will depend on factors like the length of your posts and user experience. A common practice is to display 10 to 15 posts per page.
• Customize the blog template: HubSpot provides default blog templates, but you can customize them to incorporate pagination. Modify the template to include navigation links for previous and next pages, as well as the option to jump to specific pages.
• Implement pagination logic: Within the blog template, use HubL (HubSpot's templating language) or HTML/CSS to implement the pagination logic. You'll need to calculate the total number of pages based on the total blog posts and the posts per page setting. Then, display the appropriate posts for each page.
• Style the pagination links: Customize the styling of the pagination links to ensure they are visually appealing and user-friendly. Consider using CSS to make the active page visually distinct and provide clear navigation cues.
• Handle SEO considerations: Pagination can have an impact on SEO, so it's crucial to implement best practices. Use rel=prev and rel=next tags in the header section of each paginated page to indicate the relationship between the pages. This helps search engines understand the paginated structure and consolidate ranking signals.
• Test and optimize: After setting up the paginated blog, thoroughly test the functionality and ensure that all pages are displaying the correct posts. Check for any issues with loading speed, mobile responsiveness, and usability. Monitor the performance of your blog pages and make adjustments if necessary.

These best practices are specific to setting up a paginated blog in HubSpot. Remember to keep in mind your broader content strategy, user experience, and SEO principles. This helps to ensure your blog effectively engages readers and performs well in search engine rankings. Hope that helps!

Thanks for the tag @PamCotton 😊

[danmoyle]

And sorry for the delay. I was off at the end of last week and it's been busy this week catching up 😁 

[nandinighosh]

Hi Dan,

I started planning a new blog page layout using the tips you mentioned above and I have some follow-up questions:

1. How exactly is the blog_page_link function used? Are there any tutorials / resources/ examples beyond the HubL documentation?

2. Once I have a listing page and my number of posts per page set in the Blog Settings, what are the next steps?

3. Is there a way to stage the whole blog listing page setup before publishing it to the live site?

Once again, thank you!

Nandini.

[danmoyle · Accepted solution]

Hi Nandini. My knowledge on developer resources is, admittedly, limited. I'm a trainer/teacher, not a developer. So the resources you have are what I'd share. I'd suggest looking in this Community space (Developers) for more help. 

For the listing page and what's next, I'd say next steps are creating the content. You blog listing page will host the previews, and your blog articles will be pages on your site. 

HubSpot does have content staging in CMS Pro & CMS Enterprise. If you don't have that hub & tier, then it will either be a draft or a live link. In my experience, the live link is completely acceptable, as you're just publishing on the internet and not linking to it or promoting it. With millions of pages, no one is likely to see your blog until you actively promote it. 

Hope that helps! 

[nandinighosh]

Thanks for the resources!

Best,

Nandini.

[nandinighosh]

Thanks Dan! This is super insightful.

Best

Nandini.

[PamCotton]

Hello @nandinighosh, thank you for providing details on your goal.  I want to invite our top experts to this conversation @MatthewShepherd @AJLaPorte_diagr @danmoyle any recommendations for to @nandinighosh matter?

Thank you,

Pam