Vue.js SEO-Friendly SPAs: Поради, інструменти та приклад попереднього відтворення

1. Загальні поради SEO
2. → Мета-теги
3. → Мобільна оптимізація
4. → HTTPS
5. → Швидкість сторінки 🚀
6. → Мапа сайту 🗺️
7. → Створення посилань ⛓️
8. Спеціальні питання SEO Vue.js SPA
9. Надання на стороні сервера
10. Попереднє зображення
11. Vue.js SEO технічний приклад з використанням попереднього відтворення
12. 1. Встановлення prerender-spa-plugin
13. 2. Налаштування Vue.js для prerender
14. 3. Створення вашого SEO-дружнього сайту Vue.js
15. Демо в реальному часі, Github repo & відео-підручник
16. Закриття думок

Поспіхом? Перейти до Навчальний посібник із попереднього відтворення Vue.js або демо .

Чи знаєте ви про історію невдалої роботи Hulu?

Повернувшись у 2016 році, сервіс потокового відео онлайн перейняв a Падіння видимості - 56% через погану обробку JS .

Кошмар жодного бізнесу не хоче пройти.

Щоб уникнути подібних лих, потрібно знати, що ви робите під час роботи з сучасними рамками JavaScript.

Тут, у Сніпкарті, ми любимо Vue.js , але цілком відомі питання SEO з Vue.js окремої сторінки застосування.

У цій посаді я хочу показати JS-розробникам, наскільки легко зробити Vue SEO-дружньою.

Я пройду:

• Загальні поради щодо SEO ви повинні завжди застосовуватися.
• Спеціальні питання SEO Vue.js SPA.
• Інструменти для виправлення їх з рендерингами серверів і попередньою підготовкою.
• Технічний приклад SEO Vue.js з використанням prerender-spa-plugin.

Це повністю оновлена ​​версія ресурсу SEO Vue.js. За оригіналом слідували ще дві частини про проблеми, пов'язані з JS frameworks, для React , і Кутовий . Також можна знайти відео версію цього вмісту за адресою кінець цієї публікації.

Загальні поради SEO

Перш ніж ми розглянемо питання SEO, характерні для СПА JavaScript, давайте розглянемо найкращі практики, які розробники повинні прийняти при створенні сайтів, оптимізованих для пошукових систем.

Цей короткий список натхненний деякими з найбільших SEO гравців, таких як Moz, Backlinko і ​​Ahrefs. Я додав посилання на їх ресурси, якщо ви хочете глибше копати.

→ Мета-теги

Мета-теги - плоди з низькою підвіскою. Вони дозволяють показувати пошуковим системам саме те, про що йдеться.

Однак не всі теги народжуються рівноправно. Ви повинні зосередити свою енергію лише на деяких з них, а саме:

• Тип метазмісту - повинен бути присутнім на кожній сторінці, оголошує набір символів для сторінки.
• Назва - вибирайте унікальну назву, яка привертає увагу шукачів, точно описуючи вміст сторінки. Тримайте його лаконічно!
• Мета-опис - Він повинен переконати відвідувачів сайту SERP (Search Engine Results), щоб натиснути на ваше посилання, щоб знайти відповіді на їхні конкретні наміри дослідження.
• Viewport —Потрібно для хорошого мобільного досвіду.

Вчи більше: SEO мета теги , від Moz.

vue-meta є міцним інструментом для керування метаінформацією сторінки в компонентах Vue 2.0.

Соціальні теги можуть також мати значний вплив на SEO, оскільки вони допомагають змісту розповсюджуватися на соціальних платформах, збільшуючи таким чином SEO соціальні сигнали. Є спеціальні теги для всіх великих платформ (Facebook, Twitter, Pinterest, Google+).

Вчи більше: Потрібно мати соціальні теги для Twitter, Google+, Facebook та інших , від Moz.

→ Мобільна оптимізація

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

Вчи більше: Мобільний SEO: остаточне керівництво , по Backlinko.

NativeScript повноваження перехресних платформ Vue.js мобільних додатків.

→ HTTPS

Відсутню сертифікацію HTTPS або порушений конфігурацію може зашкодити ваш веб-сайт. Хіба це не зрозуміло, що пошукові системи схильні підштовхувати сайти, яким довіряють і сертифіковані, зрештою?

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

