Создайте удобный компонент головы для SEO для Nextjs / Rect

В то время как Rect - это мощная библиотека JavaScript, она не включает в себя все детали, которые вам необходимо создать простое, функционирующее Макет сайта Отказ NextJS - это основа RACT, которая позволяет вам с легкостью создавать приложения и веб-сайты.

NextJS также включает в себя ряд инструментов и функций прямо из коробки, такой как WebPack, Babel, динамическая маршрутизация и предварительная выборка. Самое главное, что я обнаружил, что Nextjs очень удобно.

Эта структура позволяет использовать рендеринг на стороне сервера, который не только делает ваши приложения и веб-сайты значительно быстрее, но также заставляет ваши веб-сайты намного проще для поисковых систем для поисковых систем.

Nextjs также позволяет легко создавать архитектуру сайта хорошо сегментированной сайта, используя Динамическая маршрутизация или же Пользовательские маршруты сервера Отказ Например, вы можете легко сеть свой веб-сайт в разные бункеры, например / статьи /, / Products /, и / услуги / для лучшего структурирования контента.

Лучше всего, вы можете использовать все вещи, которые делают реагировать отличными как компоненты, свойства компонентов и состояния компонентов для реализации действительно гибких методов оптимизации на странице. В этой статье я собираюсь подробно создать хорошо оптимизированный головной компонент для реагирования.

Важность элемента головы для SEO

Теперь, прежде чем я попаду в то, как построить этот головной компонент, давайте сначала поговорим о том, почему важно и то, что мы будем оптимизировать.

Элемент головы на вашем сайте будет одним из самых важных разделов, когда дело доходит до технического SEO. Для одного все метаданные сайта устанавливаются в голове. Эти теги включают в себя заголовок, мета описан, ключевые слова страницы, любая соответствующая информация о авторе и настройки просмотра.

Элемент головы также отвечает за настройку других важных тегов, таких как ваш канонический URL-тег, любые соответствующие метки OpenGraph Facebook (OG Tags) или карты Twitter, а также теги Meta Robots. Каждый из этих тегов отвечает за передачу различной информации в Google или социальные сети, чтобы они могли лучше понять, индексировать и поделиться своим контентом.

Неправильно настроенные метаданные на вашем сайте могут быть катастрофически для вашей общей оптимизации веб-сайта и, безусловно, может привести к тому, что ваш рейтинги примет участие в Nosedive.

Например, два из худших штрафов, которые ваш сайт может столкнуться с точки зрения оптимизации на странице, представляют собой «дубликат наказания заголовка» и «дубликат метагорта». Эти два тега отвечают за предоставление «лифта вашего сайта» в Google. Они также диктуют текст, который пользователь увидит, когда ваш сайт отображается в результатах поиска Google.

Если каждая страница на вашем сайте имеет точное название, и то же самое точное описание набор, Google будет трудно понять, о чем ваш сайт. В результате Google не собирается уделять слишком много внимания на ваш сайт, и это определенно не будет учитывать его административным свойством.

Если вы заинтересованы в обучении больше о технической на странице SEO , Увидеть больше на моем подходе в Спецкой Отказ

Теперь, когда вы понимаете немного больше о головном элементе, и почему он так важен под капотом, давайте посмотрим, как построить компонент для построения SEO для реагирования.

Построить SEO-дружелюбный компонент головы

Компонент для головы, удобной для SEO, в котором я детализируется в этой статье, является специфическим для Nextjs. Тем не менее, если вы используете другую структуру rection или просто используете реакцию, вы можете использовать Реактивный шлем вместо головы Nextjs.

Первое, что вы захотите сделать, это установить вашу основную структуру головы. Ниже приведен код, который может служить в качестве примера, но не стесняйтесь добавлять или удалять это, как вы видите подходящие. На голом минимум, хотя ваша головка должна включать тег заголовка, тег мета-описания, канонический URL и любые соответствующие социальные теги.

