Blog redesign

[smallbrownbike]

Changes

Implements Lottie's sweet new blog design!

See #4785 for a full breakdown

Additions

• Pagination instead of lazy loading. We don't have an API to hit for new posts when lazy loading and pagination gives us more pages to index!
• Popular / latest switch choice persists on subsequent page loads

Concerns

• The left menu is massive when menu items are opened. Should we keep listing all posts like this under each category or use the most recent few and show a "more" button that links to the category page?

Closes #4889

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
posthog	✅ Ready (Inspect)	Visit Preview	Jan 11, 2023 at 0:27AM (UTC)

[andyvan-ph]

Thanks Eli, looking good. Some thoughts:

• On your comment RE: left sidebar, totally agree. The original idea was this would be a curated sidebar more like in docs, i.e. controlled via a sidebar file. This wasn't in the spec, so you weren't to know this!

• Sidebar continued: rather than the dropdown listing all the posts in a category, it would be preferable to list other blog categories, in effect creating a category > sub-category taxonomy without messing with the URL structure. Again, some kind of file to control what appears here would be ace. This would stop it become too long and unusable as well.

• Likewise, currently the blog homepage just shows all blog categories in alphabetical order. We need control over this to eliminate legacy categories, and allow us to curate the order of prominence. We don't want all categories to appear on the homepage.

• Because the homepage is no longer just all the latest blog posts in order, we need a blog category page that's effectively 'all' or 'latest' (i.e. posthog.com/blog/latest) that shows all blog posts in just date order. This is necessary for SEO reasons, and useful for readers. We could just create another category and apply to all new posts, but it would be preferable if this just auto populated like the old homepage.

• I feel like we probably shouldn't overlay the category tags on the index page pages. It's ok when there's just one, but some posts have three or more, which starts to look very noisy. Open to dissenting voices on this one, though!

• I'm 90% sure your pagination approach is all good (and very necessary) from an SEO pov, but will double check as Google can get super fussy about how it's implemented so they index it properly. Pagination vs lazy loading is certainly a lot easier to get right!

• I have now looked into the pagination and (if you want to get nerdy) this article is the best resource on this. The TL;DR is we should probably do some kind of numbered pagination to ensure Google can index deeper pages easily. Can write a more detailed recommendation if you want it.

[corywatilo]

Yep on the left bar, we should limit to a hand-picked set of top-level categories (no more than 5ish). Then any posts within those categories with other categories can show when that section is expanded.

[corywatilo]

Blog category/tag thinking

• Each post has ONE category (eg: /blog/guides/post-name)
• Posts can have MULTIPLE tags: (eg: product analytics, posthog academy)
• Only categories show in blog top-level left nav
• Once a category is expanded, we display tags that are associated with posts in that category

Slugs

• Category: /blog/categories/${category}
• Post: /blog/${postName}
• Tag: /blog/tags/${tagName}

Notes

• Tags don't show in post URLs
• Need to use canonical tag since posts can show in multiple places (eg: category, multiple tag pages)

[andyvan-ph]

I'd strongly recommend against messing with the URL structure at all, actually.

I don't have time to go deep now, but TL;DR:

• It's best SEO practice to avoid making major changes to website design and URL structure at the same time.
• There's no real need to define a difference between categories and tags, imo. Certainly no SEO benefit.
• Likewise, there's no real SEO benefit to including a category in a blog post's URL. Shorter URLs are always best.
• You always lose a little "SEO juice" when you create a 301, so we should only do it when it's 100% necessary

[andyvan-ph]

Snag 1: One of the categories seems to be generating an extra page which is just a CTA: https://posthog-35o55e3gs-post-hog.vercel.app/blog/categories/ceo-diaries/2

Snag 2: Second CTA can be a problem on index pages with fewer items: https://posthog-35o55e3gs-post-hog.vercel.app/blog/categories/hogmail

[smallbrownbike]

@andyvan-ph Good eyes!! Snag 1 & 2 fixed!