React JS Uygulamaları için SEO - React Helmet Detaylı Kılavuz

📚 İçindekiler:

1. Giriş
2. React Helmet Nedir?
3. Meta Etiketleri Nedir?
4. React Helmet'i Kurma
5. Ana Sayfa Başlığını ve Açıklamasını Düzenleme
6. Keşfedilmekte Olan Filmler Sayfasının Başlığını ve Açıklamasını Düzenleme
7. Filmler Sayfasının Başlığını ve Açıklamasını Düzenleme
8. Dizi Sayfasının Başlığını ve Açıklamasını Düzenleme
9. Arama Sayfasının Başlığını ve Açıklamasını Düzenleme
10. Stilleri Düzenleme
11. Seçilen Türleri Meta Etiketine Ekleme
12. Sonuç ve İleri Adımlar

📝 React Helmet Nedir?

React Helmet, react.js uygulamalarının seo dostu olmasına yardımcı olan bir kütüphanedir. Bu kütüphane sayesinde uygulamamızın başlık, açıklama, anahtar kelimeler gibi meta etiketlerini dinamik olarak düzenleyebiliriz. Meta etiketleri, sayfaların içeriğini tanımlayan metin parçacıklarıdır ve sayfanın kaynak kodunda yer alır. Meta etiketleri, arama motorlarına bir sayfanın ne hakkında olduğunu bildiren küçük açıklamalardır.

📝 Meta Etiketleri Nedir?

Meta etiketleri, bir sayfanın içeriği hakkında bilgi veren metin parçacıklarıdır. Sayfanın kaynak kodunda bulunurlar ve sayfanın görünen kısmında görünmezler. Arama motorlarına bir sayfanın ne hakkında olduğunu anlatan küçük açıklamalardır. Örneğin, bir film uygulamasında her film için ayrı başlık ve açıklama meta etiketi tanımlayabiliriz. Böylece her filmin arama motorlarında farklı bir şekilde görüntülenmesini sağlayabiliriz.

📝 React Helmet'i Kurma

React Helmet'i projemize eklemek için aşağıdaki adımları izleyebiliriz:

1. Terminali açın ve projenizin bulunduğu klasöre gidin.
2. "npm install react-helmet" komutunu girerek react helmet paketini projemize ekleyin.

📝 Ana Sayfa Başlığını ve Açıklamasını Düzenleme

Ana sayfanın başlık ve açıklama meta etiketlerini düzenlemek için aşağıdaki adımları izleyebilirsiniz:

1. Projede "app.js" dosyasını açın.
2. "react-helmet" paketini import edin.
3. "Helmet" bileşenini kullanarak başlık ve açıklama etiketlerini tanımlayın.

import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>Eğlence Merkezi</title>
        <meta name="description" content="Tüm favori filmleriniz ve TV dizileriniz için bilgi edinin." />
      </Helmet>
      {/* ... */}
    </div>
  );
}

export default App;

📝 Keşfedilmekte Olan Filmler Sayfasının Başlığını ve Açıklamasını Düzenleme

Keşfedilmekte olan filmler sayfasının başlık ve açıklama meta etiketlerini düzenlemek için aşağıdaki adımları izleyebilirsiniz:

1. Projedeki "Movies" bileşenine gidin.
2. "react-helmet" paketini import edin.
3. "Helmet" bileşenini kullanarak başlık ve açıklama etiketlerini tanımlayın.

import { Helmet } from 'react-helmet';

function Movies() {
  return (
    <div className="Movies">
      <Helmet>
        <title>Filmleri Keşfet</title>
        <meta name="description" content="Türlerine göre yeni filmleri keşfedin." />
      </Helmet>
      {/* ... */}
    </div>
  );
}

export default Movies;

📝 Filmler Sayfasının Başlığını ve Açıklamasını Düzenleme

Filmler sayfasının başlık ve açıklama meta etiketlerini düzenlemek için aşağıdaki adımları izleyebilirsiniz:

1. Projedeki "Movie" bileşenine gidin.
2. "react-helmet" paketini import edin.
3. "Helmet" bileşenini kullanarak başlık ve açıklama etiketlerini tanımlayın.

import { Helmet } from 'react-helmet';

