How to Add Related Posts to Squarespace

Every major blogging platform has a “related posts” feature except Squarespace. WordPress has it built in. Ghost has it built in. Squarespace gives you a summary block that shows your most recent posts, but nothing that actually matches content by topic or category.

This is a problem because related posts are one of the highest-impact engagement features you can add to a blog. They keep readers on your site longer, reduce bounce rate, and give older content a second life. Here's how to build them yourself using Squarespace's own JSON API.

The JSON API Approach

Every Squarespace blog page has a hidden JSON endpoint. If your blog lives at /blog, you can access all your post data at /blog?format=json. This returns every post with its title, URL, excerpt, featured image, tags, and categories.

The technique is straightforward: fetch the JSON feed, compare the current post's tags or category against all other posts, find the best matches, and render them at the bottom of the article. All of this happens client-side in a small script you add to Code Injection.

// Fetch blog posts and find related content
(function() {
  const blogUrl = '/blog?format=json';
  const currentUrl = window.location.pathname;

  fetch(blogUrl)
    .then(res => res.json())
    .then(data => {
      const posts = data.items;
      const current = posts.find(p => p.fullUrl === currentUrl);
      if (!current || !current.tags) return;

      // Score posts by shared tags
      const scored = posts
        .filter(p => p.fullUrl !== currentUrl)
        .map(p => ({
          ...p,
          score: (p.tags || [])
            .filter(t => current.tags.includes(t)).length
        }))
        .filter(p => p.score > 0)
        .sort((a, b) => b.score - a.score)
        .slice(0, 3);

      renderRelated(scored);
    });
})();

This script runs on every blog post page. It pulls the full post list, finds the current post by URL, then scores every other post based on how many tags they share. The top three matches become your related posts.

Rendering the Related Posts Section

Once you have the matched posts, you need to render them into the page. The cleanest approach creates a grid of cards with thumbnails, titles, and excerpts that match your site's design language.

function renderRelated(posts) {
  if (!posts.length) return;

  const container = document.createElement('div');
  container.className = 'related-posts';
  container.innerHTML = `
    <h3>Related Posts</h3>
    <div class="related-posts-grid">
      ${posts.map(p => `
        <a href="${p.fullUrl}" class="related-post-card">
          <img src="${p.assetUrl}?format=500w"
               alt="${p.title}" loading="lazy" />
          <h4>${p.title}</h4>
          <p>${p.excerpt || ''}</p>
        </a>
      `).join('')}
    </div>
  `;

  // Insert after blog content
  const content = document.querySelector('.blog-item-content');
  if (content) content.after(container);
}

The .blog-item-content selector targets the main blog post body in Squarespace 7.1. The related posts section gets injected directly after it, appearing before the comments section if you have one enabled.

Styling the Layout

The related posts grid needs CSS to look presentable. A three-column grid on desktop that stacks to a single column on mobile is the standard pattern. Add this to your Custom CSS panel or header Code Injection.

/* Related posts grid */
.related-posts {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #e5e5e5;
}

.related-posts h3 {
  font-size: 18px;
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-post-card {
  text-decoration: none;
  color: inherit;
}

.related-post-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 4px;
}

.related-post-card h4 {
  font-size: 15px;
  margin-top: 12px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
}

Why This Matters for Engagement

Sites with related posts sections see measurably longer session durations. When a reader finishes your article, they either leave or they click something else. Without related posts, the only options are your navigation menu or the back button. Related posts put three relevant next steps right where the reader's attention already is.

The tag-matching approach works better than showing recent posts because relevance drives clicks. A reader who just finished your article about email marketing does not want to see your post about logo design. They want content that continues the thread they're already engaged with.

Getting the JavaScript, tag matching, and responsive CSS right takes some iteration. Our related posts generator handles the complete setup, including fallback behavior when a post has no tag matches, and outputs production-ready code you paste into Code Injection.

No plugin subscription required. The code runs entirely in the browser using Squarespace's own data, so there are no external API calls, no load time penalty, and no privacy concerns.