Next.js to obecnie najbardziej popularny framework React.js, który pozwala budować statycznie generowane, lub renderowane po stronie serwera aplikacje.
Za pomocą Next.js jesteśmy w stanie w prosty sposób stworzyć świetnie zoptymalizowaną pod kątem SEO aplikację.
Przykładem takiej aplikacji może być na przykład strona Onet.pl. Jest ona zbudowana w Next.js, dzięki czemu radzi sobie zarówno z SEO, jak i dużą ilością treści, przy niskim czasie ładowania strony.
Co stoi za sukcesem SEO w Next.js? Oraz co możemy dodatkowo zrobić, aby nasza aplikacja jeszcze lepiej się pozycjonowała?
1. Server Side Rendering
Główną wadą SEO standardowej aplikacji React.js jest dłuższy czas indeksowania strony.
Spowodowane jest to tym, że taka aplikacja to tak naprawdę sam div, do którego po stronie klienta renderujemy treści.
W rzeczystości każda strona tworzona jest w przeglądarce. Z technicznego punktu widzenia żadna strona nie istnieje, mamy tylko pustego div'a.
Next.js działa zupełnie inaczej. Aplikacja renderowana jest już po stronie serwera, co oznacza, że wysyłając żądanie strony otrzymujemy gotowy plik HTML z wyrenderowanymi treściami.
Dzięki temu Google znacznie szybciej zaindeksuje naszą stronę, ponieważ wszystkie treści ma już pod ręką.
Oczywiście nie oznacza to, że Google nie indeksuje aplikacji Reactowej. Trwa to jednak zdecydowanie dłużej niż w przypadku Server Side Renderingu.
2. Performance
Aplikacje zbudowane na Next.js cechują się świetnym czasem ładowania, co ma również ogromny wpływ na SEO.
Renderowanie HTML przez Server Side Rendering sprawdza się tutaj idealnie. Z jednej strony mamy gotowy plik HTML, a z drugiej dzięki takiemu rozwiązaniu przesyłamy znacznie mniej kodu Javascript do klienta.
3. Meta tagi - Next Head
Next.js udostępnia gotowe rozwiązanie dla SEO, które działa na podobnej zasadzie jak React Helmet.
Za pomocą komponentu Head możemy w łatwy sposób przekazać meta tagi do naszej aplikacji:
import Head from 'next/head';
const Page = () => {
return (
<div>
<Head>
<title>Title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<h1>Hello world</h1>
</div>
);
}
export default Page;Dobrym rozwiązaniem jest stworzyć komponent SEO, do którego będziemy przekazywali odpowiednie property, takie jak title, description w zależności od strony.
4. Sitemap
Istotnym elementem dla SEO jest mapa strony. Jest to plik XML, który zawiera wszystkie linki Twojej aplikacji.
Sitemapa nie jest konieczna, ponieważ crawlery Google są już wystarczająco "inteligentne", jednak jeśli chcesz mieć pewność, że każda strona zostanie zaindeksowana, to warto ją dodać.
Next.js natywnie nie wspiera generowania Sitemapy, jednak istnieje świetna biblioteka, która zrobi wszystko za nas - next-sitemap.
5. Robots.txt
Robots.txt, to plik, który dostarcza informacje dla robotów przeglądarek, do jakich stron mają dostęp.
Za pomocą Next.js jesteśmy w stanie dodać go w banalny sposób. Wystarczy, że stworzysz plik Robots.txt w folderze public, a zostanie on przeniesiony do buildu produkcyjnego.
Przykładowa treść:
User-agent: *
// Jeśli chcesz wykluczyć stronę
Disallow: /link-do-strony/
Disallow: /link-do-strony-2/
// Tutaj wklej link do sitemapy, którą wygenerowała Ci paczka next-sitemap
Sitemap: [link]6. Rich snippets
Rich snippets, to dodatkowe informacje, które chcemy przekazać przeglądarce.
Przykładem Rich snippets są miedzy innymi gwiazdki oceny danego produktu, data publikacji artykułu, czy składniki w przepisie kulinarnym. Więcej informacji na ich temat znajdziesz tutaj.
Za pomocą wspomnianego wyżej next-head, możemy w prosty sposób dodać Rich snippets do naszej aplikacji:
<Head>
<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>
</Head>7. Bonus: biblioteka next-seo
Jeśli zależy Ci na SEO Twojej aplikacji Next.js, świetnym rozwiązaniem jest dodanie biblioteki next-seo do Twojego projektu.
Za jej pomocą w prosty i intuicyjny sposób dodasz wszystkie meta tagi:
<NextSeo
title="Using More of Config"
description="This example uses more of the available config options."
canonical="https://www.canonical.ie/"
openGraph={{
url: 'https://www.url.ie/a',
title: 'Open Graph Title',
description: 'Open Graph Description',
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
type: 'image/jpeg',
},
{
url: 'https://www.example.ie/og-image-02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt Second',
type: 'image/jpeg',
},
{ url: 'https://www.example.ie/og-image-03.jpg' },
{ url: 'https://www.example.ie/og-image-04.jpg' },
],
site_name: 'SiteName',
}}
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
/>Podsumowanie
Next.js jest świetnym frameworkiem, który w erze Single Page Applications jest świetnym rozwiązaniem, jeśli zależy nam na SEO naszej aplikacji.
Wraz z lepszym pozycjonowaniem naszą stronę odwiedzi więcej użytkowników, którzy z pewnością docenią szybki czas ładowania.
Jeśli jeszcze nie wiesz, czym jest Next.js zapraszam do mojego artykułu.