Jak spravovat SEO na vašem webu NextJS pomocí Strapi

Úvod

Ahoj příteli, v tomto článku vám vysvětlím, jak dynamicky zacházet s optimalizací pro vyhledávače (SEO) na vašem webu NextJS pomocí Strapi CMS.

Nastavení

Účelem tohoto článku není naučit vás, jak nastavit NextJS nebo Strapi na vašem místním počítači. Pokud tedy s těmito technologiemi nemáte zkušenosti, zde je několik užitečných odkazů, jak projekty spustit.

Strpi

  • Nastavení projektu zde

  • Konfigurace databáze zde

  • Konfigurace Graphql zde

Další

  • Nastavení projektu zde

  • Konfigurace klienta Apollo zde

Hotovo s nastavením?

Pojďme nastavit typy obsahu na Strapi podle následujících kroků

  1. Klikněte na Content-Type Builder na postranním panelu, jak je znázorněno na obrázku níže

  1. Klikněte na create new collection type jak je znázorněno na obrázku níže

Nyní, když víte, jak vytvořit typ kolekce, budete vytvářet dva typy obsahu kolekce pro správu SEO pro stránky na vašem webu.

Nejprve vytvořte Seo Meta Tag typ kolekce, který má dvě pole, která zahrnují následující

  • property :toto je textové pole.
  • content :toto je také textové pole

Dále vytvořte SEO typ kolekce, který má také dvě pole.

  • Title :toto je textové pole.
  • seo_meta_tags :toto je pole vztahu, kde několik seo metaznaček patří do konkrétní seo kolekce, jak je znázorněno na obrázku níže

Nyní jste dokončili vytváření typů kolekcí, musíte vytvořit single content-type ke správě obsahu na vašich webových stránkách. V těchto typech obsahu byste přidali vztah se seo kolekcí, kterou jste vytvořili.

Dále přejděte do správce obsahu na postranním panelu a podle toho aktualizujte veškerý obsah a publikujte je, abychom mohli začít kódovat.

Než však začneme, musíte povolit veřejný přístup k typům obsahu. Proto musíte jít do Nastavení -> Role -> Veřejné a povolit find nebo/a findOne pro všechny typy obsahu, které jste vytvořili a uložili.

Začněme kódovat!!!

Nejprve vytvoříte dotaz potřebný k načtení dat z strapi. Vytvořte složku s názvem graphql v kořenovém adresáři a ve složce graphql vytvořte soubor s názvem HomePageQuery.ts . Do souboru HomePageQuery.ts přidejte následující kód.

// /graphql/HomePageQuery.ts

import { gql } from "@apollo/client";

export default gql`
  # Write your query or mutation here
  query HomePage {
    homePage {
      data {
        attributes {
          seo {
            data {
              attributes {
                Title
                seo_meta_tags {
                  data {
                    attributes {
                      property
                      content
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

Dále nahraďte kód v /pages/index.tsx s následujícím kódem

// /pages/index.tsx

import type { NextPage } from "next";
import client from "../apollo-client";
import query from "../graphql/HomePageQuery";

export async function getStaticProps() {
  const { data } = await client.query({
    query,
  });

  // data being fetched through the query. In this case we get the seo object which contains the title and meta tags 
  /**
   * content = {
   *    seo: {
   *      Title: <whatever title you set on strapi dashboard>,
   *      seo_meta_tags: {
   *        data: {attributes: {property: <set-data>, content: <set-data>}} 
   *      }
   *    }
   * }
   */
  const content = data.homePage.data.attributes;

  return {
    props: {
      content,
    },
  };
}

const Home: NextPage = () => {
  return <div></div>;
};

export default Home;

Protože jste předali seo objekt v rekvizitách v getStaticProps metodu pro stránku, můžete k ní přistupovat v /pages/_app.tsxpageProps což vám nyní umožňuje mít centrální bod pro správu seo dat pro všechny stránky. Proto byste aktualizovali kód v uvedeném /pages/_app.tsx soubor s následujícím kódem:

// /pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";

function MyApp({ Component, pageProps }: AppProps) {
  const seoDetails = pageProps?.content?.seo.data.attributes || {};

  return (
    <>
      <Head>
        <title>{seoDetails.Title}</title>
        {seoDetails.seo_meta_tags &&
          seoDetails.seo_meta_tags.data.map(({ attributes }: any, i: any) => (
            <meta key={i} {...attributes} />
          ))}
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;


Když spustíte server a otevřete webovou stránku ve webovém prohlížeči, všimnete si, že se změnil název stránky, kterou jste aktualizovali, a můžete také zkontrolovat meta tagy pomocí vývojářských nástrojů.

Závěr

V tomto článku jsme byli schopni vytvořit projekty strapi a nextjs, definovali jsme typy obsahu a přidali obsah, byli jsme také schopni přidat logiku do projektu nextjs pro zpracování dat ze strapi. Kód tohoto projektu naleznete zde.

Chápu, že může být obtížné sledovat článek, protože vyžaduje hodně vizuálního vysvětlení, v takovém případě jsem se rozhodl spustit svůj youtube kanál. Pomozte mi získat až 50 odběratelů a k tomuto článku bych přidal video pro další vysvětlení.

Nezapomeňte mě sledovat na twitteru a githubu a také dát like a sdílet můj příspěvek.

Děkuji.