📝

Claude Code Rehberi

Blog / İçerik Sitesi

SEO odaklı, MDX/Markdown destekli içerik platformu.

Orta 1-2 günÖrnek: Niche blog, magazin, eğitim

Blog/içerik sitesi = uzun vadeli organic trafik + otorite inşası. MDX (Markdown + JSX karışımı) = yazıyı VS Code'da rahatça yaz, code/component göm. SEO odaklı: schema, sitemap, RSS, search, related posts. Newsletter entegrasyonu = okuyucu → e-posta listesi → gelecekte satış. Niche blog, sektörel magazin, kurs/eğitim platformu.

Kim İçin Uygun?

Niche uzmanlık alanı olanlar (developer, marketing, finans)
Sektörel uzmanlar (avukat, doktor, danışman)
Online kurs eğitmenleri (içerik = trafik)
Personal brand inşa edenler

Tipik Özellikler

Blog / İçerik Sitesi için olmazsa olmazlar

MDX ile yazı + component

Yazı içine interaktif demo, video, kod örneği gömebilirsin.

Tag/kategori sistemi

Yazılar etiketle, kategoriye göre filtrele.

Arama (client-side)

Fuse.js veya Pagefind ile anında arama, search-as-you-type.

İlgili yazılar

Her yazının altında 3 benzer yazı (tag bazlı veya AI embedding).

Newsletter signup

Footer ve sidebar'da. Mailerlite/Brevo entegrasyonu.

RSS feed + sitemap

Otomatik üretilir. RSS okuyucular için.

Yorum sistemi (opsiyonel)

Giscus (GitHub Discussions) — ücretsiz, spam yok.

Reading time + progress bar

Yazının başında '5 dk okuma', üstte scroll progress.

Önerilen Yığın

Next.js 14 + MDX Tailwind + Typography plugin Pagefind (arama) Giscus (yorum) Mailerlite/Brevo (newsletter) Vercel

Adım Adım Kurulum

7 adımda yayında

Niş belirle (önemli!)

'Genel teknoloji blog' yok — boğulursun. 'Next.js + Supabase ile SaaS kurma' gibi spesifik niş. SEO daha kolay.

İlk 10 yazı planla (60 dk)

Başlık + anahtar kelime + uzunluk + hedef kitle. Ahrefs veya Ubersuggest ile kelime hacmi gör.

Claude Code kur (60 dk)

'Next.js 14 + MDX + Tailwind ile blog kur. /blog, /blog/[slug], /etiket/[tag]. RSS, sitemap, search, related posts.'

$ claude "Next.js 14 App Router + MDX + Tailwind ile niche blog. Yapı: anasayfa (son yazılar), /blog (tüm yazılar + pagination), /blog/[slug], /etiket/[tag], /hakkimda. RSS feed + sitemap. Pagefind ile search. Tailwind typography plugin."

İlk 3 yazıyı yaz (180 dk)

MDX dosyaları /content/blog'a. Frontmatter + içerik. Görseller /public/blog. Claude'la AI taslak + sen edit.

SEO + schema (45 dk)

Her yazıda Article JSON-LD. Meta + OG image (otomatik üretilebilir — vercel/og kullan).

Newsletter + yorum (45 dk)

Mailerlite signup form + Giscus yorum embed. Footer'a hep göster.

Deploy + ilk paylaşım (30 dk)

Vercel + custom domain. İlk 3 yazıyı sosyal medyada paylaş — feedback al.

Önemli · Video Slider Rehberi

Blog / İçerik Sitesi'da Video / Slider Nasıl Yapılır?

Eğitim blog'larında video gömme = engagement 4× artar. Magazin tarzı blog'larda hero carousel = haber sitesi hissi. Video tutorial içeren yazılarda izleme süresi = SEO sinyali.

YouTube embed (en kolay)

Doğrudan iframe — ama yavaş. Alternatif: lite-youtube-embed (5× hızlı).

