Nextjs / reaksiyona göre SEO dostu bir kafa bileşeni oluşturun

ReACT güçlü bir JavaScript kütüphanesi olsa da, basit, işleyiş yapmanız gereken tüm parçaları içermez Web Sitesi Düzeni . Nextjs, sunucu tarafından işlenen uygulamaları ve web sitelerini kolaylıkla oluşturmanıza olanak tanıyan bir reaksiyon çerçevesidir.

Nextjs ayrıca, web paketi, Babil, Dinamik Yönlendirme ve Prefetching gibi kutunun hemen dışında bir dizi araç ve özellik içerir. En önemlisi, nextjs'in çok SEO dostu olduğunu buldum.

Bu çerçeve, yalnızca uygulamalarınızı ve web sitelerinin yalnızca daha hızlı yüklenmesini sağlayan, ancak ayrıca reaksiyon web sitelerinizi arama motorlarınızın taraması için çok daha kolay hale getiren sunucu tarafı oluşturma işlemini kullanmanızı sağlar.

Nextjs ayrıca, kullanarak iyi segmentli bir site mimarisi oluşturmayı kolaylaştırır. Dinamik Yönlendirme veya Özel Sunucu Yönlendirme . Örneğin, web sitenizi kolayca farklı silolara / makaleler / / ürün / ve / hizmetler / daha iyi içerik yapılanma için segment yapabilirsiniz.

Hepsinden iyisi, gerçekten esnek sayfa optimizasyon tekniklerini uygulamak için harika bir bileşenler, bileşen özellikleri ve bileşen durumları gibi tepki veren tüm şeyleri kullanabilirsiniz. Bu yazıda, reaksiyona göre iyi optimize edilmiş bir kafa bileşeni oluşturmak için ayrıntı yapacağım.

SEO için baş öğesinin önemi

Şimdi bu kafa bileşeni nasıl inşa edileceğime girmeden önce, neden önemli olduğunu ve neyin optimizasyon yapacağımız hakkında ilk konuşalım.

Web sitenizdeki baş öğesi, Teknik SEO söz konusu olduğunda en önemli bölümlerden biri olacaktır. Birincisi, tüm web sitesi meta verileri kafasına ayarlanmıştır. Bu etiketler, başlık, meta açıklama, sayfa anahtar kelimeleri, herhangi bir ilgili yazar bilgisi ve görünüm ayarları bulunur.

Baş öğesi, Canonical URL etiketiniz, ilgili Facebook OpenGraph Etiketler (OG Etiketler) veya Twitter Kartlarınızı ve Meta Robotları Etiketleriniz gibi diğer önemli etiketleri belirlemekten sorumludur. Bu etiketlerin her biri, google veya sosyal ağlara farklı bilgilerin taşınmasından sorumludur, böylece içeriğinizi daha iyi anlamalar, dizinler ve paylaşabilirler.

Web sitenizdeki uygunsuz olarak yapılandırılmış meta verileri, genel web sitesi optimizasyonunuza felaket olabilir ve sıralamanızın bir burunlu olmasına neden olabilir.

Örneğin, web sitenizin sayfa bir sayfa optimizasyon bakış açısıyla karşılaşabileceği en kötü cezalardan ikisi, 'yinelenen bir başlık etiketi' cezası ve 'yinelenen bir meta etiketi' cezasıdır. Bu iki etiket, web sitenizin 'Asansör Sitesini' Google'a vermesinden sorumludur. Ayrıca, web sitenizin Google arama sonuçlarında göründüğünde bir kullanıcının göreceği metni de dikte ederler.

Web sitenizdeki her sayfa aynı başlığa ve aynı açık tanımlamaya sahipse, Google'ın web sitenizin ne hakkında olduğunu anlamak zor bir zaman geçirir. Sonuç olarak, Google web sitenize çok fazla önem vermeyecek ve kesinlikle bir otorite özelliğini göz önünde bulundurmayacak.

Teknik sayfa hakkında daha fazla bilgi edinmekle ilgileniyorsanız SEO , Speckyboy'daki yaklaşımımda daha fazlasını görün .

