SEO Friendly SPA

Програми для однієї сторінки та SEO
Досить URL
Мапи сайтів
Кешування
Попередня візуалізація
Візуалізація на стороні сервера

SEO має важливе значення для залучення органічного трафіку на ваш сайт.

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

Пошукова оптимізація (SEO) - це дисципліна, спрямована на те, щоб веб-сайти мали вищі результати в результатах пошуку в органічних (без платних) пошукових системах, таких як Google, Bing і Yahoo. Вона також перетворилася на соціальні медіа, такі як Twitter, Facebook і Instagram. Тим не менш, SEO охоплює більше, ніж просто зробити пошук дружніх URL-адрес і ключових слів і додати їх до цих платформ. Вона включає в себе все, від того, як ви посилаєтеся на ваш сайт, до слів на самих сторінках і мета-тегів, які ви включаєте в голову. Фактично, цілі книги були написані на цю тему, і компанії існують виключно, щоб допомогти вам з вашим SEO. Маючи це на увазі, більшість конкретних тем SEO не будуть розглянуті тут. Замість цього я зосередимося в першу чергу на речах, які ви можете зробити в рамках SPA, використовуючи JavaScript, щоб зробити ваш сайт більш дружнім для SEO. Правила для веб-майстрів Google і Bing містять прості поради щодо SEO. Тому погляньте на ці ресурси, перш ніж продовжувати.

Правила для веб-майстрів Google:

com/webmasters/answer/35769?hl=en> https://support.google.com/webmasters/answer/35769?hl=uk

Правила для веб-майстрів Bing:

https://www.bing.com/webmaster/help/webmaster-guidelines-30fba23a

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

СПА відрізняються від традиційних веб-сайтів. У перші дні Інтернету веб-сайт був просто файлом HTML, який подавали з комп'ютера в коледжі, урядових установах або в бізнесі. Їх було легко шукати, оскільки весь вміст був безпосередньо вбудований у цей файл, подібно до читання документа в текстовому процесорі. Вона мала чітку ієрархію, як і документ. Об'єктна модель документа (DOM), яку використовує веб-сайт, навіть відображає це. Наприклад, теги <h1> через <h6> є заголовками, які використовуються для запуску частин документа. Тег <p> - це абзац, і, як правило, існує кілька абзаців, що містять вміст у <section>. І <таблиця> використовується для табличних даних. Якщо вам потрібна додаткова інформація про сам HTML, прочитайте MDN Вступ до HTML . Докладніше про DOM, як взаємодіяти з ним за допомогою читання MDN Вступ до DOM .

Візуалізація на стороні сервера була додана пізніше як спосіб завантаження вмісту на сторінку, перш ніж вона була подана клієнту. Це дозволило людям писати блоги та сайти новин і, зрештою, починати створювати додатки для задоволення різноманітних бізнес-потреб. Коли додатки зростали, люди повинні були почати використовувати HTML, щоб висловити речі, які не дуже подібні до документів. Це створило потребу в SEO для того, щоб дозволити пошуковим системам знаходити вміст цих сайтів і додатків.

Однак, оскільки JavaScript-фреймворки стали більш поширеними, веб-сайти змінилися ще більш різко. Такі функції, як нескінченна прокрутка, асинхронне завантаження даних після завантаження HTML через Ajax та інші бібліотеки XHR, а також рендеринг елементів на стороні клієнта, заважають пошуковим системам сканувати сторінки. SPA можуть навіть оновлювати всі сторінки, не вдаючись до іншого запиту на сервер або навіть змінюючи URL-адресу.

Тепер СПА є звичайною справою, а пошукові системи знають, як їх споживати. Google створив і Microsoft прийняв Angular.js, Facebook зробив те ж саме з React.js. Вони також переробили свої функції пошуку, щоб мати можливість повністю завантажувати та сканувати СПА. Але це не означає, що ви можете просто побудувати один і просто показати його в пошукових системах. Не вдаючись у основи того, як працює SEO, ось деякі речі, які ви можете зробити, щоб ваш SPA працював з пошуковими системами.

Досить URL

