Sivujen otsikot, sisällönkuvauskentät ja metakuvaukset ovat tärkeitä SEO: lle. Ne ovat ensimmäisiä asioita, joita käyttäjä näkee SERPS: ssä ja päättävät, pääsevätkö he verkkosivustollesi. Siksi on tärkeää optimoida verkkosivustosi otsikot, sisällönkuvauskentät ja kuvaus.

Next.js: ssä lisäät ne mukautetun head-komponentin kautta. Voit joko lisätä ne kaikille sovelluksen sivuille tai muokata niitä jokaiselle sivulle.

Yleisen päätunnisteen lisääminen kaikille Next.js-sivuille

Next.js tarjoaa _app.js: n sivujen alustamiseen. Voit käyttää sitä kaikille sivuille jaettujen sisällönkuvauskenttien luomiseen.

tuonti '../styles/globals.css'
tuonti Pää alkaen "seuraava/pää"
toimintoOmaApp({ Komponentti, sivuprops }) {
 palata <>
<Pää>
<metanimi="kirjoittaja" sisältö="John Doe"/>
</Head>
<Komponentti {...pageProps} />
</>
}
viedäoletuksena OmaApp

Jos haluat, että sivulla on mukautettu otsikko ja kuvaus, lisää siihen head-komponentti, jolloin Next.js käyttää sitä oletuskomponentin sijaan App-komponentissa.

Sisällönkuvauskenttien ja kuvauksen lisääminen tietylle Next.js-sivulle

Staattiset metatagit ja kuvaukset sopivat sivuille, joiden sisältö pysyy samana, esimerkiksi kotisivuille.

Avaa tiedosto /pages/index.js ja muokkaa head-tunnistetta sopivalla otsikolla ja kuvauksella.

tuonti Pää alkaen "seuraava/pää";
konst Etusivu= () => {
palata (
<>
<Pää>
<otsikko>Blogi</title>
<metanimi="näkymä" sisältö="alkumittakaava = 1,0, leveys = laitteen leveys" />
<metanimi='kuvaus' sisältö='Ohjelmointiartikkelit'/>
</Head>
<pää>
<h1>Tervetuloa blogiini!</h1>
</main>
</>
 );
};
viedäoletuksena Koti;

Pääset käsiksi Head-komponenttiin tuomalla sen seuraavasta/head-kohdasta. Se toimii lisäämällä elementtejä päätunnisteeseen HTML-sivu. Sen mukaan, mihin sijoitat tämän komponentin, sisällönkuvauskentät ja kuvaus ovat saatavilla koko sovelluksessa tai yksittäisillä sivuilla.

Lisäämällä otsikon, näkymän leveyden ja kuvauksen _app.js-tiedostoon varmistat, että kaikilla sivuilla on samat metatiedot.

Tällä sivulla on staattista sisältöä, mutta joskus saatat haluta luoda sivuja, jotka kuluttavat dynaamista sisältöä.

Dynaamisen metaotsikon ja kuvausten lisääminen Next.js-sivulle

Käyttötapauksesta riippuen voit käyttää getStaticProps(), getStaticPaths() tai getServerSideProps() tietojen hakemiseen Next.js: ssä. Nämä tiedot määräävät sivun sisällön. Käytä sitä sivun metatietojen luomiseen.

Esimerkiksi blogitekstejä näyttävän Next.js-sovelluksen metatietojen luominen olisi työlästä.

Suositeltava tapa on luoda dynaaminen sivu, joka vastaanottaa tunnisteen, jota voit käyttää noutaa blogin sisältö. Voit sitten käyttää tätä sisältöä pääkomponentissa.

tuonti { getAllPosts, getSinglePost } alkaen "../../utils/mdx";
tuonti Pää alkaen "seuraava/pää";
konst Viesti = ({ otsikko, kuvaus, sisältö }) => {
palata (
<>
<Pää>
<otsikko>{title}</title>
<metanimi="kuvaus" content={description} />
</Head>
<pää>{/* sivun sisältö */}</main>
</>
 );
};


viedäkonst getStaticProps = asynk ({ parametrit }) => {
// hanki yksi viesti
konst viesti = odottaa getSinglePost (params.id, "posts");


palata {
 rekvisiitta: { ...post },
 };
};


viedäkonst getStaticPaths = asynk () => {
// Hae kaikki viestit
 const polut = getAllPosts("viestit").map(({ id }) => ({ parametrit: { id } }));


palata {
 polut,
 perääntyä: väärä,
 };
};
viedäoletuksena Lähettää;

GetStaticProps-funktio välittää viestitiedot Post-komponentille rekvisiittana. Viesti-komponentti tuhoaa otsikon, kuvauksen ja sisällön rekvisiittasta. Pääkomponentti käyttää sitten otsikkoa ja kuvausta sisällönkuvauskentissä.

Next.js on optimoitu kehys

Opit juuri käyttämään head-komponenttia metaotsikoiden ja kuvausten lisäämiseen Next.js-projektiin. Käytä tätä tietämystä luodaksesi SEO-ystävällisiä otsikoita, kiivetäksesi SERP: itä ja houkutellaksesi lisää kävijöitä sivustollesi.

Pääkomponentin lisäksi Next.js tarjoaa muita komponentteja, kuten linkin ja kuvan. Nämä komponentit on optimoitu heti alusta alkaen, mikä helpottaa nopeiden SEO-ystävällisten verkkosivustojen luomista.