Şimdi kafa elemanı hakkında biraz daha fazla anladığınız ve kaputun altında neden bu kadar önemli olduğunu, reaksiyona göre SEO dostu bir kafa bileşeninin nasıl oluşturulacağına bakalım.

SEO dostu bir kafa bileşeni oluşturun

Bu makalede detaylandırdığım SEO dostu kafa bileşeni Nextjs'e özgüdür. Ancak, farklı bir reaksiyon çerçevesi kullanıyorsanız veya sadece reaksiyon kullanıyorsanız, kullanabilirsiniz. Kask tepki Nextjs kafa bileşeninin yerine.

Yapmak isteyeceğiniz ilk şey, temel kafa yapınızı ayarlamaktır. Aşağıdaki kod örnek olarak hizmet edebilir, ancak uygun gördüğünüz gibi bir şeyleri eklemek veya kaldırmaktan çekinmeyin. Çıplak minimumda, kafanız bir başlık etiketi, meta açıklama etiketi, kanonik URL ve ilgili herhangi bir sosyal etiket içermelidir.

& lt; head & gt;
& lt; unvan & gt; / unvan & gt;
& lt; meta name = "Açıklama" içeriği = "" / & gt;
& lt; meta özelliği = "OG: Tip" Content = "web sitesi" / & gt;
& lt; meta adı = "OG: başlık" özelliği = "OG: başlık" Content = "" / & GT;
& lt; meta adı = "OG: Açıklama" özelliği = "OG: Açıklama" Content = "/ & gt;
& lt; meta özelliği = "OG: Site_Name" Content = "" / & gt;
& lt; meta özelliği = "OG: URL" içeriği = "" / & gt;
& lt; meta name = "Twitter: Kart" içeriği = "Özet" / ve GT;
& lt; meta name = "Twitter: Başlık" Content = "" / & GT;
& lt; meta adı = "Twitter: Açıklama" içerik = {props.desc} / ve gt;
& lt; meta name = "Twitter: Site" içeriği = "" / & gt;
& lt; meta adı = "Twitter: Creator" Content = "" / & GT;
& link rel = "icon" type = "image / png" href = "/ static / images / favicon.ico" / & gt;
& link rel = "Apple-touch-icon" href = "/ statik / görüntüler / favicon.ico" / & gt;
& link rel = "stylesheet" href = "" / & gt;
& lt; meta özelliği = "OG: image" Content = "" / & gt;
& lt; meta adı = "Twitter: image" Content = "" / & gt;
& link rel = "canonical" href = "" / & gt;
& lt; script type = "Metin / Javascript" SRC = "" & GT; & lt; / script;
& lt; / head & gt; 

Bileşeni ayarla

Sonra, bileşeniniz için yeni bir kısmi dosya oluşturmak istersiniz. Kısmi dosyayı arayabilirsin seo-meta.js veya benzeri. Bu dosya tutulmalı kısmi dizin.

Başlangıç ​​bileşeniniz böyle bir şeye benzeyecek:

 'sonraki / kafa' dan başı ithalat
Const meta = (sahne) = & gt; (
& lt; head & gt;
& lt; unvan & gt; / unvan & gt;
& lt; meta name = "Açıklama" içeriği = "" / & gt;
& lt; meta özelliği = "OG: Tip" Content = "web sitesi" / & gt;
& lt; meta adı = "OG: başlık" özelliği = "OG: başlık" Content = "" / & GT;
& lt; meta adı = "OG: Açıklama" özelliği = "OG: Açıklama" Content = "/ & gt;
& lt; meta özelliği = "OG: Site_Name" Content = "" / & gt;
& lt; meta özelliği = "OG: URL" içeriği = "" / & gt;
& lt; meta name = "Twitter: Kart" içeriği = "Özet" / ve GT;
& lt; meta name = "Twitter: Başlık" Content = "" / & GT;
& lt; meta adı = "Twitter: Açıklama" içerik = {props.desc} / ve gt;
& lt; meta name = "Twitter: Site" içeriği = "" / & gt;
& lt; meta adı = "Twitter: Creator" Content = "" / & GT;
& link rel = "icon" type = "image / png" href = "/ static / images / favicon.ico" / & gt;
& link rel = "Apple-touch-icon" href = "/ statik / görüntüler / favicon.ico" / & gt;
& link rel = "stylesheet" href = "" / & gt;
& lt; meta özelliği = "OG: image" Content = "" / & gt;
& lt; meta adı = "Twitter: image" Content = "" / & gt;
& link rel = "canonical" href = "" / & gt;
& lt; script type = "Metin / Javascript" SRC = "" & GT; & lt; / script;
/ head & gt;
)
DEPOLAMA DEPOLAMA META 