Багато фреймворків на стороні клієнта використовують хеші (URL-адреси, які містять #, такі як http (s): //www.example.com/#about) і hashbangs (http (s): //www.example.com/#! Key = value ) для обробки їх маршрутизації. Функціонально СПА веде себе так само, як звичайний веб-сайт. URL-адреса змінюється, і вміст оновлюється за допомогою маршрутизатора JavaScript або інших засобів. І навіть якщо ви думаєте, що роботи, що сканують ваш сайт, можуть не хвилювати вас, якщо ви використовуєте хеш, користувачі, які використовують ваш сайт, побачать більш чистий, більш зручний для користувача URL без них.

Окрім того, деякі сканери, такі як інтерпретація URL-адрес Google з hashbangs #! як індикатор існування альтернативного звичайного URL-адреси, що забезпечує одне і те ж стан сторінки під час завантаження. З цієї причини рекомендується використовувати лише хешировані http (s): //www.example.com/#/pagename або стилі HTML5 безризикові маршрути, такі як http (s): //www.example.com/pagename, використовуючи такі технології, як PushState. PushState - це спосіб змінити URL-адресу, яка відображається в браузері через JavaScript, без перезавантаження сторінки. Він змінює об'єкт історії, наприклад: window.history.pushState (дані, "Назва сторінки", "/ new-url"). У результаті ви отримаєте гарну URL-адресу.

Іншим часто використовуваним трюком URL є рядок запиту. Використання рядка запитів для подібних категорій, пошукових термінів та інших параметрів є цілком прийнятним. Його можна використовувати в поєднанні з будь-якою з вищезазначених методів маніпулювання URL-адресами. Пошукові системи можуть відрізняти http (s): //www.example.com/? Category = people від http (s): //www.example.com/? Category = автомобілі, особливо якщо кожна URL-адреса визначена та заохочується індексується у вашій карті сайту.

Мапи сайтів

Файли Sitemap використовуються пошуковими системами для кращого розуміння вмісту вашого веб-сайту. Можливо, вам не завжди знадобиться. Такі, як якщо б ваш сайт був дуже маленьким і добре зв'язаним у всьому. Однак, якщо ваш сайт дійсно великий або погано пов'язаний, скоріше за все, веб-сканери можуть пропустити нові або нещодавно оновлені сторінки.

Але якщо ваш сайт має великий архів сторінок із вмістом, які є ізольованими або не дуже добре пов'язані один з одним, карта сайту може бути гарною стратегією. Наприклад, якщо сторінки вашого сайту не посилаються один на одного через посилання, ви можете вказати їх у файлі sitemap, щоб переконатися, що веб-сканери не пропускають ці сторінки. Окрім того, якщо ваш сайт є новим і має декілька зовнішніх посилань на нього, веб-сканери не можуть його знайти. Або якщо ви використовуєте такі метадані, як відео чи вміст зображення. Сканери зазвичай переходять з однієї сторінки на іншу і, можливо, не виявлять ваші сторінки чи вміст, якщо до них не посилаються інші сайти. У цьому випадку карта сайту корисна.

Для того, щоб бот використовував вашу карту сайту, потрібно створити та розмістити файл з ім'ям sitemap.xml. Вміст і структура вашого sitemap.xml тут не розглядається. Детальніше читайте на Докладніше про Sitemaps - довідку з консолі пошуку .

Якщо ваш сайт статично розміщений, ви можете просто розмістити sitemap.xml на кореневому рівні. Якщо ви використовуєте серверний фреймворк, такий як Express, ви можете розмістити файл таким чином:

app.get ('/ sitemap.xml', (req, res, next) => {
res.sendFile ('public / sitemap.xml')
})

Є й інші способи розміщення файлу залежно від вашого фреймворку. Наприклад, за допомогою Express ви можете обслуговувати все в загальній папці, використовуючи express.static. Подивитися Обслуговування статичних файлів у Express для отримання додаткової інформації.

app.use (express.static (__ dirname + '/ public'))

Щоб повідомити ботів про файл файлу sitemap, вам доведеться посилатися на нього у файлі з назвою robots.txt:

// robots.txt
Мапа сайту: /sitemap.xml

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

app.get ('/ robots.txt, (req, res, next) => {
res.sendFile ('public / robots.txt')
})

Або, якщо ви використовуєте express.static, просто помістіть його в папку / public. Існує багато способів зробити це, і це залежить від сервера (Apache, Nginx, Express і т.д.).

Боти завжди будуть шукати кореневу URL-адресу цього файлу. Переконайтеся, що він подається за адресою http (s): //www.example.com/robots.txt.

Крім того, доступні інструменти для динамічного відображення ваших мап сайту. Популярним вибором для Node є пакет NPM sitemap .

Кешування

