Next.js sitenizin sosyal medyada paylaşıldığında zengin bir nesne olarak görünmesini hiç istediniz mi? Öyleyse, Açık Grafik protokolünü uygulamanız gerekir.
next-seo paketi, Next.js sitenize Açık Grafik etiketleri eklemenizi kolaylaştırır. Bitmiş sonuç üzerinde daha hassas kontrol için daha manuel bir yaklaşım da kullanabilirsiniz.
Son olarak, etiketlerinize tam olarak hangi bilgileri dahil edeceğinizi düşünmek isteyeceksiniz.
Açık Grafik Nedir?
Open Graph protokolü, geliştiricilerin sosyal medyanın içeriklerini nasıl görüntülediğini kontrol etmesine izin veren açık bir standarttır. Başlangıçta Facebook tarafından geliştirilmiştir, ancak o zamandan beri diğer birçok platform protokolü benimsemiştir. Bunlara Twitter, LinkedIn ve Pinterest dahildir.
Open Graph, diğer sitelerin içeriğinizi tam olarak nasıl göstermesi gerektiğini belirlemenizi sağlayarak içeriğinizin iyi görünmesini ve kolay okunmasını sağlar. Ayrıca, bağlantıların nasıl oluşturulduğu üzerinde daha fazla kontrol sağlar. Bu, tıklamaları ve diğer etkileşim ölçümlerini izlemeyi kolaylaştırır.
Açık Grafik Protokolünü Neden Kullanmalı?
Açık Grafiğin geliştirmesi gereken üç ana alan vardır: sosyal medya etkileşimi, SEO ve web sitesi trafiği.
1. Sosyal Medya Etkileşimini Geliştirin
Açık Grafik, kullanıcıların içeriğinizi paylaşmasını kolaylaştırarak sosyal medya katılımını geliştirmeye yardımcı olabilir. Sitelerin içeriğinizi nasıl göstermesi gerektiğini belirterek, içeriğinizi görsel olarak daha çekici ve okunması kolay hale getirebilirsiniz. Bu da daha fazla paylaşım ve beğeninin yanı sıra tıklama oranlarının artmasına neden olabilir.
2. SEO’yu geliştirin
Açık Grafik ayrıca SEO’nuzu geliştirmenize yardımcı olabilir . Her içerik parçası için başlık, açıklama ve resim belirterek, arama sonuçlarında nasıl görüneceğini kontrol edebilirsiniz. Bu, genel sıralamanızı yükseltmenin yanı sıra web sitenize gelen tıklama oranını artırmanıza yardımcı olabilir.
3. Web Sitesi Trafiğini Artırın
Son olarak, Açık Grafik, web sitesi trafiğini artırmaya yardımcı olabilir. Kullanıcıların içeriğinizi paylaşmasını kolaylaştırarak, onu gören kişi sayısını artırabilirsiniz. Bu da, daha fazla web sitesi ziyaretçisine ve artan trafiğe yol açabilir.
4. Kullanıcı Deneyimini İyileştirin
Açık Grafik protokolünü kullanmanın bir başka yararı da, web sitenizdeki kullanıcı deneyimini iyileştirebilmesidir. Meta verileri dahil ederek erişilebilirliğe yardımcı olabilir ve verileri yeniden kullanarak kullanıcıların en alakalı bilgileri görmesini sağlayabilirsiniz. Bu, sitenizde daha iyi bir genel deneyim sağlayabilir ve bu da daha fazla geri gelen ziyaretçiye yol açabilir.
Neden Next.js’yi Kullanmalı?
Next.js’yi kullanmanın iki ana nedeni vardır: performansı artırmak ve geliştirmeyi kolaylaştırmak.
1. Performansı Artırın
Next.js, uygulamanızı kodlara bölerek ve kaynakları önceden getirerek performansı artırmaya yardımcı olabilir. Bu, daha hızlı yükleme süresine ve azaltılmış sunucu yüküne yol açabilir.
2. Geliştirmeyi Kolaylaştırın
Next.js, sunucu tarafından oluşturulan React uygulamaları oluşturmak için basit bir yol sağlayarak geliştirmeyi de kolaylaştırabilir . Bu, React uygulamalarını geliştirmeyi ve dağıtmayı daha hızlı ve daha kolay hale getirebilir.
Next.js’de Açık Grafik Protokolü Nasıl Uygulanır?
Next.js’de Açık Grafik Protokolü uygulamanın iki yolu vardır: next-seo paketini kullanmak veya özel bir _document.js dosyası oluşturmak.
Yöntem 1: next-seo Paketini Kullanma
Next.js’de Open Graph Protocol uygulamanın en kolay yolu next-seo paketini kullanmaktır. Bu paket sizin için gerekli etiketleri otomatik olarak oluşturacaktır.
next-seo paketini kurmak için aşağıdaki komutu çalıştırın:
npm install next-seo –save
Paketi kurduktan sonra index.js dosyanıza aşağıdaki kodu ekleyerek kullanabilirsiniz :
import { NextSeo } from ‘next-seo’;
const DemoPage = () => (
<>
<NextSeo
title=”Your Title”
description=”This is a demo description”
canonical=”https://www.example.com”
openGraph={{
url: ‘https://www.example.com’,
title: ‘Open Graph Title’,
description: ‘Open Graph Description’,
images: [
{
url: ‘https://www.example.com/og-image01.jpg’,
width: 800,
height: 600,
alt: ‘Og Image Alt’,
type: ‘image/jpeg’,
},
{
url: ‘https://www.example.com/og-image02.jpg’,
width: 900,
height: 800,
alt: ‘Og Image Alt Second’,
type: ‘image/jpeg’,
},
{ url: ‘https://www.example.com/og-image03.jpg’ },
{ url: ‘https://www.example.com/og-image04.jpg’ },
],
site_name: ‘YourSiteName’,
}}
twitter={{
handle: ‘@handle’,
site: ‘@site’,
cardType: ‘summary_large_image’,
}}
/>
<p>Demo Page</p>
</>
);
export default DemoPage;
Bu kod, NextSeo bileşenini next-seo paketinden alır ve sayfanın başlığını, açıklamasını ve resmini belirtmek için kullanır. Ayrıca site adını ve Twitter tanıtıcısını da belirtir.
Geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın:
npm run dev
Demo sayfasını görmek için tarayıcınızda http :// localhost : 3000’i açın .
Next.js sayfası ile
Yöntem 2: Özel _document.js Dosyasını Kullanma
Next.js’de Açık Grafik Protokolü uygulamanın başka bir yolu da özel bir _document.js dosyası oluşturmaktır. Bu dosya, Açık Grafik etiketlerini kendiniz belirlemenize ve tüm sayfalar için yeniden kullanılabilir kod oluşturmanıza olanak tanır.
Özel bir _document.js dosyası ayarlamak için , sayfalar dizininizde aşağıdaki içeriklerle yeni bir dosya oluşturun :
import Document, { Html, Head, Main, NextScript } from ‘next/document’;
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { …initialProps };
}
render() {
return (
<Html>
<Head>
<meta property=”og:url” content=”https://www.example.com” />
<meta property=”og:title” content=”Open Graph Title” />
<meta property=”og:description” content=”Open Graph Description” />
<meta property=”og:image” content=”https://www.example.com/og-image.jpg” />
<meta property=”og:site_name” content=”YourSiteName” />
<meta name=”twitter:card” content=”summary_large_image” />
<meta name=”twitter:site” content=”@site” />
<meta name=”twitter:creator” content=”@handle” />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Aşağıdaki içeriği index.js dosyanıza ekleyin:
const DemoPage = () => (
<>
<p>Demo Page</p>
</>
);
export default DemoPage;
Bu kod, Document bileşenini next/document’ten içe aktarır ve özel bir MyDocument bileşeni oluşturur. Sayfamızın başlığını, açıklamasını ve görselinin yanı sıra site adını ve Twitter tanıtıcısını belirtir.
Geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın:
npm run dev
Demo sayfasını görmek için tarayıcınızda http :// localhost : 3000’i açın .
Next.js sayfası ile
OG Etiketleri ile Web Sitesi Sıralamasını İyileştirin
Web sitenize Açık Grafik etiketleri eklemek, sosyal medya gönderilerinde nasıl göründüğü konusunda size daha fazla kontrol verebilir ve tıklama oranlarını iyileştirmeye yardımcı olabilir. Ayrıca, web sitenizin SERP’lerde görünme şeklini iyileştirebilirsiniz, bu da sonuçta web sitesi sıralamasında iyileşmeye yol açabilir.
Site sıralamasını iyileştirmenin başka birçok yolu da vardır. Web sitenizi mobil cihazlar için optimize etmeli ve anahtar kelime açısından zengin başlıklar ve açıklamalar kullanmalısınız. Ancak Açık Grafik etiketlerini kullanmak, başlamanın hızlı ve kolay bir yoludur.