My First Post

Welcome to our blog! This is the first post...

**Why?**
- `title` → `<title>` tag for SEO  
- `description` → meta description  
- `slug` → clean URL generation  
- `tags` → internal linking & keyword clustering  
- `image` → social sharing (Open Graph, Twitter Card)

---

### **2. Directory Organization**

content/blog/ 2024-07-my-first-post.md 2024-07-seo-best-practices.md 2024-07-nextjs-blog-routing.md

Naming with date helps chronological sorting.

---

### **3. Public Assets**
Images referenced in frontmatter should live in:

public/images/posts/ my-first-post-cover.jpg seo-best-practices-cover.jpg

This avoids broken links and keeps them organized.

---

### **4. Helper Functions**
In `lib/blog.ts`:
```typescript
import fs from "fs";
import path from "path";
import matter from "gray-matter";

const postsDirectory = path.join(process.cwd(), "content/blog");

export function getAllPosts() {
  const fileNames = fs.readdirSync(postsDirectory);
  return fileNames.map(fileName => {
    const slug = fileName.replace(/\.md$/, "");
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, "utf8");
    const { data, content } = matter(fileContents);
    return { ...data, slug, content };
  });
}

5. SEO Integration

When rendering a blog post (app/blog/[slug]/page.tsx):

• Use metadata in Next.js page.tsx:

export const metadata = ({ params }) => {
  const post = getPostBySlug(params.slug);
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [post.image],
    },
  };
};