Next.js App Router Dinamik Site Haritası ve SEO Meta Verileri
İçindekiler:
- Giriş
- Site Haritası Oluşturma
- Meta Etiketleri Ekleme
- Google Arama Konsolu'nda Site ve Site Haritası Ekleme
- Open Graph Verileri Eklemek
- Twitter Kartları Eklemek
- Site Haritası ve Meta Etiketlerini Test Etme
- Blog Gönderileri İçin Ayrı Meta Etiketleri Oluşturma
- Sonuç
📝Giriş
Herkese merhaba! Bugün size, next.js ve app router kullanarak oluşturulmuş bir web sitesini göstermek istiyorum. Bu siteye dinamik bir site haritası eklemek ve siteye bazı ek meta etiketleri eklemek istiyorum. Bu makalede, site haritası oluşturma sürecini adım adım anlatacağım. Ardından, meta etiketlerini eklemek için yapmanız gerekenleri size göstereceğim.
🗺️Site Haritası Oluşturma
Site haritası, SEO açısından oldukça önemlidir. Bu nedenle, web sitenizin Google ve diğer arama motorları tarafından taranabilmesi ve sitenizdeki sayfaların ne olduğunu bilmesi gerekmektedir. Next.js dokümantasyonunda, statik bir site haritası veya dinamik bir site haritası oluşturma seçeneği olduğunu görebilirsiniz. Biz dinamik bir site haritası oluşturacağız çünkü sürekli olarak yeni gönderiler ekliyoruz ve bunları manuel olarak site haritasına eklemek zor olabilir.
Öncelikle, pages klasörü altında sitemap.ts adında yeni bir dosya oluşturmanız gerekmektedir. Ardından, aşağıdaki kodu bu dosyaya eklemelisiniz:
// sitemap.ts
import { GetServerSideProps, NextApiRequest, NextApiResponse } from 'next';
import { getPosts } from '../utils/api';
const Sitemap = () => {};
export const getServerSideProps: GetServerSideProps = async ({
req,
res,
...rest
}) => {
const baseUrl = req ? `${req.headers.host}` : "";
const posts = await getPosts(); // Burada gönderilerinizi alacak bir fonksiyon kullanmanız gerekmektedir.
let xml = `<?xml version="1.0" encoding="UTF-8"?>`;
xml += `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`;
xml += `<url>
<loc>https://${baseUrl}</loc>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>`;
// Diğer sayfaları da sitemape ekleyebilirsiniz
xml += `<url>
<loc>https://${baseUrl}/about</loc>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>`;
posts.forEach((post) => {
xml += `<url>
<loc>https://${baseUrl}/posts/${post.slug}</loc>
<lastmod>${post.updatedAt}</lastmod>
<changefreq>daily</changefreq>
<priority>0.5</priority>
</url>`;
});
xml += `</urlset>`;
res.setHeader("Content-Type", "text/xml");
res.write(xml);
res.end();
return {
props: {},
};
};
export default Sitemap;
Bu kod, bir site haritası oluşturacak ve sitemap.xml adıyla servis edecektir. Site haritası, ana sayfa (/), hakkında sayfası (/about) ve tüm gönderileri (/posts/:slug) içerecektir. Daha fazla sayfa eklemek veya değiştirmek isterseniz, ilgili <url> elemanlarını ekleyebilir veya düzenleyebilirsiniz. Site haritası, her sayfanın changefreq (daha sıklıkla güncellenen sayfaların sık sık taranması için kullanılır) ve priority (sayfanın önem derecesini belirtir) gibi özelliklerini de içermektedir.
Site haritası oluşturduktan sonra, bu haritayı Google ve diğer arama motorlarına bildirmek önemlidir. Bu süreci tamamlamak için, Google Arama Konsolu'na gidip web sitenizi eklemeli ve site haritası URL'sini eklemelisiniz. Bu sayede Google, web sitenizi tarayacak ve sayfalarınızı dizine ekleyecektir.
✨Meta Etiketleri Ekleme
Next.js'de meta etiketlerini eklemek için, _document.js dosyası yerine Layout bileşenini kullanırız. Layout bileşeninde Head bileşeni kullanarak meta etiketlerini eklemeniz gerekmektedir.
// Layout.tsx
import Head from 'next/head';
const Layout = ({ children }) => {
return (
<>
<Head>
<title>Web Sitemin Başlığı</title>
<meta name="description" content="Web sitemin açıklaması" />
{/* Diğer meta etiketlerini buraya ekleyebilirsiniz */}
</Head>
{children}
</>
);
};
export default Layout;
Bu örnekte, title ve description meta etiketlerini nasıl ekleyeceğimizi görebilirsiniz. Eklemek istediğiniz başka meta etiketleri varsa, aynı şekilde Head bileşeni içine ekleyebilirsiniz.
🌐Google Arama Konsolu'nda Site ve Site Haritası Ekleme
Web sitenizi Google'a bildirmek için Google Arama Konsolu'na gidip web sitenizi eklemelisiniz. Aşağıdaki adımları takip ederek bu işlemi gerçekleştirebilirsiniz:
- Google Arama Konsolu'na giriş yapın.
- Sol üst köşede yer alan "Emlak Bulucu" düğmesine tıklayın.
- Web sitenizi eklemek istediğiniz etki alanını girin ve "Devam" düğmesine tıklayın.
- Web sitenizi doğrulamak için sunulan seçeneklerden birini seçin ve talimatları izleyin.
- Web sitenizi doğruladıktan sonra, sol tarafta bulunan menüden "Site Haritaları" seçeneğine tıklayın.
- "Site Haritası Ekle" düğmesine tıklayın ve oluşturduğunuz site haritasının URL'sini girin (
sitemap.xml).
Bu adımları takip ettikten sonra, web siteniz ve site haritanız Google'a bildirilmiş olacaktır. Google, sitenizin tüm sayfalarını tarayacak ve dizine ekleyecektir.
🌐Open Graph Verileri Eklemek
Open Graph, web sitenizin Facebook ve diğer sosyal medya platformlarındaki paylaşımlarda nasıl gözükeceğini kontrol etmenizi sağlayan bir protokoldür. Open Graph verilerini eklemek için metadata nesnesini kullanmalısınız.
// Layout.tsx
import Head from 'next/head';
const Layout = ({ children }) => {
const title = "Web Sitemin Başlığı";
const description = "Web sitemin açıklaması";
const ogImageUrl = "/images/og-preview.jpg";
// Diğer open graph verilerini de buraya ekleyebilirsiniz
const ogTitle = title;
const ogDescription = description;
return (
<>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
{/* Open Graph verilerini ekleyin */}
<meta property="og:title" content={ogTitle} />
<meta property="og:description" content={ogDescription} />
<meta property="og:image" content={ogImageUrl} />
{/* Diğer open graph verilerini buraya ekleyebilirsiniz */}
</Head>
{children}
</>
);
};
export default Layout;
Bu örnekte, og:title, og:description ve og:image gibi bazı Open Graph verilerini nasıl ekleyeceğinizi görebilirsiniz. Daha fazla Open Graph verisi eklemek isterseniz, aynı şekilde Head bileşeni içine ekleyebilirsiniz.
🐦Twitter Kartları Eklemek
Twitter kartları, web sitenizin Twitter'da nasıl gözükeceğini kontrol etmenizi sağlar. Twitter kartlarını eklemek için aynı metadata nesnesini kullanmanız gerekmektedir.
// Layout.tsx
import Head from 'next/head';
const Layout = ({ children }) => {
const title = "Web Sitemin Başlığı";
const description = "Web sitemin açıklaması";
const ogImageUrl = "/images/og-preview.jpg";
// Diğer twitter kartı verilerini de buraya ekleyebilirsiniz
const twitterTitle = title;
const twitterDescription = description;
return (
<>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
{/* Twitter kartı verilerini ekleyin */}
<meta name="twitter:title" content={twitterTitle} />
<meta name="twitter:description" content={twitterDescription} />
<meta name="twitter:image" content={ogImageUrl} />
{/* Diğer twitter kartı verilerini buraya ekleyebilirsiniz */}
</Head>
{children}
</>
);
};
export default Layout;
Bu örnekte, twitter:title, twitter:description ve twitter:image gibi bazı Twitter kartı verilerini nasıl ekleyeceğinizi görebilirsiniz. Daha fazla Twitter kartı verisi eklemek isterseniz, aynı şekilde Head bileşeni içine ekleyebilirsiniz.
🧪Site Haritası ve Meta Etiketlerini Test Etme
Site haritanızı ve meta etiketlerinizi test etmek için birkaç araç bulunmaktadır. İşte test etmek için kullanabileceğiniz bazı araçlar:
- XML Sitemaps: Site haritasını oluşturduktan sonra bu aracı kullanarak site haritanızı kontrol edebilir ve hataları düzeltebilirsiniz.
- Facebook Share Debugger: Facebook tarafından sağlanan bu araç, Open Graph verilerinizi ve nasıl gözükeceğini kontrol etmenizi sağlar.
- Twitter Card Validator: Bu araç, Twitter kartlarınızı kontrol etmenizi sağlar.
Bu araçları kullanarak site haritanızı ve meta etiketlerinizi doğrulayabilir ve istediğiniz gibi düzenleyebilirsiniz.
📝Blog Gönderileri İçin Ayrı Meta Etiketleri Oluşturma
Web sitenizde yayınladığınız blog gönderileri için ayrı meta etiketleri oluşturmak isterseniz, her blog gönderisi için ayrı bir sayfa oluşturmanız gerekmektedir. Bu sayfada, blog gönderisinin title, description gibi bilgilerini kullanarak meta etiketlerini oluşturabilirsiniz.
// BlogPost.tsx
import Head from 'next/head';
const BlogPost = ({ title, description, ...rest }) => {
const ogTitle = title;
const ogDescription = description;
// Diğer blog gönderisi için özel meta etiketlerini de buraya ekleyebilirsiniz
return (
<>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
{/* Open Graph verilerini ekleyin */}
<meta property="og:title" content={ogTitle} />
<meta property="og:description" content={ogDescription} />
{/* Diğer blog gönderisi için özel Open Graph verilerini buraya ekleyebilirsiniz */}
</Head>
{/* Blog gönderisi içeriği */}
</>
);
};
export default BlogPost;
Bu örnekte, title ve description gibi blog gönderisi bilgilerini kullanarak ayrı meta etiketlerini oluşturduk. Bu şekilde her blog gönderisi için özelleştirilmiş meta etiketlerini kullanabilirsiniz.
🎉Sonuç
Bu makalede, next.js kullanarak dinamik bir site haritası ve meta etiketleri nasıl ekleyeceğimizi öğrendik. Site haritası, web sitenizin arama motorları tarafından taranmasını ve dizine eklenmesini sağlar. Meta etiketleri, web sitenizin önizlemesini ve paylaşımlarını nasıl gösterceğini belirler. Bu bilgileri düzgün bir şekilde ekleyerek SEO performansınızı artırabilir ve web sitenizin daha iyi sonuçlar elde etmesini sağlayabilirsiniz.
Artık web sitenizin düzgün bir şekilde indekslendiğinden ve önizlendiğinden emin olabilirsiniz. İyi çalışmalar!
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
