Jak Next.js Może Poprawić SEO Twojej Strony?

4 lutego 2022Next
7 min73 wyświetleń

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.

Przeczytaj także inne artykuły

Next Step w Web Developmencie - Czym Jest Next.js?

Next.js to najczęściej pobierany framework React.js. Jego największą zaletą jest Server Side Rendering, ale możemy go również wykorzystać jako Static Site Generator. Next.js postawiony jest na serwerze Node.js, dzięki czemu możemy w prosty sposób stworzyć aplikacje Fullstack. W 2022 roku wciąż utrzymuje się na pozycji lidera, więc nie trać czasu i zobacz, co potrafi!

7 stycznia 2022Next
4 min247 wyświetleń

Gatsby.js vs Next.js - Który Framework React.js Wybrać?

W porównaniu Gatsby.js vs Next.js ciężko wyłonić jednego zwycięzcę. Gatsby.js jako Static Site Generator dzięki licznym starterom i prostocie pozwala w szybki sposób stworzyć proste strony internetowe. Next.js natomiast pozwala nam skorzystać zarówno z generowania statycznych stron, jak i z Server Site Renderingu. Oba frameworki opierają się na React.js. Którego w takim razie wybrać do swojego projektu? Sprawdźmy to!

14 stycznia 2022React
3 min257 wyświetleń