React Helmet ile SEO Componenti Oluşturma

2 min read

2020-05-09

Gatsby'de React Helmet kütüphanesini kullanarak, SEO componentinin nasıl oluşturulduğundan bahsedeceğim.

React SEO

Bu yöntem ile sadece Gatsby üzerinde değil, React tabanlı tüm framework'leri kullanarak da, web sitenizi SEO uyumlu hale getirebilir, SEO için en hızlı optimizasyonu yapabilirsiniz.

React Helmet Nedir?

Düz bir HTML sayfasında kullanılabilen etiketlerin React üzerinde dinamikleştirilmesine olanak sağlar. Kullanımı son derece basittir.

Ancak, pure React ile sayfa oluşturup react-helmet ile SEO componenti yazmaktansa, zaten react-helmet'i kullanmak için gereksinim duyduğumuz Static bir site üzerinde, yani JAMStack uygulamasında bunu yapacağımız için, Gatsby gibi SSG'ler üzerinden devam etmenizi ve bu componenti modifiye etmenizi tavsiye ederim.

Gatsby Default Starter paketini indirelim:


gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

Gatsby-default-starter paketiyle birlikte gelen bir SEO componentimiz var. Bu componenti inceleyelim.

İki ana kütüphane bizi karşılıyor. react-helmet ve prop-types


import PropTypes from prop-types"
import { Helmet } from "react-helmet"

prop-types ile var olan SEO.JS componenti içerisindeki Propsların alabileceği değerleri giriyoruz. Burada dikkat edilmesi gerek durum, props olarak alınabilecek değerler sadece String değil Object de alabiliyor. Böylelikle dinamik olarak oluşturduğunuz sayfalardaki dataları, örneğin; Markdown ya da YAML datalarını, bu propslarda kullanabilirsiniz.


SEO.defaultProps = {
lang: `en`,
meta: \[\],
description: \`\`,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}

React Helmet kısmında ise, renderlanmış bir HTML etiketlerinin nasıl olabileceğini belirliyoruz.


< Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={\[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
}
\].concat(meta)}
/>

Kullanımı

SEO componentin, dinamik sayfalarınızda, örneğin SecondPage.JS içerisine importlamanız yeterli.


import React from "react"
import { PageProps } from "gatsby"

import SEO from "../components/seo"

const SecondPage = (props: PageProps) => ( <> < SEO title="Sayfa Başlığı" description="Açıklama"/>

Sayfa İçeriği

) export default SecondPage

Kaynaklar

Github: React Helmet

Github: Gatsby Starter Default

Detaylı videoyu, buradan izleyebilirsiniz.

youtube:https://www.youtube.com/embed/dm_U_4vwhKA