Magazine Layout - Blog Posts That Convert

Quick Start

Magazine layout is your blog post layout with rich metadata, social sharing, and SEO features. Here's how to create one:

1. Create a Markdown Post

---
# src/content/blog/my-first-post.md
layout: magazine
title: "Getting Started with Local SEO"
description: "Complete guide to local SEO for small businesses"
publishDate: 2025-10-28
author: "Jane Smith"
authorTitle: "SEO Specialist"
category: "SEO"
tags: ["local-seo", "google-my-business", "citations"]
heroImage: "/images/hero/local-seo.jpg"
heroImageAlt: "Local business on Google Maps"
---

## Your Content Here

Write your blog post content in Markdown...

2. Or Create as an Astro Page

---
// src/pages/blog/my-post.astro
import Layout from '@theme/layouts/Layout.astro';
import Hero from '@theme/components/sections/Hero.astro';
import AuthorBio from '@theme/components/ui/AuthorBio.astro';
import SocialShare from '@theme/components/ui/SocialShare.astro';

const title = 'Getting Started with Local SEO';
const description = 'Complete guide to local SEO...';
const publishDate = new Date('2025-10-28');
---

<Layout title={title} description={description}>
  <Hero
    variant="centered"
    heading={title}
    description={description}
    heroImage="/images/hero/local-seo.jpg"
    heroImageAlt="Local business on Google Maps"
  />

  <article class="py-16 bg-white dark:bg-slate-950">
    <div class="container mx-auto px-4 max-w-4xl">
      <div class="prose prose-lg dark:prose-invert mx-auto">
        <!-- Your content -->
      </div>

      <SocialShare title={title} />
      <AuthorBio name="Jane Smith" title="SEO Specialist" />
    </div>
  </article>
</Layout>

3. What You Get Automatically

• BlogPosting schema markup for SEO
• Author byline with profile link
• Publish date and read time estimate
• Social sharing buttons (Twitter, LinkedIn, Facebook)
• Related posts suggestions
• Open Graph and Twitter Card meta tags