npm install lite-youtube-embed

// MDX yazısında:
import LiteYouTubeEmbed from 'react-lite-youtube-embed';
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';

<LiteYouTubeEmbed
  id="VIDEO_ID"
  title="Tutorial başlığı"
  poster="maxresdefault"
/>

Self-hosted video (kontrol için)

MP4'ü Vercel'de (max 4.5MB) veya R2/S3'te tut. Plyr ile güzel player:

npm install plyr-react

import Plyr from 'plyr-react';
import 'plyr-react/plyr.css';

<Plyr
  source={{
    type: 'video',
    sources: [{ src: '/videos/tutorial.mp4', type: 'video/mp4' }],
    poster: '/videos/poster.jpg',
  }}
  options={{ ratio: '16:9' }}
/>

Ana sayfa hero carousel (magazin tarzı)

Manşet niteliğinde 3-5 yazı/video. Swiper.js ile autoplay carousel:

<Swiper
  modules={[Autoplay, Pagination, EffectFade]}
  effect="fade"
  autoplay={{ delay: 6000 }}
  pagination={{ clickable: true }}
  loop
  className="h-[60vh]"
>
  {featuredPosts.map(post => (
    <SwiperSlide key={post.slug}>
      <Link href={`/blog/${post.slug}`} className="block h-full relative">
        <Image src={post.image} fill alt={post.title} priority />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
        <div className="absolute bottom-12 left-12 right-12 text-white">
          <span className="text-amber-400 uppercase tracking-wider text-sm">{post.category}</span>
          <h2 className="text-5xl font-bold mt-3">{post.title}</h2>
          <p className="mt-3 text-lg opacity-90">{post.excerpt}</p>
        </div>
      </Link>
    </SwiperSlide>
  ))}
</Swiper>

Yazı içinde video grid (kurs tarzı)

8-10 video tutorial içeren yazı için: grid + her videoda thumbnail + süre badge.

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-8">
  {tutorials.map(t => (
    <div key={t.id} className="group cursor-pointer" onClick={() => setActiveVideo(t.id)}>
      <div className="relative aspect-video rounded-lg overflow-hidden">
        <img src={t.thumbnail} className="w-full h-full object-cover group-hover:scale-105 transition" />
        <span className="absolute bottom-2 right-2 bg-black/80 text-white px-2 py-0.5 text-xs rounded">{t.duration}</span>
        <PlayCircleIcon className="absolute inset-0 m-auto w-16 h-16 text-white opacity-80 group-hover:opacity-100 transition" />
      </div>
      <h3 className="mt-3 font-bold">{t.title}</h3>
    </div>
  ))}
</div>

Video transkripti (SEO için)

Önemli! Google video içeriğini okuyamaz. Yazılı transkript koyar, ranking 3-5× artar.

<details className="my-6 border rounded-lg p-4">
  <summary className="cursor-pointer font-bold">📝 Video transkripti (gizli, SEO için)</summary>
  <div className="mt-4 text-sm space-y-2">
    [Tam transkripti buraya yapıştır]
  </div>
</details>

Otomatik thumbnail (Vercel OG)

Her yazı için otomatik OG image üret — başlık + yazar + tarih içeren güzel kart. Sosyal medya paylaşımı için altın.

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og';