Ще один простий спосіб підвищити ваш SEO полягає в тому, щоб мати більший час завантаження сторінки. Сучасні веб-сканери піклуються про час завантаження й визначатимуть пріоритетність швидших сторінок із подібним вмістом над повільними. Оскільки фреймворки JavaScript виводяться після завантаження сторінки та всіх активів (іноді навіть очікування завершення викликів Ajax / XHR), вони, як правило, повільніше, ніж попередньо рендерінг на стороні сервера. Я рекомендую використовувати Google PageSpeed Insights для перевірки сторінок.

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

Якщо ви розміщуєте файли в статичній папці, ви можете просто використовувати Express.static:

const cacheTime = 86400000 * 10 // 10 днів app.use (express.static (__ dirname + '/ public', {maxAge: cacheTime}))

Крім того, якщо ви використовуєте sendFile, ви можете встановити там кеш:

app.get ('/ robots.txt, {maxAge: cacheTime}, (req, res) => {
res.sendFile ('public / robots.txt')
})

Якщо ви розміщуєте свої файли на CDN, вам потрібно буде налаштувати правила кешування. Це рекомендується для чистих статичних сторінок, і ви можете спробувати Amazon CloudFront, CloudFlare або інші CDN. Але якщо ви працюєте з Node, це може бути дуже простим і масштабованим рішенням. Я рекомендую звернути увагу на правила на сторінці Express 4.x - Посилання на API .

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

$ npm install compression const compression = require ('compression')
const express = require ('express') const app = express () // стиснути всі відповіді
app.use (compression ()) // додавання всіх маршрутів

Див документації для конфігурації.

Попередня візуалізація

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

Попередня рендеринг є гарним вибором, оскільки немає додаткового завантаження сервера, а отже, швидше і дешевше, ніж рендеринг на стороні сервера. Це також більш проста установка виробництва та дозволяє писати більш простий код програми (немає необхідності в ізоморфному коді). Тому вона менш схильна до помилок і може бути більш легко кешуватися довше. Крім того, для цього не потрібний виробничий сервер Node.js.

Попереднє візуалізація не завжди є гарним вибором. Наприклад, він не працює добре для сторінок, які відображають постійно змінювані дані, які потрібно динамічно завантажувати під час завантаження, або для сторінок, які мають вміст, специфічний для користувача. Зазвичай сторінки, що відповідають цим вимогам, менш важливі для попереднього візуалізації. Тільки часто використовувані сторінки, які ви хочете швидко обслуговувати, повинні бути попередньо відтворені. В іншому випадку рендеринг на стороні сервера (SSR) може бути кращим варіантом. (Докладніше про РСБ див. У наступному розділі).

Ось приклад того, як попередньо відтворити програму за допомогою модуля prerender-spa-plugin для Webpack. Зазвичай використовується JS bundler, який має багато інших можливостей за допомогою плагінів. Ви можете знайти багато інших інструментів, сумісних з іншими мовами, пакетами або фреймворками на основі ваших потреб.

$ npm install --save-dev prerender-spa-plugin

Плагін pre render створює примірник PhantomJS і запускає програму. Потім він робить знімок DOM і виводить знімок у файл HTML у папці збирання Webpack. Він повторює цей процес для кожного маршруту, тому для побудови програми, якщо у вас є багато сторінок, може знадобитися деякий час.

Ось простий приклад простої конфігурації Webpack з використанням модуля попередньої візуалізації.

// webpack.conf.js
const path = require ('path')
const PrerenderSpaPlugin = require ('prerender-spa-plugin')
module.exports = {
// ...
плагіни: [
new PrerenderSpaPlugin (
// Абсолютний шлях до скомпільованого SPA
path.join (__ dirname, "./public"),
// Список маршрутів для попереднього відтворення
['/', '/ about', '/ contact']
)
]
}

У цьому прикладі створюється новий екземпляр плагіна pre-render, і ви даєте йому знати, в яку папку слід виводити і список маршрутів, які хочете переглядати браузер PhantomJS, створюючи файли HTML. Це єдині дві необхідні опції під час налаштування плагіна. Також можна додатково передати більш просунуту конфігурацію плагіну.

Якщо ви не покладаєтеся на асинхронно наданий вміст, наприклад, після запиту Ajax / XHR, жодна з цих опцій не повинна бути необхідною. Всі синхронні сценарії вже виконані перед захопленням вмісту сторінки. Кожен з наступних варіантів є частиною опціонального об'єкта опцій.

