Побудуйте головний компонент SEO для Nextjs / React

Хоча реагування - це потужна бібліотека JavaScript, вона не включає всі частини, які вам потрібно, щоб побудувати просте, функціонування Макет веб-сайту . Nextjs - це рамка реагування, яка дозволяє легко створювати серверні програми та веб-сайти з легкістю.

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

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

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

Найкраще, ви можете використовувати всі речі, які роблять чудові компоненти, властивості компонентів та складових станів для реалізації дійсно гнучких методів оптимізації на сторінку. У цій статті я збираюся детально побудувати добре оптимізований головний компонент для реагування.

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

Тепер, перш ніж я вступив до того, як побудувати цей головний компонент, давайте поговоримо про те, чому це важливо, і що ми будемо оптимізувати.

Головний елемент на вашому веб-сайті буде одним з найважливіших розділів, коли мова йде про технічне SEO. Для одного, всі метадані веб-сайту встановлюються в голові. Ці теги включають в себе назву, мета-опис, ключові слова сторінки, будь-який відповідний автора інформації та налаштування перегляду.

Головний елемент також несе відповідальність за налаштування інших важливих тегів, таких як ваш канонічний тег URL-адреси, будь-які відповідні теги OpenGraph Facebook (теги OG) або картки Twitter, а також теги ваших металів. Кожна з цих тегів відповідає за передачу іншої інформації до Google або соціальних мереж, щоб вони могли краще зрозуміти, індекс і поділитися вашим вмістом.

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

Наприклад, два найгірших штрафів, які ваш веб-сайт може зіткнутися з точки зору оптимізації на сторінці, є штраф "дублікат назви" та "дубльований метег" штраф. Ці два теги несуть відповідальність за те, що надання вашого веб-сайту до Google. Вони також диктують текст, який користувач побачить, коли ваш веб-сайт відображається в результатах пошуку Google.

Якщо кожна сторінка на вашому веб-сайті має таку ж точну назву та той самий точний набір опису, Google матиме важкий час розуміння того, що ваш веб-сайт. Як результат, Google не збирається платити занадто багато уваги на ваш веб-сайт, і це, безумовно, не вважає її владою.

Якщо ви зацікавлені в вивченні більш технічної на сторінці SEO , Докладніше про мій підхід у Speckyboy .

Тепер, коли ви розумієте трохи більше про головний елемент і чому це так важливо під капотом, давайте подивимося, як побудувати головний компонент SEO для реагування.

Створіть свій компонент, що дружелюбний

Головний компонент SEO, який я деталізую в цій статті, специфічна для наступних. Однак, якщо ви використовуєте іншу карту реагування або просто використовуєте реагування, ви можете використовувати Реактивний шолом На місці головного компонента наступного.

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

& lt; head & gt;
& lt; назва & gt; & lt; / title & gt;
& lt; meta name = "Опис" Content = "" / & gt;
& lt; Meta Heature = "OG: тип" Content = "Веб-сайт" / & GT;
& lt; meta name = "Ог: назва" властивість = "OG: назва" Content = "" / & GT;
& lt; meta name = "Ог: опис" властивість = "Ог: опис" Content = "" / & gt;
& lt; Meta Heature = "OG: Site_Name" Content = "" / & GT;
& lt; Meta Heature = "OG: URL" Content = "" / & GT;
& lt; meta name = "Twitter: карта" Content = "резюме" / & gt;
& lt; meta name = "Twitter: назва" Content = "" / & gt;
& lt; meta name = "Twitter: опис" Content = {props.desc} / & gt;
& lt; meta name = "Twitter: сайт" Content = "" / & gt;
& lt; meta name = "Twitter: Creator" Content = "" / & GT;
& lt; link rel = "icon" type = "зображення / png" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "стильний таблиця" href = "" / & gt;
& lt; Meta Heature = "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 або подібні. Цей файл слід зберігати в частки каталог.

Ваш початковий компонент буде виглядати щось на зразок цього:

 Імпортувати голову від "Next / Head"