Вчи більше: HTTP проти HTTPS для SEO: що потрібно знати, щоб залишитися в хороших граціях Google від ahrefs.

→ Швидкість сторінки 🚀

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

Самі Googlebot нетерплячі і не чекають сценарію більше 5 секунд . Якщо ви не відповідаєте цьому тайм-ауту, ви ризикуєте не отримувати адекватний вміст. Швидкість!

Вчи більше: На сайті SEO: швидкість сторінки , від Moz.

→ Мапа сайту 🗺️

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

Файли Sitemap можуть бути не корисними для невеликих веб-сайтів, але це все ще важливий інструмент для SEO.

Вчи більше: Мапи сайтів XML: найрозумніший інструмент на панелі інструментів SEO , від Moz.

Ви можете створити файл sitemap.xml на конфігурація vue-router .

→ Створення посилань ⛓️

Побудова авторитету вашого домену залишається ключовою тактикою SEO. Як Google знає, що ви стали авторитетним ресурсом? Маючи інші відповідні домени, що посилаються на вашу.

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

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

Вчи більше: Створення посилань для SEO: остаточне керівництво , по Backlinko.

Спеціальні питання SEO Vue.js SPA

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

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

Чому так?

Програма з однією сторінкою динамічно додає вміст до сторінок, що має свої переваги, але викликає дві важливі проблеми:

1. Ми дійсно не знаємо, до якої міри Google може сканувати та правильно відтворити JS . Вони вже кілька років говорять про те, що Googlebots здатні це зробити. Проте ці вимоги завжди супроводжуються "але" або двома.
2. Google не є єдиною пошуковою системою . Якщо все ще залишається хитким на його боці, ми знаємо, що інші гравці там ще не повзають JS, тому не зустрічаються з фактичним змістом сторінки.

Так що немає ніякого шляху навколо нього. Якщо ви хочете переконатися, що ваш веб-сайт / додаток Vue.js займає місце в SERP, ви повинні діяти на ньому.

Ваші варіанти?

Надання на стороні сервера

З налаштуванням SSR, ви маєте логіку рендеринга, виконану безпосередньо в бекенді, в середовищі Node.js. Потім HTML-перегляди повертаються клієнту, готові до подання пошукових роботів.

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

Але якщо ви впораєтеся з ним, це, безумовно, шлях до більших додатків. Nuxt.js це, без сумніву, інструмент, який можна використовувати для вашого наданий сервером Vue.js SPA .

Попереднє зображення

Іноді, наприклад, рендеринг на сервері може відчувати переповнення, як у випадку з моєю демонстрацією. Для невеликого СПА з декількома сторінками, попередня рендерінг зробить трюк дуже добре. Тим більше, якщо ваш єдиний інтерес - SEO.

Таким чином, не потрібно додавати програму Vue.js до будь-якого сервера. Візуалізація здійснюється на стороні клієнта з використанням сторонніх плагінів як от:

• Prerender.io - Сумісність з усіма популярними JS фреймворками, включаючи Vue.js.
• prerender-spa-plugin - Плагін webpack, який компілює ваші сторінки в статичні сторінки. Робить весь вміст, доступний у джерелі, та індексацію - це просто.

Останній дуже простий у використанні і був побудований членом основної команди Vue.js, тому він ідеально підходить для мого використання.

Vue.js SEO технічний приклад з використанням попереднього відтворення

Час виправити блог Vue.js, показаний раніше. Використання prerender-spa-plugin , Я буду мати Vue.js SPA, що в хорошій милості Google в найкоротші терміни.

Передумови

• Базові знання Vue.js
• Установки Node.js & npm

1. Встановлення prerender-spa-plugin

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

Почніть з встановлення плагіна з npm.

npm install prerender-spa-plugin

Потім відкрийте файл build / build.js. Там ви знайдете індивідуальні речі для побудови продукції. Вам потрібно буде імпортувати плагін і додати ці рядки у верхній частині файлу:

// /build/build.js const PrerenderSPAPlugin = require ('prerender-spa-plugin'); const Renderer = ПопереднійРозподілPAPlugin.PuppeteerRenderer;

