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.

Sonraki seo paketi, Next.js sitenize Açık Grafik etiketleri eklemeyi 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 ekleyeceğinizi düşünmek isteyeceksiniz.

Açık Grafik Nedir?

Açık Grafik protokolü, geliştiricilerin sosyal medyanın içeriklerini nasıl görüntülediğini kontrol etmelerini sağlayan açık bir standarttır. Başlangıçta Facebook tarafından geliştirildi, ancak diğer birçok platform o zamandan beri protokolü benimsedi. Bunlara Twitter, LinkedIn ve Pinterest dahildir.

Open Graph, diğer sitelerin içeriğinizi tam olarak nasıl görüntülemesi gerektiğini belirlemenize olanak tanıyarak iyi görünmesini ve okunması kolay olması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 metriklerini izlemeyi kolaylaştırır.

instagram viewer

Neden Açık Grafik Protokolü Kullanılır?

Open Graph'in geliştirmesi gereken üç ana alan vardır: sosyal medya etkileşimi, SEO ve web sitesi trafiği.

Open Graph, kullanıcıların içeriğinizi paylaşmasını kolaylaştırarak sosyal medya etkileşimini artırmaya yardımcı olabilir. Sitelerin içeriğinizi nasıl görüntülemesi gerektiğini belirterek, onu görsel olarak daha çekici ve okunması kolay hale getirebilirsiniz. Bu da, daha fazla paylaşım ve beğeninin yanı sıra artan tıklama oranlarına yol açabilir.

2. SEO'yu geliştirin

Open Graph da yardımcı olabilir SEO'nuzu geliştirin. Her içerik parçası için başlık, açıklama ve resim belirleyerek, içeriğin arama sonuçlarında nasıl görüneceğini kontrol edebilirsiniz. Bu, web sitenize tıklama oranını artırmanın yanı sıra genel sıralamanızı iyileştirmeye yardımcı olabilir.

3. Web Sitesi Trafiğini Artırın

Son olarak, Open Graph, 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 trafiğin artmasına neden olabilir.

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 ekleyerek, erişilebilirliğe yardımcı olabilir ve verileri yeniden kullanabilir, böylece kullanıcıların en alakalı bilgileri görmesini sağlayabilirsiniz. Bu, sitenizde daha iyi bir genel deneyime yol açabilir ve bu da daha fazla geri gelen ziyaretçiye yol açabilir.

Neden Next.js'yi Kullanmalısınız?

Next.js'yi kullanmanın iki ana nedeni vardır: performansı artırmak ve geliştirmeyi kolaylaştırmak.

1. Performans geliştirme

Next.js, uygulamanızı kod bölerek ve kaynakları önceden getirerek performansı artırmaya yardımcı olabilir. Bu, daha hızlı yükleme süresine ve sunucu yükünün azalmasına neden olabilir.

2. Geliştirmeyi Kolaylaştırın

Next.js ayrıca basit bir yol sağlayarak geliştirmeyi kolaylaştırabilir. sunucu tarafından oluşturulan React uygulamaları oluşturun. Bu, React uygulamalarını geliştirmeyi ve dağıtmayı daha hızlı ve kolay hale getirebilir.

Next.js'de Açık Grafik Protokolü Nasıl Uygulanır?

Next.js'de Open Graph Protokolü uygulamanın iki yolu vardır: next-seo paketini kullanmak veya özel bir seo paketi oluşturmak _document.js dosya.

Yöntem 1: Sonraki seo Paketini Kullanma

Next.js'de Açık Grafik Protokolü uygulamanın en kolay yolu, sonraki seo paketini kullanmaktır. Bu paket sizin için gerekli etiketleri otomatik olarak oluşturacaktır.

Sonraki seo paketini kurmak için aşağıdaki komutu çalıştırın:

npm Yüklemeksonraki-seo --kaydetmek

Paketi kurduktan sonra aşağıdaki kodu bilgisayarınıza ekleyerek kullanabilirsiniz. index.js dosya:

içe aktarmak { SonrakiSeo } itibaren 'sonraki seo';
const DemoSayfa = () => (
<>
<SonrakiSeo
 başlık="Unvanın"
 açıklama="Bu bir demo açıklamasıdır"
 kurallı="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 Başlık: 'Grafik Başlığını Aç',
 tanım: 'Açık Grafik Açıklaması',
 Görüntüler: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 genişlik: 800,
 yükseklik: 600,
 alt: 'Og Resim Alt',
 tip: 'resim/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 genişlik: 900,
 yükseklik: 800,
 alt: 'Og Görüntü Alt Saniye',
 tip: 'resim/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 site adı: 'SiteAdınız',
 }}
 twitter={{
 üstesinden gelmek: '@üstesinden gelmek',
 alan: '@alan',
 kart tipi: 'özet_large_image',
 }}
 />
<p>Demo Sayfası</p>
</>
);
ihracatvarsayılan DemoSayfası;

Bu kod, NextSeo bileşenini sonraki seo paketinden içe aktarı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 çalıştırma dev

Açık http://localhost: Demo sayfasını görmek için tarayıcınızda 3000.

Yöntem 2: Özel _document.js Dosyasını Kullanma

Next.js'de Açık Grafik Protokolü uygulamanın başka bir yolu, özel bir _document.js dosya. Bu dosya, Open Graph etiketlerini kendiniz belirlemenize ve yeniden kullanılabilir kod oluştur tüm sayfalar için.

Özel ayarlamak için _document.js dosyanızda yeni bir dosya oluşturun sayfalar aşağıdaki içeriğe sahip dizin:

içe aktarmak Belge, { Html, Head, Main, NextScript } itibaren 'sonraki/belge';
sınıfDokümanımuzanırBelge{
statikzaman uyumsuz getInitialProps (ctx) {
const başlangıçProps = beklemek Document.getInitialProps (ctx);
dönüş { ...initialProps };
 }


render() {
dönüş (
<HTML>
<Kafa>
<meta özellik="ög: url" içerik="https://www.example.com" />
<meta özellik="bkz: başlık" içerik="Grafik Başlığını Aç" />
<meta özellik="og: açıklama" içerik="Açık Grafik Açıklaması" />
<meta özellik="bkz: resim" içerik="https://www.example.com/og-image.jpg" />
<meta özellik="og: site_adı" içerik="SiteAdınız" />
<meta adı="twitter: kart" içerik="özet_large_image" />
<meta adı="twitter: site" içerik="@alan" />
<meta adı="twitter: yaratıcı" içerik="@üstesinden gelmek" />
</Head>
<gövde>
<Ana />
<SonrakiScript />
</body>
</Html>
 );
 }
}
ihracatvarsayılan Dokümanım;

Aşağıdaki içeriği index.js dosyanıza ekleyin:

const DemoSayfa = () => (
<>
<p>Demo Sayfası</p>
</>
);
ihracatvarsayılan DemoSayfası;

Bu kod, Belge bileşenini sonraki/belgeden içe aktarır ve özel bir Dokümanım bileşen. Sayfamızın başlığını, açıklamasını ve resmini, ayrıca 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 çalıştırma dev

Açık http://localhost: Demo sayfasını görmek için tarayıcınızda 3000.

Web sitenize Açık Grafik etiketleri eklemek, web sitenizin sosyal medya gönderilerinde nasıl göründüğü konusunda size daha fazla kontrol sağlayabilir 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 daha iyi web sitesi sıralamasına 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 Open Graph etiketlerini kullanmak, başlamanın hızlı ve kolay bir yoludur.