1. Що таке СПА та її переваги
2. Виклики SPA та пошукових систем
3. Що потрібно мати на увазі під час створення СПА з точки зору SEO

Односторінкові програми або СПА були промовою міста в світі веб-розробки. Навіть найважливіші гіганти технологій, такі як Google і Facebook, підскочили і відкрили свої рамки - Angular JS і React JS. І якщо ви подивитеся на Github, ви побачите, що SPA-фреймворки - це одне з найпопулярніших репо. Реакція має 75k зірок, VueJS має 66k, а Angular - 57k.


Хоча СЗЗ не зовсім нова річ (в термінах Інтернету) і датуються ще з 2002 року. Стюарт Морріс написав перший на slashdotslash.com, у своїй найпримітивнішій формі. Раніше СПА використовувалися тільки для приладових панелей SaaS і формували важкі програми, але останнім часом це скрізь.

Ви відвідували, IMdb, Netflix, Youtube або Instagram?

Ви будете здивовані, дізнавшись, що всі вони використовують SPA-рамки!

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

Що таке СПА та її переваги

Застосування єдиної сторінки aka SPA саме те, що це звучить, це буквально з однієї сторінки! Це веб-сайти, призначені для надання UX, як настільного або мобільного додатку. HTML, CSS і JS витягуються на завантаженні першої сторінки, після чого все, що завантажується, динамічно відповідає дії користувача. Таким чином, перегляд динамічно змінюється без завантаження всієї веб-сторінки. Зазвичай він отримує дані з базового сервера REST.

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

Деякі фреймворки використовують JavaScript для динамічного спілкування з веб-сервером для створення HTML для відображення сторінки, і саме тут починаються наші проблеми. Сканери сьогодні, просуваючись дуже швидкими темпами, не все так добре оптимізовані для повної сканування СПА, тому їм важко індексувати всі динамічні змісту сучасних веб-додатків.

Виклики SPA та пошукових систем

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

Показування різного вмісту для Google, ніж для звичайних веб-відвідувачів, вважається "маскуванням" від Google, але для додатків однієї сторінки вони мають виняток. Для СЗЗ їхній сканер буде надсилати в запит параметр запиту _escaped_fragment_, а сервер-кореспондент потім може вибрати повернення документа, який представляє вміст, який користувач дійсно побачить, коли виконується додаток для однієї сторінки. Або, принаймні, це те, що вони звикли робити з 2009 по 2015 рік.

У 2015 році Google випустила наступне заяву :

` У 2009 році ми зробили пропозицію зробити AJAX-сторінки доступними для сканування. Тоді наші системи не змогли відобразити та зрозуміти сторінки, які використовують JavaScript для подання вмісту користувачам. Оскільки "сканери ... [не змогли] побачити будь-який вміст ... створений динамічно", ми запропонували набір практик, які веб-майстри можуть слідувати для того, щоб забезпечити, щоб їхні програми на основі AJAX були проіндексовані пошуковими системами.

Часи змінилися. Сьогодні, поки ви не блокуєте Googlebot сканування ваших файлів JavaScript або CSS, ми, як правило, можемо відображати та розуміти ваші веб-сторінки, як сучасні веб-переглядачі. Щоб відобразити це вдосконалення, нещодавно ми оновили наші технічні рекомендації для веб-майстрів, щоб рекомендувати Googlebot від сканування файлів CSS або JS вашого сайту. "

Хоча Google стверджує це, Bing, Yandex та інші всі підтримують стандарт Google для Ajax Crawling. Ось деякі важливі речі, які слід мати на увазі, роблячи СПА, які не приховані за сторінкою входу до системи або де SEO є потребою.

Що потрібно мати на увазі під час створення СПА з точки зору SEO

Таким чином, хоча Google заперечує, що це стандарт сканування Ajax, він ще не відмовився від нього. Він як і раніше використовує його, але рекомендує не використовувати його, тому дотримуйтесь стандарту Ajax Crawling Standard, роблячи, при необхідності, відповідні сайти SEO. Використовуйте рендеринг на стороні сервера, якщо це можливо, щоб відтворити речі, які мають абсолютне значення. Крім того, доступні різноманітні послуги попереднього надання послуг, чия підтримка охоплює всі SPA-структури, які зараз знаходяться на ринку, такі як:

• prerender.io
• Бромбон
• SEO.js
• SEO4Ajax
• prerender.cloud

Prerender.io також надає відкриту версію своєї служби для самостійного розміщення.

Хоча в даний час пошуковики не завжди підтримують індексацію SPA на 100%, це не означає, що вони ніколи не будуть. З раптовим зростанням використання СПА вони також покращуються з величезною швидкістю. Отже, розслабтеся, розслабтеся, зробіть СПА і не забудьте оптимізувати його 60 Другий SEO Контрольний список .