function Movie() {
  return (
    <div className="Movie">
      <Helmet>
        <title>Film İncele</title>
        <meta name="description" content="Yeni filmler hakkında bilgi edinin." />
      </Helmet>
      {/* ... */}
    </div>
  );
}

export default Movie;

📝 Dizi Sayfasının Başlığını ve Açıklamasını Düzenleme

Dizi sayfasının başlık ve açıklama meta etiketlerini düzenlemek için aşağıdaki adımları izleyebilirsiniz:

1. Projedeki "Series" bileşenine gidin.
2. "react-helmet" paketini import edin.
3. "Helmet" bileşenini kullanarak başlık ve açıklama etiketlerini tanımlayın.

import { Helmet } from 'react-helmet';

function Series() {
  return (
    <div className="Series">
      <Helmet>
        <title>Dizileri Keşfet</title>
        <meta name="description" content="Türlerine göre yeni dizileri keşfedin." />
      </Helmet>
      {/* ... */}
    </div>
  );
}

export default Series;

📝 Arama Sayfasının Başlığını ve Açıklamasını Düzenleme

Arama sayfasının başlık ve açıklama meta etiketlerini düzenlemek için aşağıdaki adımları izleyebilirsiniz:

1. Projedeki "Search" bileşenine gidin.
2. "react-helmet" paketini import edin.
3. "Helmet" bileşenini kullanarak başlık ve açıklama etiketlerini tanımlayın.

import { Helmet } from 'react-helmet';

function Search() {
  return (
    <div className="Search">
      <Helmet>
        <title>Film ve Dizi Arayın</title>
        <meta name="description" content="Film ve dizileri arayın." />
      </Helmet>
      {/* ... */}
    </div>
  );
}

export default Search;

📝 Stilleri Düzenleme

Uygulamanın stillerini düzenlemek için aşağıdaki adımları izleyebilirsiniz:

1. Projedeki "app.js" dosyasına gidin.
2. İçine "style" etiketini tanımlayın.
3. Arka plandaki rengi beyaz yapmak için ".app" sınıfını seçin ve "background-color" özelliğini "white" olarak ayarlayın.
4. Header'ın arka plan rengini beyaz ve metin rengini siyah yapmak için ".header" sınıfını seçin ve "background-color" özelliğini "white" ve "color" özelliğini "black" olarak ayarlayın.

import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>Eğlence Merkezi</title>
        <meta name="description" content="Tüm favori filmleriniz ve TV dizileriniz için bilgi edinin." />
      </Helmet>

      <style>{`
        .app {
          background-color: white;
        }

        .header {
          background-color: white;
          color: black;
        }
      `}</style>

      {/* ... */}
    </div>
  );
}

export default App;

📝 Seçilen Türleri Meta Etiketine Ekleme

Seçilen türleri meta etiketine eklemek için aşağıdaki adımları izleyebilirsiniz:

1. Projedeki "Genres" bileşenine gidin.
2. "react-helmet" paketini import edin.
3. "Helmet" bileşenini kullanarak başlık etiketini tanımlayın.
4. Başlık etiketi içinde "selectedGenres.map" fonksiyonunu kullanarak seçilen türleri listelemek için döngü oluşturun.

import { Helmet } from 'react-helmet';

function Genres({ selectedGenres }) {
  return (
    <div className="Genres">
      {selectedGenres.length > 0 && (
        <Helmet>
          <title>Türler: {selectedGenres.map(genre => genre.name).join(', ')}</title>
        </Helmet>
      )}

      {/* ... */}
    </div>
  );
}

export default Genres;

📝 Sonuç ve İleri Adımlar

Bu rehberde React Helmet kullanarak SEO dostu bir uygulama oluşturmayı öğrendik. Başlık ve açıklama meta etiketlerini düzenleyebildik, dinamik olarak güncelleyebildik ve stil ayarları yapabildik. Ayrıca seçilen türleri meta etiketine eklemeyi de öğrendik. React Helmet, web uygulamalarının SEO performansını geliştirmek için çok güçlü bir araçtır. Umarım bu rehber faydalı olmuştur!

Rastgele Yardımcı Kaynaklar:

• React Helmet Documentation

✨ Ardından Ne Var?

Bu rehberde React Helmet'in temel özelliklerini öğrendik. Şimdi, bu bilgileri projenizde kullanarak uygulamanızı daha SEO dostu hale getirebilirsiniz. İyi çalışmalar!