& lt; head & gt;
& lt; title & gt; & lt; / title & gt;
& lt; meta name = "Описание" content = "" / & gt;
& lt; Meta Property = "OG: Тип" Content = "сайт" / & gt;
& lt; meta name = "og: Название" Property = "OG: Название« Content = »/ & gt;
& lt; meta name = "OG: Описание" Свойство = "OG: Описание" Content = "" / & gt;
& lt; meta property = "OG: Site_Name" Content = "/ & gt;
& lt; meta property = "OG: URL" Content = "" / & gt;
& lt; meta name = "Twitter: Card" Content = "Summary" / & gt;
& lt; meta name = "Twitter: заголовок" Content = "" / & gt;
& lt; meta name = "Twitter: Описание" Содержимое = {ropps.desc} / & gt;
& lt; meta name = "Twitter: сайт" Content = "" / & gt;
& lt; meta name = "Twitter: Создатель" Content = "" / & gt;
& lt; link rel = "Icon" Type = "Image / PNG" href = "/ статические / изображения / favicon.ico" / & gt;
& lt; link rel = "Apple-Touch-icon" href = "/ Static / Images / favicon.ico" / & gt;
& lt; link rel = "stylesheet" href = "" / & gt;
& lt; Meta Property = "OG: Image" Content = "" / & gt;
& lt; meta name = "Twitter: Image" Content = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; тип скрипта = "текст / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt; 

Установить компонент

Далее вы захотите создать новый частичный файл для вашего компонента. Вы можете вызвать частичный файл SEO-Meta.js. или похожие. Этот файл должен храниться в частичный каталог.

Ваш загородный компонент будет выглядеть что-то подобное:

 импортировать голову из «Далее / голова»
