SEO-barát fejlécek hozzáadása Next.js webhelyhez

Az oldalcímek, a metacímkék és a metaleírások fontosak a SEO szempontjából. Ezek az első dolgok, amelyeket a felhasználó lát a SERPS-en, és meghatározza, hogy átkattintott-e az Ön webhelyére. Ezért fontos, hogy optimalizálja webhelye címét, metacímkéit és leírását.

A Next.js fájlban az egyéni fejkomponensen keresztül adhatja hozzá őket. Felveheti őket az alkalmazás összes oldalára, vagy személyre szabhatja őket az egyes oldalakhoz.

MAKEUSEOF A NAP VIDEÓJA

Globális fejcímke hozzáadása az összes Next.js oldalhoz

A Next.js _app.js-t biztosít az oldalak inicializálásához. Használhatja az összes oldalon megosztott metacímkék létrehozására.

import '../styles/globals.css' 
import Head from 'next/head' 
  
function MyApp({ Component, pageProps }) { 
  return <> 
    <Head> 
      <meta name="author" content="John Doe"/> 
    </Head> 
    <Component {...pageProps} /> 
  </> 
} 
  
export default MyApp

Ha azt szeretné, hogy egy oldal egyéni címmel és leírással rendelkezzen, adja hozzá a head komponenst, és a Next.js ezt fogja használni az App összetevőben az alapértelmezett helyett.

Metacímkék és leírás hozzáadása egy adott Next.js oldalhoz

A statikus metacímkék és leírások olyan oldalakhoz alkalmasak, amelyek tartalma változatlan marad, például egy kezdőlap.

mit csinál a wps gomb

Nyissa meg a /pages/index.js fájlt, és módosítsa a head címkét a megfelelő címmel és leírással.

import Head from "next/head"; 
  
const Home= () => { 
  return ( 
    <> 
    <Head> 
      <title>Blog</title> 
      <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
      <meta name='description' content='Programming Articles'/> 
    </Head> 
    <main> 
      <h1>Welcome to my blog!</h1> 
    </main> 
    </> 
  ); 
}; 
  
export default Home;

A Head összetevőt úgy érheti el, hogy importálja a next/head mappából . Úgy működik, hogy elemeket fűz hozzá a fej címkéjéhez egy HTML oldal . Attól függően, hogy hol helyezi el ezt az összetevőt, a metacímkék és a leírás elérhetők lesznek a teljes alkalmazásban vagy az egyes oldalakon.

Ha hozzáadja a címet, a nézetablak szélességét és a leírást az _app.js fájlban, akkor az összes oldal ugyanazokkal a metaadatokkal rendelkezik.

Ez az oldal statikus tartalommal rendelkezik, de néha érdemes lehet olyan oldalakat létrehozni, amelyek dinamikus tartalmat fogyasztanak.

telefonhívások rögzítése az iPhone 6 -on

Dinamikus metacím és leírások hozzáadása a Next.js oldalhoz

A használati esettől függően a getStaticProps(), a getStaticPaths() vagy a getServerSideProps() segítségével lekérheti az adatokat a Next.js fájlban. Ezek az adatok határozzák meg az oldal tartalmát. Használja az oldal metaadatainak létrehozásához.

A blogbejegyzéseket megjelenítő Next.js alkalmazás metaadatainak létrehozása például fárasztó lenne.

Az ajánlott módszer egy dinamikus oldal létrehozása, amely megkapja az Ön által használható azonosítót lekérni a blog tartalmát . Ezt a tartalmat ezután felhasználhatja a fejkomponensben.

import { getAllPosts, getSinglePost } from "../../utils/mdx"; 
import Head from "next/head"; 
  
const Post = ({ title, description, content }) => { 
  return ( 
    <> 
      <Head> 
        <title>{title}</title> 
        <meta name="description" content={description} /> 
      </Head> 
      <main>{/* page content */}</main> 
    </> 
  ); 
}; 
  
export const getStaticProps = async ({ params }) => { 
  // get a single post 
  const post = await getSinglePost(params.id, "posts"); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export const getStaticPaths = async () => { 
  // Retrieve all posts 
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } })); 
  
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export default Post;

A getStaticProps függvény kellékként továbbítja a bejegyzési adatokat a Post komponensnek. A bejegyzés komponens strukturálja a címet, a leírást és a tartalmat a kellékekből. A head komponens ezután a címet és a leírást használja a metacímkékben.

A Next.js egy optimalizált keretrendszer

Most tanulta meg, hogyan használhatja a head összetevőt metacímek és leírások hozzáadásához a Next.js projekthez. Használja ezt a tudást SEO-barát fejlécek létrehozásához, mássz fel a SERP-kben, és vonzzon több látogatót webhelyére.

valaki letiltott a facebook -on, hogyan láthatom a profilját

A fejkomponensen kívül a Next.js további összetevőket is biztosít, például a hivatkozást és a képet. Ezek az összetevők már a dobozból optimalizálva vannak, így könnyebben hozhat létre gyors SEO-barát webhelyeket.