Якщо потрібно почекати, поки на сторінці не буде запущено певну подію JavaScript:

captureAfterDocumentEvent: 'custom-post-render-event'

Потім у вашому файлі JavaScript відправити подію:

document.dispatchEvent (нова подія ('custom-post-render-event'))

Замість цього можна зачекати, поки певний елемент HTML не буде виявлено за допомогою document.querySelector.

captureAfterElementExists: '#content'

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

lang: javascript
captureAfterTime: 5000

Можна навіть комбінувати стратегії, якщо хочете. Наприклад, якщо ви тільки іноді хочете почекати, поки подія буде запущена, ви можете створити тайм-аут, об'єднавши captureAfterTime з captureAfterDocumentEvent. При поєднанні стратегій вміст сторінки буде захоплено після першої спрацьованої стратегії.

Замість того, щоб відмовитися від помилок JavaScript (за замовчуванням), ви можете просто проігнорувати їх.

lang: javascript
ignoreJSErrors: true

Щоб змінити шлях індексного файлу, замість стандартного index.html у статичному корені:

lang: javascript
indexPath: path.resolve ('/ public / path / to / index.html')

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

lang: javascript
maxAttempts: 10

Тепер ви повинні запобігти переходу PhantomJS від URL-адреси, що передається, і запобігати завантаженню вбудованих фреймів (наприклад, вбудованих дисків Disqus і Soundcloud), які не є ідеальними для SEO і можуть спричиняти помилки JavaScript.

lang: javascript
navigationLocked: true

Нижче наведено параметри конфігурації для PhantomJS, для рідкісних випадків, коли потрібні спеціальні налаштування для певних систем або додатків.

lang: javascript
// http://phantomjs.org/api/command-line.html#command-line-options
phantomOptions: '--disk-cache = true', // http://phantomjs.org/api/webpage/property/settings.html
phantomPageSettings: {
loadImages: true
}, // http://phantomjs.org/api/webpage/property/viewport-size.html
phantomPageViewportSize: {
ширина: 1280,
висота: 800
}

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

Аргумент контексту функції містить два властивості:

html - результуючий HTML після попередньої візуалізації
маршрут - маршрут, який зараз обробляється (наприклад, "/", "/ about" або "/ contact")

Що б не було повернуто, буде надруковано у попередньо відтворений файл.

lang: javascript
postProcessHtml: context => {
const titles = {
'/': 'Головна',
'/ about': 'Наша історія',
'/ contact': 'Зв'язатися з нами'
}
return context.html.replace (
/ <назва> [^ <] * </ title> / i,
'<title>' + title [context.route] + '</title>'
)
}

Використання цього додатка дозволить вам створювати прості HTML-сторінки, використовуючи будь-яку бібліотеку JS, яку ви використовуєте. Наприклад, React, Vue, Angular, Riot або будь-який інший, який може розміщуватися в каталозі на вашому сервері за допомогою Express або будь-якого іншого сервера.

Зауважте, що модуль попереднього візування працює тільки з стратегіями маршрутизації, використовуючи HTML5 історію API (PushState). За допомогою цього методу не буде працювати URL-адреса хешу (вибуху). Тому переконайтеся, що маршрутизатор JS налаштований на використання URL-адрес, таких як http (s): //www.example.com/contact. Крім того, ви завжди повинні завантажувати ваш SPA, коли DOM готовий, помістивши свій тег всередину DOM-події DOMContentLoaded.

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

Візуалізація на стороні сервера

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

Для отримання додаткової інформації про рендеринг на стороні сервера з фреймворками JavaScript перевірте ReactDomServer і Візуалізація на стороні сервера . Крім того, більшість інших структур JS мають рішення SSR. Наприклад, два з моїх улюблених структур SSR є NextJS і GatsbyJS . Додатково, використовуючи SSR двигун шаблонів для Express завжди буде працювати і насправді те, що ми робимо для нашого Аврелій домашню сторінку. Наразі ми використовуємо MarkoJS for Express який простий у використанні і дуже швидкий.

Будь ласка, не соромтеся коментувати і дайте мені знати, що ви думаєте про цей посібник з SEO для SPA. Якщо є що-небудь, що ви хотіли б бачити додані або питання, які ви просто дайте мені знати, і я можу спробувати допомогти. Якщо я отримаю достатню кількість зворотних зв'язків, я можу зробити конкретні запити на SSR.