Geçtiğimi fark edeceksin sahneler veya özelliklerime, veya özelliklerime. Meta etiketlerimizi doldurmak için bu özellikleri kullanacağız.

Bileşeni almak

Temel bileşeninizi ayarladıktan sonra, daha sonra sayfalarınıza aktarabilirsiniz. Bileşeni sayfanızın üst kısmında aşağıdakileri de dahil ederek içe aktarabilirsiniz.

 '../partials/seo-meta.js'Г81'den meta ithalatı.
  

   Şimdi Meta Bileşenini Render işlevinizin içine yerleştirebilirsiniz, tıpkı yerel NEXTJS HEAD bileşeniyle istediğiniz gibi.
  
  

   Bileşen özelliklerini oluşturun
  
  

   Şimdi istediğiniz ve meta bileşeninizi yerleştirdiğiniz ve meta verileriniz için ihtiyaç duyacağınız özellikleri ayarlamak isteyeceksiniz. Her sayfa için tipik olarak başlık, açıklama ve URL içermelidir, ancak görüntüleri ve diğer verileri gerektiği gibi de ekleyebilirsiniz.
  
  

   Ayrıca, CSS ve JavaScript dosyaları için mülkleri dahil etmek isteyebilirsiniz, böylece bunları gerektiği gibi sayfalara koşullu olarak yükleyebilirsiniz. Tüm bu özelliklerin tümü ile, bileşeniniz böyle bir şeye benzeyecektir:
  
  
 & meta
title = "Bu bir başlık | Web Sitesi Adı "
desc = "Bu açıklama"
canonical = "https://www.someurl.com"
CSS = '/ statik / css / styles.css'
JS = '/ statik / js / scripts.js'
/ & gt; 
  

   Sadece nextjs ile statik bir web sitesi oluşturuyorsanız, özellikleri statik içerikle doldurabilirsiniz. Bununla birlikte, sayfa dinamik rotalardan ve sayfa şablonlarını dinamik kodlu dolduruyorsanız, bu özellikleri dinamik olarak ayarlamak istersiniz.
  
  

   Web sitemiz,
   
    Özel isim
   
   , WordPress API'sini veri kaynağı olarak kullanır, ancak herhangi bir dinlenme veya graphql API kullanarak aşağıdaki talimatları kullanabilirsiniz.
  
  

   Sayfayı talep ederken, ilgili meta veri ve sayfa verilerini almak ve iade etmek istersiniz.
   
    GetinitialProps () Async
   
   işlevi. Bu daha sonra, Google ve diğer robotların bilgiyi tarayabilmesi için render işlevi içindeki dinamik verileri kullanmanıza izin verir.
  
  

   Veri kaynağınıza ve diğer birkaç faktöre bağlı olarak, başlangıç ​​özelliklerini almak için farklı bir yaklaşım yapabilirsiniz, ancak burada başlamanız için temel bir yaklaşım.
  
  
Statik Async GetinitialProps (CTX) {
Const Res = Fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
Const ERROR_CODE = Res.Statuscode & GT; 200? Res.Statuscode: YANLIŞ;
Const Data = RES.JSON ();
URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug'a izin verin.
meta_title = verileri bekliyor 
 .Meta_title
meta_desc = verileri bekliyor 
 .Meta_desc
dönüş {
hata kodu,
   Care_Study: Veriler,
   meta_title: meta_title,
   meta_desc: meta_desc,
   URL: URL
}
}

  

   Artık, oluşturduğunuz özelliklere oluşturduğunuz özelliklere erişebileceksiniz. Kodunuzda kullanıldığında böyle bir şey bakarlar.
  
  
 & meta