const meta = (реквізити) = & gt; ("
& lt; head & gt;
& lt; назва & gt; & lt; / title & gt;
& lt; meta name = "Опис" Content = "" / & gt;
& lt; Meta Heature = "OG: тип" Content = "Веб-сайт" / & GT;
& lt; meta name = "Ог: назва" властивість = "OG: назва" Content = "" / & GT;
& lt; meta name = "Ог: опис" властивість = "Ог: опис" Content = "" / & gt;
& lt; Meta Heature = "OG: Site_Name" Content = "" / & GT;
& lt; Meta Heature = "OG: URL" Content = "" / & GT;
& lt; meta name = "Twitter: карта" Content = "резюме" / & gt;
& lt; meta name = "Twitter: назва" Content = "" / & gt;
& lt; meta name = "Twitter: опис" Content = {props.desc} / & gt;
& lt; meta name = "Twitter: сайт" Content = "" / & gt;
& lt; meta name = "Twitter: Creator" Content = "" / & GT;
& lt; link rel = "icon" type = "зображення / png" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "стильний таблиця" href = "" / & gt;
& lt; Meta Heature = "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-menta.jss'

Тепер ви можете помістити мета-компонент у вашій функції рендерингу, як би ви з натисними головними компонентами Nextjjs.

Створіть властивості компонентів

Тепер, коли ви імпортували та розмістив свій компонент, ви хочете встановити властивості, які вам потрібно для своїх метаданих. Зазвичай ви повинні включати назву, опис та URL-адресу для кожної сторінки, але ви також можете включити зображення та інші дані, якщо це необхідно.

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

 & lt; meta
title = "Це назва | Назва веб-сайту "
desc = "Це опис"
Canonical = "https://www.someurl.com"
CSS = '/ Static / CSS / Styles.css'
js = '/ static / js / scripts.js'
/ & gt; 

Якщо ви просто будуєте статичний веб-сайт з NextJs, ви повинні мати можливість заповнити властивості статичним вмістом. Однак, якщо ви завантажуєте сторінки з динамічних маршрутів та заповнення шаблонів сторінок з динамічним кодом, ви хочете динамічно встановити ці властивості.

Наш веб-сайт, Ім'я власне , використовує WordPress API як джерело даних, але ви можете використовувати інструкції нижче, використовуючи значну кількість будь-якого відпочинку або API GraphQL.

За запитом сторінки ви хочете захопити та повернути відповідні дані метаданих та сторінок під час getinitialprops () async функція. Тоді це дозволить вам використовувати динамічні дані в межах функції Render, щоб Google та інші роботи могли сканувати інформацію.

Залежно від джерела даних та деяких інших факторів, ви можете зробити інший підхід, щоб отримати початкові властивості, але тут є основним підходом, щоб ви запущені.

Статичні асингингічніпроплю (CTX) {
const res = await fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
CONST ERRON_CODE = RES.STATUSCODE & GT; 200? res.statuscode: false;
const data = await res.json ();
Нехай url = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
Нехай meta_title = чекають даних 
 .meta_title
Нехай meta_desc = чекають даних 
 .meta_desc
повернення {
код помилки,
   case_study: дані,
   meta_title: meta_title,
   meta_desc: meta_desc,
   URL: URL
}
}

Тепер ви зможете отримати доступ до властивостей, встановлених у межах вашої функції Render. При використанні у вашому коді вони виглядають щось подібне.

 & lt; meta
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, можуть бути умовними. Ви хочете взяти це до уваги у своєму компоненті.

У нашому прикладі ми передаємо наші властивості компоненту за допомогою аргументу реквізити . Потім ми можемо отримати доступ до окремих реквізитів, використовуючи їхні імена, наприклад, reps.title або пропис .

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

 {
props.css & amp; & amp;
& lt; link rel = "стильний таблиця" href = {`$ {props.cs}`} / & gt;
} 

Таким чином, якщо немає встановленого CSS, ви не встановите пустий тег посилання на вашій сторінці. Ви можете використовувати цей самий підхід для файлів JavaScript.

Після того, як ви закінчите заповнення головного компонента, він повинен виглядати щось подібне:

 Імпортувати голову від "Next / Head"
const meta = (реквізити) = & gt; ("
& lt; head & gt;
& lt; title & gt; {props.title} & lt; / title & gt;
& lt; meta name = "Опис" Content = {props.desc} / & gt;
& lt; Meta Heature = "OG: тип" Content = "Веб-сайт" / & GT;
& lt; meta name = "Ог: назва" властивість = "OG: назва" Content = {props.title} / & gt;
& lt; meta name = "Ог: опис" властивість = "OG: опис" Content = {props.desc} / & gt;
& lt; meta heature = "og: site_name" Content = "належний іменник" / & gt;
& lt; Meta Heature = "OG: URL" Content = {`$ {props.canonical}`} / & gt;
& lt; meta name = "Twitter: карта" Content = "резюме" / & gt;
& lt; meta name = "Twitter: заголовок" Content = {props.title} / & gt;
& lt; meta name = "Twitter: опис" Content = {props.desc} / & gt;
& lt; meta name = "Twitter: сайт" Content = "@ propernounco" / & gt;
& lt; meta name = "Twitter: Creator" Content = "@ propernounco" / & gt;
& lt; link rel = "icon" type = "зображення / png" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / images / favicon.ico" / & gt;
{
props.css & amp; & amp;
& lt; link rel = "стильний таблиця" href = {`$ {props.cs}`} / & gt;
}
{
props.image? ("
& lt; Meta Heature = "OG: image" Content = {`$ {props.image}`} / & gt;
): (
& lt; Meta Heature = "OG: Image" Content = "https://www.propernound.cohttps://cdn.thefastcode.com/static/images/proper-nound-social.png" / & gt;
)
}
{
props.image & amp; & amp;
& lt; meta name = "Twitter: image" Content = {`$ {props.image}`} / & gt;
}
{
props.canonical & amp; & amp;
& lt; link rel = "canonical" href = {`` $ {props.canonical} `} / & gt;
}
{
props.js & amp; & amp;
& lt; тип сценарію = "текст / javascript" src = {`$ {props.js}`} & gt; & lt; / script & gt;
}
& lt; / head & gt;
)
Експорт МЕТА 

Читати далі:

• Розробити відновлювані компоненти реагування
• 14 кращих JavaScript Apis
• 15 основних інструментів JavaScript ви повинні використовувати