Кращі практики для Nuxt.js SEO

Однією з найбільших точок продажу Nuxt.js є те, що він може допомогти вашій програмі з оптимізацією пошукових систем (SEO) та покращити рейтинг в Google. У цій статті ми переглянемо найкращі практики, щоб переконатися, що ваша програма Nuxt налаштована належним чином для ранжирування в пошукових системах.

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

Як Nuxt.js допомагає вам в SEO

Перш ніж зануритися, давайте швидко переглянемо, що таке Nuxt і як це може допомогти вам скласти свою заявку для SEO.

Програми для однієї сторінки не налаштовані для SEO

Зазвичай за допомогою Vue.js ви створюєте програму для однієї сторінки. Це суто створений JavaScript додаток, у якому є лише один файл, порожній index.html. Вміст заповнюється в index.html після завантаження JavaScript, а також JavaScript переймається переключенням маршрутів.

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

Nuxt.js спрощує створення універсальної програми

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

Універсальний додаток на сторінці міститиме вміст, як теги та <meta> в <head> та <h1> тегах у <body>, перш ніж будь-який JavaScript буде завантажений. Ці теги допомагають сканерам визначати, що знаходиться на сторінці.</p><h3>Як Nuxt.js обробляє голову для всіх ваших сторінок</h3><p>Nuxt використовує бібліотеку під назвою vue-meta для обробки елемента <head> на кожній вашій сторінці. Сторінка - це лише термін Nuxt для маршруту, і кожна знаходиться в папці сторінок.</p><p>Nuxt дає три способи налаштування елемента <head> на сторінках програми. Давайте розглянемо їх зараз.</p><h3>1) Налаштування метатегів за замовчуванням для всіх сторінок</h3><p>Нечасто на різних сторінках у вашій програмі ділитися одними і тими ж метатегами. Nuxt дозволяє встановлювати типові параметри для кожної сторінки, встановлюючи властивість head у файлі nuxt.config.jsfile.</p><pre>module.exports = {   голова: {     titleTemplate: '% s - Nuxt.js',     meta: [// Кожен об’єкт у цьому масиві - це власний метатег       {charset: 'utf-8'},       {name: 'viewport', content: 'width = ширина пристрою, початкова шкала = 1'},       {hid: 'description', назва: 'description', content: 'Meta description'}     ]   } };</pre><p>Клацніть тут, щоб побачити всі властивості, які можна визначити всередині головного ресурсу.</p><p>Примітка: Nuxt.js використовує заголовок для назви ресурсу. vue-meta використовує metaInfo. Це одна і та ж властивість.</p><h3>2) Налаштування метатегів для ваших сторінок індивідуально</h3><p>Всередині кожної сторінки Nuxt можна визначити метод голови. Ви можете вручну налаштувати теги заголовків для окремої сторінки, і Nuxt замінить все, що ви встановили за замовчуванням у файлі nuxt.config.jsfile.</p><p>Ось приклад файлу About.vue із власними метатегами в методі head:</p><pre><шаблон>   <h1> Про сторінку </h1> </template></pre><pre></pre><h3>3) Налаштування метатегів для динамічних сторінок</h3><p>Ви також можете налаштувати свої метатеги за допомогою динамічних сторінок - сторінок, де є один маршрут, який може бути відображений по-різному. Сторінка профілю користувача може бути одним із прикладів.</p><p>Динамічні маршрути визначаються за допомогою префіксації вашого компонента або каталогу .vue у папці сторінок.</p><pre>сторінки / - | користувачів / ----- | _username.vue</pre><p>Це створить ваш код маршруту Vue.js, як показано нижче:</p><pre>маршрутизатор: {   маршрути: [{     ім'я: 'user-id',     шлях: '/ users /: ім'я користувача?',     компонент: 'сторінки / користувачі / _username.vue'   }] }</pre><p>І всередині методу head ви маєте доступ до даних компонентів за допомогою цього. Ви можете використовувати дані, до яких у вас є доступ до цього ресурсу, щоб налаштувати, як ваші метатеги відображаються з даними вашого компонента.</p><p>Ось приклад того, як можна було відобразити метатеги на цій сторінці профілю користувача:</p><pre></pre><h3>Що приховується і як це допомагає SEO?</h3><p>Можливо, ви помітили приховану властивість у прикладах метатегів зверху. Це властивість, яка використовується для зменшення поведінки vue-meta за замовчуванням.</p><p>За замовчуванням при використанні vue-meta він створюватиме повторювані теги замість заміни вихідного тегу. Але Google може штрафувати вас за те, що під час сканування вашого веб-сайту повторюються дублікати тегів, тому найкраще завжди мати унікальну приховану властивість на кожному з ваших метатегів, щоб однозначно їх ідентифікувати. Наявність властивості прихованого сигналу подасть vue-meta на заміну тегу замість його дублювання.</p><p>Клацніть тут, щоб дізнатися більше про дублювані метатеги та те, як приховано допоможе вам уникнути їх.</p><h3>Обробка переспрямувань за допомогою Nuxt.js</h3><p>Згідно з HubSpot, переадресація 301 - це постійне переадресація з однієї URL-адреси на іншу. 301 переадресація надсилає відвідувачів сайту та пошукових систем за іншою URL-адресою, ніж та, яку вони спочатку набрали у свій браузер або обрана зі сторінки результатів пошуку.</p><p>301 переадресації звичайно використовувати, коли структура вашого веб-сайту змінюється, і ви все ще хочете зберегти потужність рейтингу вихідного посилання.</p><p>Nuxt допомагає вам у цьому випадку, встановлюючи властивість serverMiddleware всередині вашого файлу nuxt.config.js. Властивість serverMiddleware допомагає налаштувати проміжне програмне забезпечення, яке запускатиметься, коли сторінка надається на стороні сервера.</p><p>Ось приклад використання цієї властивості для налаштування функції, яка обробляє 301 переадресацію для вашої програми.</p><pre>module.exports = {   serverMiddleware: [     '~ / servermiddleware / seo.js'   ] };</pre><p>Ви можете визначити маршрути, які потрібно переадресувати всередині файлу під назвою /301.json та імпортувати його в середнє програмне забезпечення seo.js.</p><pre>[   {"from": "/ old", "to": "/ new"},   {"from": "/ veryold", "to": "/ verynew"},   {"from": "/ too old", "to": "/ new"} ]</pre><p>Тоді ви можете запустити файл через маршрути, визначені у 301.json, і повернути йому відповідь 301 для кожного разом з відповідними заголовками HTTP.</p><pre>const переадресації = вимагають ('../ 301.json');</pre><pre>module.exports = функція (req, res, next) {      const redirect = redirects.find (r => r.from === req.url);</pre><pre>  if (перенаправлення) {     console.log (`перенаправлення: $ {redirect.from} => $ {redirect.to}`);     res.writeHead (301, {Місце: redirect.to});     res.end ();   } else {     наступний ();   }</pre><pre>}</pre><p>Клацніть тут, щоб дізнатись більше про проміжне програмне забезпечення Nuxt.js і про те, як воно може допомогти вам більше, ніж просто переадресації.</p><h3>SEO ефекти під час надання вашої програми в спа-режимі</h3><p>У додатках Nuxt існує кілька режимів збірки. Ви можете зробити свою заявку універсальною або курортною.</p><p>Які ефекти керують усіма тегами в <head>, якщо ви вирішили рендерувати свою програму в спа-режимі?</p><p>Оскільки візуалізація на стороні сервера не відбувається, ви не отримаєте жодної переваги від того, щоб вміст спочатку був на вашій сторінці. vue-meta все ще виконує свою роботу по обробці <head>, але якщо ви додаєте свою програму як додаток на одній сторінці, спочатку на ній немає вмісту, оскільки всі теги будуть створені після завантаження JavaScript. Єдині ефекти - суто фронтальний. Наприклад, оновлення тегу заголовка, коли користувач змінив уявлення.</p><h3>Висновок</h3><p>Nuxt надає вам великий контроль над тим, як ви надаєте елемент <head> у своєму універсальному додатку, що допомагає в SEO. У вас є багато варіантів встановлення глобальних значень за замовчуванням всередині файлу nuxt.config.js, а також ви маєте доступ до головного методу на кожній окремій сторінці, де ви можете додатково налаштувати речі. Нарешті, ви можете налаштувати сервернепроменеве програмне забезпечення, яке може піклуватися про такі речі, як перенаправлення 301, щоб підтримувати потужність рейтингу посилання.</p><p>В наступні місяці VueMastery.com створюватиме вміст для додатків Nuxt, створить безкоштовний акаунт сьогодні та отримає сповіщення про його випуск.</p><h3>Продовжуйте читати</h3><ul><li>10 причин використання Nuxt.js</li><li>VuePress проти Nuxt.js</li><li>Як створити переходи Vue.js</li></ul></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Дивитися також</h4><a href="/deal/deep-learning-best-practices-1-weight-initialization-41da0b/" title="Найкращі практики глибокого навчання (1) - Ініціалізація ваги">Найкращі практики глибокого навчання (1) - Ініціалізація ваги</a><a href="/deal/why-meeting-gary-vee-was-the-best-thing-to-happen-to-me-df28eb/" title="Чому зустріч з Гері Ві була найкращою річчю, яка сталася для мене">Чому зустріч з Гері Ві була найкращою річчю, яка сталася для мене</a><a href="/deal/7-of-the-best-knowledge-podcasts-578a3b/" title="7 найкращих подкастів знань">7 найкращих подкастів знань</a><a href="/deal/best-10-programming-languages-to-learn-in-2018-a40d34/" title="Кращі 10 мов програмування, які слід вивчити у 2018 році">Кращі 10 мов програмування, які слід вивчити у 2018 році</a><a href="/deal/50-best-resources-when-learning-to-code-e2db7f/" title="50 кращих ресурсів при навчанні кодування">50 кращих ресурсів при навчанні кодування</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="vn flag"></i></a><a href="https://tr.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="tr flag"></i></a><a href="https://th.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="th flag"></i></a><a href="https://sv.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ch flag"></i></a><a href="https://sr.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="rs flag"></i></a><a href="https://sl.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="si flag"></i></a><a href="https://sk.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="sk flag"></i></a><a href="https://ru.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ru flag"></i></a><a href="https://ro.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ro flag"></i></a><a href="https://pt.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="pt flag"></i></a><a href="https://pl.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="pl flag"></i></a><a href="https://de.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="de flag"></i></a><a href="https://ar.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="sa flag"></i></a><a href="https://bg.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="bg flag"></i></a><a href="https://cs.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="cz flag"></i></a><a href="https://da.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="dk flag"></i></a><a href="https://el.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="gr flag"></i></a><a href="https://es.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="es flag"></i></a><a href="https://et.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ee flag"></i></a><a href="https://fi.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="fi flag"></i></a><a href="https://fr.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="fr flag"></i></a><a href="https://hi.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="in flag"></i></a><a href="https://hr.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="hr flag"></i></a><a href="https://hu.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="hu flag"></i></a><a href="https://id.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="id flag"></i></a><a href="https://it.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="it flag"></i></a><a href="https://ja.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="jp flag"></i></a><a href="https://ko.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="kr flag"></i></a><a href="https://lt.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="lt flag"></i></a><a href="https://lv.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="lv flag"></i></a><a href="https://ms.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="my flag"></i></a><a href="https://finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="nl flag"></i></a><a href="https://no.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="no flag"></i></a><a href="https://uz.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="uz flag"></i></a></div>finleyandoliver.com<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>