Чому PrerenderSPAPlugin.PuppeteerRenderer? Тому що вам потрібно налаштувати візуалізатор. Необхідно ввести деякі дані, щоб програма могла дізнатися, коли вона буде попередньо передана. Є такі речі, як коментарі Disqus, які ви не зможете зробити.

У 100% SEO-дружніх додатків було б краще скористатися цими коментарями як надані вміст на ваших сторінках. Якщо ви працюєте зі статичним генератором сайтів, вам слід розглянути Staticman для статичного вмісту, створеного користувачем.

Потрібно буде витягти всі записи в блозі та створити список маршрутів, які будуть попередньо відтворені. У реальному виробничому сценарії ви, ймовірно, захочете зателефонувати на ваш безголовий CMS API або зовнішню службу, яка надає ваш вміст. У цьому випадку дані зберігаються у простих JSON-файлах.

Прочитайте файл feed.json і створіть маршрути:

// / build/build.js const fileContent = fs.readFileSync (path.resolve (__ dirname, '..', 'static', 'api', 'feed.json')); const feed = JSON.parse (fileContent); const prenderedRoutes = feed.results.map (x => `/ read / $ {x.id}`); prenderedRoutes.unshift ('/');

Додайте плагіни до конфігурації webpack:

// /build/build.js webpackConfig.plugins.push (новий PrerenderSPAPlugin ({staticDir: path.resolve (__ dirname, '..', 'dist'), route: prenderedRoutes, renderer: new Renderer ({injectProperty: '__PRERENDER_INJECTED ', inject: {prerendered: true}, renderAfterDocumentEvent:' app.rendered '})}))));

Ви отримаєте доступ до змінної вікна .__ PRERENDER_INJECTED.prerendered, коли сайт попередньо відтворює. Це буде корисно для виключення вмісту, який ви не хочете попередньо відтворювати.

Також потрібно вказати подію очікування app.rendered.

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

2. Налаштування Vue.js для prerender

Потім вам доведеться застосувати деякі незначні зміни в деяких компонентах. Для цього я змінив спосіб, у який почав працювати Pace. Я позбувся файлу startup.cs і поклав все в main.js.

Відкрийте файл main.js і змініть спосіб включення компонентів програми:

// /main.js new Vue ({маршрутизатор, візуалізація: h => h (App), mounted () {Pace.start () Pace.on ('hide', () => {document.dispatchEvent (нова подія) ('app.rendered'))}}}}}). $ mount ('# app')

Після встановлення основного компонента запустіть Pace і відправте подію app.rendered при завершенні початкового завантаження.

Останнє оновлення, яке ви повинні зробити, це переконатися, що Disqus не завантажується під час попереднього відтворення сайту.

Відкрийте файл BlogPost.vue, де буде включено компонент Disqus.

Через те, що спочатку модуль prerender-spa-plugin був налаштований, ви матимете доступ до змінної, яка вказує на те, що сайт попередньо продукується.

Оновити метод showComments таким чином:

// /BlogPost.vue showComments () {// Це вводиться за допомогою prerender-spa-plugin на час збирання, ми не попереджуємо коментарі disqus. if (вікно .__ PRERENDER_INJECTED && вікно .__ PRERENDER_INJECTED.prerendered) {return; } setTimeout (() => {this.commentsReady = true}, 1000)}

3. Створення вашого SEO-дружнього сайту Vue.js

Тепер ви готові створити свій сайт. У вашому терміналі використовуйте цю команду:

npm run build

Потім, якщо ви подивитеся на папку dist, ви повинні побачити всі повідомлення в папці читання. Для кожного повідомлення створено статичний файл HTML:

Це воно! Як легко це було, чи не так?

Демо в реальному часі, Github repo & відео-підручник

Дивіться демо-версію тут

Див. GitHub repo тут

Візуальне представлення цього вмісту:

Закриття думок

prerender-spa-plugin - це акуратний плагін. Він легко налаштовується і достатньо гнучка для обробки асинхронних випадків використання, таких як у Pace.

Я витратив близько 2 годин, щоб зрозуміти, як з'єднати всі ці речі та оновити нашу початкову програму для підтримки попереднього відтворення.

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

Якщо вам сподобалася ця посада, будь ласка, займіть секунду поділіться ним у Twitter . Є коментарі, запитання? Натисніть розділ нижче!