Kā Next.js vietnei pievienot SEO draudzīgas galvenes

Kā Next.js vietnei pievienot SEO draudzīgas galvenes

Lapu nosaukumi, metatagi un meta apraksti ir svarīgi SEO. Tās ir pirmās lietas, ko lietotājs redz SERPS un nosaka, vai viņi noklikšķina uz jūsu vietni. Tāpēc ir svarīgi optimizēt savas vietnes nosaukumus, metatagus un aprakstu.





Programmā Next.js varat tos pievienot, izmantojot pielāgoto galvas komponentu. Varat tos pievienot visām lietojumprogrammas lapām vai pielāgot katrai lapai.



DIENAS VIDEO MAKEUSEOF

Globālās Head Tag pievienošana visām Next.js lapām

Next.js nodrošina _app.js, lai inicializētu lapas. Varat to izmantot, lai izveidotu metatagus, kas tiek koplietoti visās lapās.





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

Ja vēlaties, lai lapai būtu pielāgots nosaukums un apraksts, pievienojiet tai head komponentu, un Next.js to izmantos lietotnes komponenta noklusējuma vietā.

Metatagu un apraksta pievienošana noteiktai Next.js lapai

Statiskie metatagi un apraksti ir piemēroti lapām, kuru saturs paliek nemainīgs, piemēram, mājas lapai.



ko dara viedais televizors, ko nedara parasts televizors

Atveriet failu /pages/index.js un modificējiet head tagu ar atbilstošu nosaukumu un aprakstu.

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;

Jūs varat piekļūt komponentam Head, importējot to no nākamās/galvas . Tas darbojas, pievienojot elementus galvas tagam HTML lapa . Atkarībā no tā, kur ievietojat šo komponentu, metatagi un apraksts būs pieejami visā lietojumprogrammā vai atsevišķās lapās.



Virsraksta, skata loga platuma un apraksta pievienošana failā _app.js nodrošina, ka visām lapām ir vienādi metadati.

Šai lapai ir statisks saturs, taču dažreiz jūs varat izveidot lapas, kurās tiek izmantots dinamisks saturs.



Dinamiskā meta virsraksta un aprakstu pievienošana lapai Next.js

Atkarībā no lietošanas gadījuma varat izmantot getStaticProps(), getStaticPaths() vai getServerSideProps(), lai ielādētu datus vietnē Next.js. Šie dati nosaka lapas saturu. Izmantojiet to, lai izveidotu lapas metadatus.

kā ievietot video kā fonu

Piemēram, izveidot metadatus lietojumprogrammai Next.js, kas atveido emuāra ziņas, būtu apnicīgi.

Ieteicamais veids ir izveidot dinamisku lapu, kas saņem identifikatoru, kuru varat izmantot ielādēt emuāra saturu . Pēc tam varat izmantot šo saturu galvas komponentā.

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;

Funkcija getStaticProps nodod ziņas datus komponentam Post kā rekvizītus. Komponents Post iznīcina nosaukumu, aprakstu un saturu no rekvizītiem. Galvas komponents pēc tam izmanto nosaukumu un aprakstu meta tagos.

Next.js ir optimizēts ietvars

Jūs tikko uzzinājāt, kā izmantot head komponentu, lai Next.js projektam pievienotu meta virsrakstus un aprakstus. Izmantojiet šīs zināšanas, lai izveidotu SEO draudzīgas galvenes, uzkāptu pa SERP un piesaistītu savai vietnei vairāk apmeklētāju.

kā salabot iphone lādētāja portu

Papildus galvenajam komponentam Next.js nodrošina citus komponentus, piemēram, saiti un attēlu. Šie komponenti ir optimizēti, lai atvieglotu ātru SEO draudzīgu vietņu izveidi.