Заголовки страниц, метатеги и метаописания важны для SEO. Это первое, что пользователь видит в поисковой выдаче и определяет, переходит ли он на ваш сайт. Поэтому важно оптимизировать заголовки, метатеги и описание вашего сайта.
В Next.js вы добавляете их через пользовательский компонент заголовка. Вы можете либо добавить их на все страницы приложения, либо настроить их для каждой страницы.
Добавление глобального тега заголовка на все страницы Next.js
Next.js предоставляет _app.js для инициализации страниц. Вы можете использовать его для создания метатегов, общих для всех страниц.
Импортировать '../стили/globals.css'
Импортировать Голова от 'следующий / голова'функцияМое приложение({Компонент, pageProps}) {
возвращаться <>
<Голова>
<мета имя ="автор" содержание ="Джон Доу"/>
</Head>
<Компонент {...pageProps} />
</>
}
экспортпо умолчанию Мое приложение
Если вы хотите, чтобы страница имела собственный заголовок и описание, добавьте к ней компонент head, и Next.js будет использовать его вместо стандартного в компоненте App.
Добавление метатегов и описания к определенной странице Next.js
Статические метатеги и описания подходят для страниц, содержание которых остается прежним, например, домашней страницы.
Откройте файл /pages/index.js и измените тег заголовка с соответствующим заголовком и описанием.
Импортировать Голова от "следующий/главный";константа Главная= () => {
возвращаться (
<>
<Голова>
<заголовок>Блог</title>
<мета имя ="окно просмотра" содержание ="начальная шкала = 1,0, ширина = ширина устройства" />
<мета имя ='описание' содержание ='Статьи по программированию'/>
</Head>
<основной>
<h1>Добро пожаловать в мой блог!</h1>
</main>
</>
);
};
экспортпо умолчанию Дом;
Вы получаете доступ к компоненту Head, импортируя его из next/head. Он работает, добавляя элементы к тегу head HTML-страница. В зависимости от того, где вы разместите этот компонент, метатеги и описание будут доступны во всем приложении или на отдельных страницах.
Добавление заголовка, ширины области просмотра и описания в файл _app.js гарантирует, что все страницы будут иметь одинаковые метаданные.
Эта страница имеет статическое содержимое, но иногда вам может понадобиться создать страницы, использующие динамическое содержимое.
Добавление динамического мета-заголовка и описания на страницу Next.js
В зависимости от варианта использования вы можете использовать getStaticProps(), getStaticPaths() или getServerSideProps() для получения данных в Next.js. Эти данные определяют содержание страницы. Используйте его для создания метаданных для страницы.
Например, создание метаданных для приложения Next.js, отображающего сообщения блога, было бы утомительным.
Рекомендуемый способ — создать динамическую страницу, которая получает идентификатор, который вы можете использовать для получить содержимое блога. Затем вы можете использовать это содержимое в компоненте head.
Импортировать {getAllPosts, getSinglePost} от "../../utils/mdx";
Импортировать Голова от "следующий/главный";константа Сообщение = ({название, описание, содержание}) => {
возвращаться (
<>
<Голова>
<заголовок>{заголовок}</title>
<мета имя ="описание" содержание = {описание} />
</Head>
<основной>{/* содержание страницы */}</main>
</>
);
};экспортконстанта getStaticProps = асинхронный ({параметры}) => {
// получаем один пост
константа сообщение = Ждите getSinglePost(params.id, "сообщения");возвращаться {
реквизит: {...пост},
};
};экспортконстанта получитьстатические пути = асинхронный () => {
// Получить все сообщения
константные пути = getAllPosts("сообщения").map(({id}) => ({параметры: {идентификатор}}));возвращаться {
пути,
отступать: ЛОЖЬ,
};
};
экспортпо умолчанию Почта;
Функция getStaticProps передает данные публикации компоненту Post в качестве реквизита. Компонент Post деструктурирует заголовок, описание и контент из реквизита. Затем компонент head использует заголовок и описание в метатегах.
Next.js — это оптимизированный фреймворк
Вы только что узнали, как использовать компонент head для добавления мета-заголовков и описаний в проект Next.js. Используйте эти знания, чтобы создавать SEO-дружественные заголовки, подниматься вверх по поисковой выдаче и привлекать больше посетителей на свой сайт.
Помимо компонента head, Next.js предоставляет другие компоненты, такие как Link и Image. Эти компоненты оптимизированы «из коробки», что упрощает создание быстрых SEO-оптимизированных веб-сайтов.