export default async function Image({ params }) {
  const post = await getPost(params.slug);
  return new ImageResponse(
    (
      <div style={{ background: '#0A1530', color: 'white', padding: 60, display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ fontSize: 24, opacity: 0.7 }}>{post.category}</div>
        <div style={{ fontSize: 72, fontWeight: 800, marginTop: 'auto' }}>{post.title}</div>
        <div style={{ fontSize: 24, marginTop: 20 }}>{post.author} · {post.date}</div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Hazır Promptlar

Claude Code'a Yapıştır

Köşeli parantezleri kendi içeriğinizle değiştirin.

MDX blog kurulum

Aç ▾

Next.js 14 + MDX ile blog kur:

İçerik dizini: /content/blog/*.mdx
Frontmatter: title, description, date, author, tags[], image, readTime

Özellikler:
- /blog: tüm yazılar grid + pagination (10/sayfa)
- /blog/[slug]: yazı detay + reading progress bar + ilgili yazılar
- /etiket/[tag]: etikete göre filtrelenmiş
- /yazar/[name]: yazara göre
- /rss.xml ve /sitemap.xml otomatik
- /search: Pagefind ile client-side arama

Tailwind Typography plugin ile prose styling.
Article JSON-LD her detayda.
OG image otomatik üretimi (vercel/og).

Newsletter signup

Aç ▾

Newsletter signup form ekle (footer + sidebar):

- 1 input (e-posta) + 1 buton
- POST /api/newsletter
- Mailerlite veya Brevo API
- localStorage'da 'subscribed' flag — tekrar gösterme
- Success: 'Teşekkürler, hoş geldin e-postası 5 dk içinde'
- KVKK onay checkbox zorunlu
- Welcome e-posta hazır (Mailerlite automation)

Bonus: ana yazıdan sonra inline 'beğendiyseniz haftalık özet' kutusu — daha yüksek dönüşüm.

İlgili yazılar algoritması

Aç ▾

Yazı detay sayfasında 'İlgili yazılar' bölümü:

3 yazı önerisi, sıralama mantığı:
1. Aynı tag'lere sahip yazılar (öncelik 1)
2. Aynı kategori (öncelik 2)
3. Yazı tarihi yakın (öncelik 3)

Her yazı kartı: image + title + readTime + tags
Bonus: yazının ilk paragrafından AI embedding üretip semantic benzer yazıları öner (pgvector).

Footer'da 'tüm yazılar' linki, yan sayfada 'önceki/sonraki yazı'.

Gerçek Örnek

Bu rehberden gerçek bir vaka

Brief

Next.js + Supabase ile SaaS kurma niş'inde blog. Hedef: aylık 50K organic trafik, 5K e-posta listesi.

Sonuç

1 günde: blog iskeleti + 3 örnek yazı + tag/search/RSS + newsletter + Giscus yorum. Vercel'de canlı. Sonraki 6 ay: haftalık 2 yazı taahhüdü.

Next.js + MDXTailwind TypographyPagefindMailerliteGiscusVercel

Sık Hatalar

Bunlardan kaçının

Hata

Yazıyı yazıyor ama yayınlamıyor (perfectionism)

Çözüm

Done > Perfect. İlk 3 yazıyı yayınla, sonra düzelt. Sıfırıncı yazı asla yayınlanmıyor.

Hata

SEO için kelime doldurma

Çözüm

Anahtar kelime doğal akışta 5-10 defa geçsin. Daha fazla = Google ceza. Önemli olan içerik kalitesi.

Hata

Görsel kullanmıyor — duvar metin

Çözüm

Her 200 kelimede bir görsel/diyagram/kod örneği. Okuyucu nefes alır, dwell time artar.

SSS

Blog / İçerik Sitesi için sık sorular

WordPress'ten daha mı iyi?▾

Performans için kesinlikle (Next.js Lighthouse 95+, WordPress 60-70). SEO için fark yok. Yazar deneyimi: WordPress daha kolay (visual editor). Next.js MDX = developer için altın, marketer için VS Code öğrenme eğrisi.

Kaç yazı sonra trafik gelir?▾

İlk 6 ay neredeyse hiçbir şey. 6-12. ay arasında artmaya başlar. 12+ ay sonra üstel. 30 kaliteli yazı = Google'da otorite. Sabır + sürekli yayın.

Para nasıl kazanılır?▾

3 kanal: 1) Newsletter sponsorluk (1000 abone sonrası) 2) Kendi ürünüm (kurs, kitap, SaaS) 3) Affiliate (Amazon, yazılım). Adsense reklam küçük, kullanıcı deneyimini bozar.