title = {this.props.meta_title}
desc = {this.props.meta_desc}
canonical = {this.props.url}
CSS = '/ statik / css / styles.css'
JS = '/ statik / js / scripts.js'
/ & gt; 
  

   Bileşeninizdeki özellikleri kullanın
  
  

   Son adım, bileşeninizi ayarlamak için, iletildiği özellikleri kullanacak şekilde ayarlamaktır. Başlık ve açıklama gibi özelliklerden bazıları her sayfada ayarlanırken, CSS ve JS gibi diğerleri şartlı olabilir. Bunu bileşeninizde dikkate almak istersiniz.
  
  

   Örneğimizde, mülklerimizi argümanı kullanarak bileşene geçiyoruz.
   
    sahneler
   
   . Daha sonra, örneğin isimlerini kullanarak bireysel sahne erişebiliriz.
   
    Props.title
   
   veya
   
    props.desc
   
   .
  
  

   Koşullu blokları ayarlarken, şöyle bir yaklaşım yapabilirsiniz:
  
  
 {
props.csss & amp; & amp;
& l la link rel = "stylesheet" href = {`$ {props.css}`} / ve gt;
} 
  

   Bu şekilde, CSS seti yoksa, sayfanızda boş bir bağlantı etiketi ayarlamazsınız. JavaScript dosyaları için aynı yaklaşımı kullanabilirsiniz.
  
  

   Kafan bileşeninizi doldurmayı bitirdikten sonra böyle bir şey bakmalı:
  
  
 'Sonraki / Kafa' dan itin
Const meta = (sahne) = & gt; (
& lt; head & gt;
& lt; unvanı ve gt; {props.title} & lt; / unvan & gt;
& lt; meta name = "Açıklama" içerik = {props.desc} / & gt;
& lt; meta özelliği = "OG: Tip" Content = "web sitesi" / & gt;
& lt; meta adı = "OG: başlık" özelliği = "OG: başlık" Content = {props.title} / & gt;
& lt; meta adı = "OG: Açıklama" özelliği = "OG: Açıklama" Content = {props.desc} / ve gt;
& lt; meta özelliği = "OG: Site_Name" Content = "Uygun isim" / ve GT;
& lt; meta özelliği = "OG: URL" içeriği = {`$ {props.canonical}`} / & gt;
& lt; meta name = "Twitter: Kart" içeriği = "Özet" / ve GT;
& lt; meta name = "Twitter: Başlık" Content = {props.title} / & gt;
& lt; meta adı = "Twitter: Açıklama" içerik = {props.desc} / ve gt;
& lt; meta name = "Twitter: Site" Content = "@ propernounco" / & gt;
& lt; meta adı = "Twitter: Creator" Content = "@ propernounco" / & gt;
& link rel = "icon" type = "image / png" href = "/ static / images / favicon.ico" / & gt;
& link rel = "Apple-touch-icon" href = "/ statik / görüntüler / favicon.ico" / & gt;
{
props.csss & amp; & amp;
& l la link rel = "stylesheet" href = {`$ {props.css}`} / ve gt;
}
{
Props.Image? (
& lt; meta özelliği = "OG: image" Content = {`$ {props.image}`} / & gt;
): (
& lt; meta özelliği = "OG: resim" içeriği = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
Props.Image & Amp; & amp;
& lt; meta name = "Twitter: image" Content = {`$ {props.image}`} / & gt;
}
{
props.canonical & amp; & amp;
& link rel = "canonical" href = {`$ {props.canonical}`} / ve gt;
}
{
props.js & amp; & amp;
& lt; script type = "metin / javascript" src = {`$ {props.js}`} & gt; & lt; / script;
}
/ head & gt;
)
DEPOLAMA DEPOLAMA META 
  

   
    Daha fazla oku:
   
  
  

   

    
     Resusable reaksiyon bileşenleri geliştirmek
    
   
   

    
     En iyi JavaScript API'lerinin 14'ü
    
   
   

    
     15 Kullanılmanız gereken 15 Temel JavaScript araçları