Gatsby.js jest to darmowy framework React.js, który pozwala na wygenerowanie aplikacji jako statycznej strony (Static Site Generator). Dzięki temu strona ładuje się błyskawicznie i jest świetnie zoptymalizowane pod kątem SEO.
W odróżnieniu od zwykłej aplikacji React.js, która renderuje się po stronie klienta, Google znacznie szybciej zaindeksuje stronę opartą o Gatsby.js.
Dlaczego? Strony wyrenderowane przez Gatsby.js, to zwykłe pliki HTML, które zawierają już w sobie całą treść. Crawlery Google mają do nich natychmiastowy dostęp.
Jaki wpływ na SEO ma Gatsby.js?
Najlepszym przykładem będzie zespół GhostCMS, który przeniósł stronę dokumentacji na Gatsby.js, co pozwoliło im znacznie zwiększyć ruch na stronie już po dwóch tygodniach! Z miesiąca na miesiąc różnica była coraz większa. Więcej szczegółów w tym artykule.
Oto wykres przedstawiający wzrost ruchu na ich nowej stronie:
Jak widzisz wynik jest rewelacyjny, a udało im się tego dokonać, poprzez:
- znacznie lepszy czas ładowania strony, który zapewnia Static Site Generator,
- automatyczne generowanie sitemapy przy publikacji nowych treści, dzięki czemu strony są szybciej indeksowane przez Google,
- aktualizację meta tagów i treści witryny pod słowa kluczowe.
W tym poście pomogę Ci przenieść ich sukces również na Twoją stronę!
Jeśli Twoja strona jeszcze nie jest zbudowana w Gatsby.js, sprawdź mój post, w którym pokazuję, w jaki sposób stworzyłem bloga właśnie za pomocą tego frameworka.
SEO component
Głównym narzędziem do poprawy SEO na naszej stronie będzie SEO component. Dzięki niemu w łatwy sposób będziemy w stanie dodać meta tagi na wszystkich podstronach za pomocą props.
Będą nam do tego potrzebne dwie paczki:
npm i gatsby-plugin-react-helmet react-helmetGdy już je zainstalowaliśmy, możemy przejść do tworzenia komponentu.
Stwórz nowy plik Seo.js w /src/components/ i dodaj do niego ten kod:
import React from 'react';
import { Helmet } from 'react-helmet';
const Seo = ( { title, description, image } ) => {
return (
<Helmet />
);
};
export default Seo;Dodajmy teraz defaultowe informacje na temat naszej strony w pliku gatsby-config.js, który znajdziesz w głównym folderze projektu oraz dodajmy do pluginów wcześniej pobraną paczkę:
module.exports = {
siteMetadata: {
title: 'Site title',
description: 'Site description',
siteUrl: 'https://mwebs.pl',
author: 'Mateusz Woskowicz',
keywords: 'keyword1,keyword2',
image: 'link to the image'
},
plugins: [
'gatsby-plugin-react-helmet'
]
}Teraz za pomocą useStaticQuery jesteśmy w stanie pobrać te informacje i przekazać je do naszego komponentu:
import { useStaticQuery, graphql } from 'gatsby';
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
keywords
siteUrl
image
}
}
}
`
)Stwórzmy teraz const, który będzie przechowywała wszystkie nasze tagi:
const SeoTags = [
{
name: 'description',
content: description ? description : site.siteMetadata.description
},
{
name: 'keywords',
content: site.siteMetadata.keywords.join( ',' )
},
{
property: 'og:title',
content: title ? title : site.siteMetadata.title
},
{
property: 'og:description',
content: description ? description : site.siteMetadata.description
},
{
property: 'og:image',
content: image ? image : site.siteMetadata.image
},
{
property: 'og:type',
content: 'website'
},
{
name: 'twitter:creator',
content: site.siteMetadata.author
},
{
name: 'twitter:title',
content: title ? title : site.siteMetadata.title
},
{
name: 'twitter:description',
content: description ? description : site.siteMetadata.description
},
{
name: 'twitter:card',
content: 'summary_large_image'
}
];Następnie przekazujemy tę zmienną do Helmet wraz z tytułem oraz językiem strony:
<Helmet
title={title ? title : site.siteMetadata.title}
meta={SeoTags}
htmlAttributes={{ lang: 'pl' }}
/>Dzięki property ? property : site.siteMetadata.property, jeśli nie przekażemy nowych treści do komponentu za pomocą props, zostaną wykorzystane defaultowe treści, które zadeklarowaliśmy wcześniej.
Poniżej znajdziesz cały plik, który śmiało możesz przekopiować do swojego projektu:
import React from 'react';
import { Helmet } from 'react-helmet';
import { useStaticQuery, graphql } from 'gatsby';
const Seo = ( { title, description, image } ) => {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
keywords
siteUrl
image
}
}
}
`
);
const SeoTags = [
{
name: 'description',
content: description ? description : site.siteMetadata.description
},
{
name: 'keywords',
content: site.siteMetadata.keywords.join( ',' )
},
{
property: 'og:title',
content: title ? title : site.siteMetadata.title
},
{
property: 'og:description',
content: description ? description : site.siteMetadata.description
},
{
property: 'og:image',
content: image ? image : site.siteMetadata.image
},
{
property: 'og:type',
content: 'website'
},
{
name: 'twitter:creator',
content: site.siteMetadata.author
},
{
name: 'twitter:title',
content: title ? title : site.siteMetadata.title
},
{
name: 'twitter:description',
content: description ? description : site.siteMetadata.description
},
{
name: 'twitter:card',
content: 'summary_large_image'
}
];
return (
<Helmet
title={title ? title : site.siteMetadata.title}
meta={SeoTags}
htmlAttributes={{ lang: 'pl' }}
/>
);
};
export default Seo;W jaki sposób użyć SEO component?
Możemy teraz użyć tego komponentu na każdej stronie. Dobrym zwyczajem jest stworzenie komponentu Layout.js, który przechowuje strukturę naszej strony (Header, Main, Footer) i do niego dodać nasz SEO component. Dzięki temu na każdej podstronie będziemy mieli uzupełnione meta tagi.
Jeśli zdecydujesz się na to rozwiązanie, pamiętaj, że będziesz musiał dodać propsy, które otrzymuje SEO component również do komponentu Layout.js.
Przykład wykorzystania komponentu z defaultowymi meta tagami:
import Seo from '../components/seo';
const Page = () => (
<div>
<Seo />
{/* content strony */}
</div>
);
export default Page;Oraz wersja z uzupełnionymi meta tagami:
import React from 'react';
import Seo from './seo';
const Page = () => (
<div>
<Seo title="Nowy tytuł" description="Nowy opis" image="Link do grafiki" />
{/* content strony */}
</div>
);
export default Page;To wszystko! Pamiętaj, aby uzupełnić nowe meta tagi w oparciu o Twoje słowa kluczowe.
Sitemap
Ok, pierwszy krok mamy za sobą. Przyszła pora na równie ważny element - Sitemapę.
Mapa strony to plik, który ma na celu ułatwienie crawlerom poznanie struktury strony. Występuje w postaci pliku XML, który zawiera link do wszystkich podstron. Jest to jeden z ważniejszych elementów SEO, który znacznie poprawi pozycjonowanie i czas indeksowania nowych podstron.
Aby stworzyć sitemapę w Gatsby.js, zainstaluj tę paczkę:
npm i gatsby-plugin-sitemapNastępnie dodaj ją do konfiguracji Gatsby.js w gatsby-config.js:
module.exports = {
plugins: [
'gatsby-plugin-sitemap',
],
}Przy każdym buildzie aplikacji plugin wyrenderuje plik sitemap-index.xml.
Uwaga: Sitemapa zostanie wyrenderowana jedynie podczas gatsby build, czyli podczas buildu produkcyjnego. Podczas gatsby develop plugin nie zadziała.
Już teraz możemy zobaczyć jak wygląda nasza sitemapa.
Zbudujmy w takim razie naszą aplikację i sprawdźmy to, używając tych dwóch komend:
gatsby build
gatsby serveA następnie wejdź na:
localhost:9000/sitemap/sitemap-index.xmlJak widzisz, Gatsby.js wygenerował sitemapę z wszystkimi dostępnymi stronami. Teoretycznie zadanie skończone, jednak w tej sytuacji pojawił się jeszcze jeden problem.
Nasza sitemapa nie zawiera najważniejszej informacji, która jest rekomendowana przez Google, czyli lastmod. Jest to data ostatniej modyfikacji strony, która pomaga crawlerom szybciej indeksować nowe wersje strony.
Jeśli prowadzimy bloga musimy pobrać te dane z CMS'a.
Poniżej znajdziesz gotowy kod, jednak pamiętaj, że musisz dopasować go do własnego projektu.
{
resolve: 'gatsby-plugin-sitemap',
options: {
// Tutaj możesz podać strony, których nie chcesz dodawać do sitemapy
excludes: ['/strona1', '/strona2'],
// W tym miejscu wykonujemy query do stron, które mamy w folderze pages (allSitePage)
// Oraz do naszego CMS'a
query: `
{
allSitePage {
nodes {
path
}
}
mwebs {
posts {
slug
updatedAt
}
}
}
`,
// Tutaj podajemy link do naszej strony
resolveSiteUrl: () => 'link do strony',
// W tym miejscu chcemy nadpisać obiekty stron pobrane przez allPages i
// przekazać im dane, które pobraliśmy z CMS'a
resolvePages: ( {
allSitePage: { nodes: allPages },
mwebs: { posts }
} ) => {
const graphCMSNodeMap = posts.reduce( ( acc, node ) => {
const { slug } = node;
acc[`/${slug}`] = node;
return acc;
}, {} );
return allPages.map( page => {
return { ...page, ...graphCMSNodeMap[page.path] };
} );
},
// Funkcja serialize, która przekształca dane z naszego query.
// To co tutaj zwrócimy będzie wykorzystane do wygenerowania sitemapy.
serialize: ( { path, updatedAt } ) => {
return {
url: path,
lastmod: updatedAt
};
}
}
},W funkcji serialize możemy przekazać również takie informacje jak:
- changefreq - określa jak często dana podstrona się zmienia (hourly, daily, itd.),
- priority - określa wagę danej podstrony od 0.0 do 1.0.
Jednak te dwie, które podałem wyżej (url oraz lastmod) są w pełni wystarczające.
Tutaj znajdziesz pełną dokumentację pluginu gatsby-plugin-sitemap.
Robots.txt
Plik robots.txt dostarcza informacje dla robotów przeglądarek, do jakich stron mają dostęp.
Aby dodać plik robots.txt do strony napisanej w Gatsby.js, wystarczy, że stworzysz folder static w głównym folderze projektu.
Przykładowa treść:
User-agent: *
// Jeśli chcesz wykluczyć stronę
Disallow: /link-do-strony/
Disallow: /link-do-strony-2/
// Jeśli stworzyłeś sitemapę według powyższego poradnika
// pamiętaj o zmianie [link] na link Twojej strony
Sitemap: [link]/sitemap/sitemap-index.xmlJeśli potrzebujesz bardziej zaawansowanej konfiguracji możesz skorzystać z pluginu gatsby-plugin-robots-txt.
Pozwoli Ci na dopasowanie konfiguracji w zależności od środowiska (np. development, production).
Zalecane jest, szczególnie gdy Twoja strona postawiona jest na Netlify, dzięki czemu pozbędziesz się problemu zduplikowanego contentu.
Rich snippets
Rich snippets są to dodatkowe informacje, które chcemy przekazać wyszukiwarce.
Mogą to być między innymi popularne gwiazdki oceny danego produktu, bądź składniki w przepisie kulinarnym. Więcej informacji na ich temat znajdziesz tutaj.
Aby dodać Rich snippets, wystarczy, że dodasz do naszego SEO component ten kod, oraz podmienisz dane na własne:
<Helmet>
<script type="application/ld+json">
{`
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://www.spookytech.com",
"name": "Spooky technologies",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+5-601-785-8543",
"contactType": "Customer Support"
}
}
`}
</script>
</Helmet>Możesz go również śmiało zintegrować propsami i przekazywać do niego różne treści w zależności od podstrony.
W moim wypadku jest to informacja o artykule, autor, data publikacji oraz ostatniej modyfikacji.
Podsumowanie
Dzięki Gatsby.js jesteśmy w stanie stworzyć rewelacyjnie zoptymalizowaną pod kątem SEO stronę. W połączeniu z czasem ładowania, który zapewnia generowanie statycznych stron mamy już tak naprawdę wszystko, czego dusza zapragnie. Nic tylko czekać na wyższe pozycjonowanie!
Co prawda wymaga od nas dodatkowej pracy, jednak zwróci się błyskawicznie, co udowodnił zespół GhostCMS.
Gatsby.js w 2022 w dalszym ciągu jest bardzo popularnym frameworkiem React.js i zdecydowanie warto nauczyć się chociaż podstaw, a tutaj dowiesz się dlaczego.