const meta = (реквизит) = & gt; (
& lt; head & gt;
& lt; title & gt; & lt; / title & gt;
& lt; meta name = "Описание" content = "" / & gt;
& lt; Meta Property = "OG: Тип" Content = "сайт" / & gt;
& lt; meta name = "og: Название" Property = "OG: Название« Content = »/ & gt;
& lt; meta name = "OG: Описание" Свойство = "OG: Описание" Content = "" / & gt;
& lt; meta property = "OG: Site_Name" Content = "/ & gt;
& lt; meta property = "OG: URL" Content = "" / & gt;
& lt; meta name = "Twitter: Card" Content = "Summary" / & gt;
& lt; meta name = "Twitter: заголовок" Content = "" / & gt;
& lt; meta name = "Twitter: Описание" Содержимое = {ropps.desc} / & gt;
& lt; meta name = "Twitter: сайт" Content = "" / & gt;
& lt; meta name = "Twitter: Создатель" Content = "" / & gt;
& lt; link rel = "Icon" Type = "Image / PNG" href = "/ статические / изображения / favicon.ico" / & gt;
& lt; link rel = "Apple-Touch-icon" href = "/ Static / Images / favicon.ico" / & gt;
& lt; link rel = "stylesheet" href = "" / & gt;
& lt; Meta Property = "OG: Image" Content = "" / & gt;
& lt; meta name = "Twitter: Image" Content = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; тип скрипта = "текст / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
Несомненно
Экспорт Meta по умолчанию 

Вы заметите, что я прохожу реквизит или свойства, к моему компоненту. Мы будем использовать эти свойства, чтобы заполнить наши мета-теги.

Импортировать компонент

Как только вы настроите свой базовый компонент, вы можете импортировать его на свои страницы. Вы можете импортировать компонент, включая следующее в верхней части вашей страницы.

 Импорт мета из '../partials/seo-meta.js'

Теперь вы можете разместить мета-компонент в рамках вашей функции Render, так же, как и с родной компонентом NextJS.

Создайте свойства компонента

Теперь, когда вы импортировали и поместили свой мета-компонент, вы захотите настроить свойства, необходимые для ваших метаданных. Обычно вы должны включать заголовок, описание и URL для каждой страницы, но вы также можете включить изображения и другие данные по мере необходимости.

Вы также можете включить свойства для файлов CSS и JavaScript, чтобы вы могли условно нагружать их на страницы по мере необходимости. Со всеми наборами свойства ваш компонент будет выглядеть что-то подобное:

 & lt; мета
title = "Это заголовок | Имя сайта "
desc = "Это описание"
Canonical = "https://www.someurl.com"
CSS = '/ Static / CSS / styles.css'
JS = '/ Static / JS / Scripts.js
/ & gt; 

Если вы просто строим статический веб-сайт с помощью NextJS, вы сможете заполнить свойства со статическим содержанием. Однако, если вы загружаете страницы из динамических маршрутов и заполните шаблоны страницы с динамическим кодом, вы захотите динамически установить эти свойства.

Наш сайт, Имя собственное , использует API WordPress в качестве источника данных, но вы можете использовать инструкции ниже, используя в значительной степени любые API отдыха или GraphQL.

При запросе страницы вы захотите схватить и вернуть соответствующие данные метаданных и страничных данных во время GetInitialProps () Async функция. Это позволит вам использовать динамические данные в функции Render, чтобы Google и другие роботы могут выползть информацию.

В зависимости от источника данных и нескольких других факторов, вы можете сделать другой подход, чтобы получить начальные свойства, но вот базовый подход к началу.

Статические Async GetinitialProops (CTX) {
const res = a ждать fetch ('// api.some-url.com/Case_Studies/?sslug= + CTX.REQ.paramsslug)
const error_code = res.statuscode & gt; 200? res.statuscode: false;
const data = awaque res.json ();
Пусть url = 'https: //' + ctx.req.headers.host + '/' + ctx.req.paramssslug
Пусть meta_title = ждать данных 
. weta_title
Пусть meta_desc = ждать данных 
. wmeta_desc
возвращаться {
код ошибки,
   case_study: данные,
   meta_title: meta_title,
   meta_desc: meta_desc,
   URL: URL
}
}

Теперь вы сможете получить доступ к свойствам, которые вы устанавливаете в вашей функции Render. При использовании в вашем коде они будут выглядеть что-то подобное.

 & lt; мета
title = {this.props.meta_title}
desc = {this.props.meta_desc}
canonical = {this.props.url}
CSS = '/ Static / CSS / styles.css'
JS = '/ Static / JS / Scripts.js
/ & gt; 

Используйте свойства в вашем компоненте

Последний шаг - настроить свой компонент, чтобы он использовал свойства, которые передаются. Хотя некоторые из свойств, таких как название и описание, будут установлены на каждой странице, такие как CSS и JS могут быть условными. Вы захотите принять это во внимание в вашем компоненте.

В нашем примере мы передаем наши свойства к компоненту, используя аргумент реквизит Отказ Затем мы можем получить доступ к отдельным реквизитам, используя их имена, например, ropps.title. или же ropps.desc. Отказ

При установке условных блоков вы можете взять подобный подход:

 {
roppsscss & amp; & amp;
& lt; ссылка rel = "stylesheeet" href = {`$ {props.css}`} / & gt;
} 

Таким образом, если нет набора CSS, вы не будете установить пустой тег ссылки на вашу страницу. Вы можете использовать этот же подход для файлов JavaScript.

После того, как вы закончите заполнение головы, он должен выглядеть что-то подобное:

 Импортируйте голову от «Далее / голова»
const meta = (реквизит) = & gt; (
& lt; head & gt;
& lt; title & gt; {ropps.title} & lt; / title & gt;
& lt; meta name = "Описание" content = {props.desc} / & gt;
& lt; Meta Property = "OG: Тип" Content = "сайт" / & gt;
& lt; meta name = "og: Название« Свойство = »OG: Название« Content = {ropps.title} / & gt;
& lt; meta name = "OG: Описание" Property = "OG: Описание" Содержимое = {ropps.desc} / & gt;
& lt; Meta Property = "OG: Site_name" Content = "Наличие существительное" / & gt;
& lt; meta property = "OG: URL" Content = {`$ {ropps.canonical}`} / & gt;
& lt; meta name = "Twitter: Card" Content = "Summary" / & gt;
& lt; meta name = "Twitter: заголовок" content = {props.title} / & gt;
& lt; meta name = "Twitter: Описание" Содержимое = {ropps.desc} / & gt;
& lt; meta name = "Twitter: сайт" Content = "@ propernounco" / & gt;
& lt; meta name = "Twitter: Creator" Content = "@ propernounco" / & gt;
& lt; link rel = "Icon" Type = "Image / PNG" href = "/ статические / изображения / favicon.ico" / & gt;
& lt; link rel = "Apple-Touch-icon" href = "/ Static / Images / favicon.ico" / & gt;
{
roppsscss & amp; & amp;
& lt; ссылка rel = "stylesheeet" href = {`$ {props.css}`} / & gt;
}
{
rops.image? (
& lt; meta property = "OG: Image" Content = {`$ {rops.image}`} / & gt;
): (
& lt; meta property = "OG: Image" Content = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
Несомненно
}
{
ARPS.IMAGE & AMP; & AMP;
& lt; meta name = "Twitter: Image" Content = {`$ {rops.image}`} / & gt;
}
{
ropps.Canonical & amp; & amp;
& lt; link rel = "Canonical" href = {`$ {ropps.Canonical}`} / & gt;
}
{
rops.js & amp; & amp;
& lt; тип скрипта = "текст / javascript" src = {`$ {props.js}`} & gt; & lt; / script & gt;
}
& lt; / head & gt;
Несомненно
Экспорт Meta по умолчанию 

Прочитайте больше:

• Разработать возможным реагированным компонентами
• 14 лучших apis javascript
• 15 Основные инструменты JavaScript, которые вы должны использовать