Заглавията на страниците, мета таговете и мета описанията са важни за SEO. Те са първите неща, които потребителят вижда в SERPS и определят дали ще кликнат до вашия уебсайт. Ето защо е важно да оптимизирате заглавията, мета таговете и описанието на вашия уебсайт.
В Next.js ги добавяте чрез персонализирания компонент на главата. Можете да ги добавите към всички страници в приложението или да ги персонализирате за всяка страница.
Добавяне на Global Head Tag към всички Next.js страници
Next.js предоставя _app.js за инициализиране на страници. Можете да го използвате за създаване на мета тагове, споделени на всички страници.
импортиране '../styles/globals.css'
импортиране Глава от "следваща/глава"функцияMyApp({Component, pageProps}) {
връщане <>
<Глава>
<мета име="автор" съдържание="Джон Доу"/>
</Head>
<Компонент {...pageProps} />
</>
}
износпо подразбиране MyApp
Ако искате страницата да има персонализирано заглавие и описание, добавете компонента head към нея и Next.js ще го използва вместо този по подразбиране в компонента App.
Добавяне на мета тагове и описание към конкретна страница Next.js
Статичните мета тагове и описания са подходящи за страници, чието съдържание остава същото, например начална страница.
Отворете файла /pages/index.js и променете head тага със съответното заглавие и описание.
импортиране Глава от "следваща/глава";конст Начало= () => {
връщане (
<>
<Глава>
<заглавие>Блог</title>
<мета име="прозорец за изглед" съдържание="първоначален мащаб=1.0, ширина=ширина на устройството" />
<мета име='описание' съдържание='Статии за програмиране'/>
</Head>
<основен>
<h1>Добре дошли в моя блог!</h1>
</main>
</>
);
};
износпо подразбиране У дома;
Можете да получите достъп до компонента Head, като го импортирате от next/head. Работи чрез добавяне на елементи към заглавния таг на HTML страница. В зависимост от това къде поставите този компонент, мета таговете и описанието ще бъдат достъпни в цялото приложение или на отделни страници.
Добавянето на заглавието, ширината на прозореца за изглед и описанието във файла _app.js гарантира, че всички страници имат еднакви метаданни.
Тази страница има статично съдържание, но понякога може да искате да създадете страници, които консумират динамично съдържание.
Добавяне на динамично мета заглавие и описания към страница Next.js
В зависимост от случая на използване можете да използвате getStaticProps(), getStaticPaths() или getServerSideProps(), за да извлечете данни в Next.js. Тези данни определят съдържанието на страницата. Използвайте го, за да създадете метаданни за страницата.
Например създаването на метаданни за приложението Next.js, което изобразява публикации в блогове, би било досадно.
Препоръчителният начин е да създадете динамична страница, която получава идентификатор, който можете да използвате изтеглете съдържанието на блога. След това можете да използвате това съдържание в главния компонент.
импортиране { getAllPosts, getSinglePost } от "../../utils/mdx";
импортиране Глава от "следваща/глава";конст Публикация = ({ заглавие, описание, съдържание }) => {
връщане (
<>
<Глава>
<заглавие>{заглавие}</title>
<мета име="описание" съдържание={описание} />
</Head>
<основен>{/* съдържание на страницата */}</main>
</>
);
};износконст getStaticProps = асинхронен ({параметри}) => {
// получаване на единична публикация
конст пост = изчакайте getSinglePost (params.id, "публикации");връщане {
подпорки: {... публикация },
};
};износконст getStaticPaths = асинхронен () => {
// Извличане на всички публикации
const paths = getAllPosts("публикации").map(({ id }) => ({ параметри: { id } }));връщане {
пътеки,
резервен: невярно,
};
};
износпо подразбиране пост;
Функцията getStaticProps предава публикуваните данни към компонента Post като подпори. Компонентът Post деструктурира заглавието, описанието и съдържанието от подпорите. След това компонентът head използва заглавието и описанието в мета таговете.
Next.js е оптимизирана рамка
Току-що научихте как да използвате компонента head, за да добавите мета заглавия и описания към проект Next.js. Използвайте това знание, за да създадете удобни за SEO заглавки, да се изкачите нагоре в SERP и да привлечете повече посетители към вашия сайт.
Освен главния компонент, Next.js предоставя други компоненти като връзка и изображение. Тези компоненти са оптимизирани веднага, което улеснява създаването на бързи уеб сайтове, подходящи за SEO.
