Чи є програми однієї сторінки вбивством вашого SEO?

1. Перспективи для веб-сайтів на основі JavaScript
2. Список популярних фреймворків JavaScript
3. Так що ж вплив на SEO?
4. Що таке додаток для однієї сторінки?
5. Відомі проблеми з відстеженням:
6. Відомі проблеми індексування:
7. Прогресивна веб-програма (PWA)
8. Доступні рішення
9. Розташуйте файл Sitemap
10. Створення користувацьких URL-адрес
11. BromBone
12. Prerender.io
13. Висновок

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

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

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

(Will Critchlow побачив значне поліпшення трафіку після переходу від сторінок, керованих JavaScript, до не-JavaScript залежний .)

Перспективи для веб-сайтів на основі JavaScript

Angular - найпопулярніший JS-фреймворк для одиничних додатків (SPA). Google підтримує і підтримує AngularJS разом із спільнотою окремих розробників, хоча і досить смішно, не маючи можливості передати велику кількість сторінок AngularJS.

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

Список популярних фреймворків JavaScript

AngularJS - дуже популярна основа для застосування для однієї сторінки. Angular на ринку вже кілька років і пропонує вражаючий перелік функцій, які принесуть користь розробникам; двосторонній зв'язок; шаблони; форматування валюти; плюралізація; багаторазовий контроль; RESTful обробки API; Обробка AJAX і т.д.

Технічно, СПА не потрібно використовувати будь-які химерні рамки, такі як MVC, Ember.js, Node.js або AngularJS. Насправді, можна створити СПА, використовуючи тільки jQuery і HTML для переднього кінцевого дисплея, але це не рекомендується для великих веб-сайтів, де дані краще керувати потужною базовою CMS.

Так що ж вплив на SEO?

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

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

Недавно Джон Мюллер пояснив як Google індексує сайти JavaScript у своєму інформаційному бюлетені.

“Google певною мірою підтримує JavaScript. Google підтримує використання JavaScript для надання назв, мета-тегів опису та роботів, структурованих даних та інших метаданих. При використанні AMP HTML-сторінка AMP повинна бути статичною, як того вимагає специфікація, але асоційована веб-сторінка може бути побудована з використанням методів JS / PWA. Не забудьте скористатися файлом sitemap із правильними датами "lastmod" для сигналізації про зміни на вашому веб-сайті. "

Що таке додаток для однієї сторінки?

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

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

Відомі проблеми з відстеженням:

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

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

Відомі проблеми індексування:

Вміст сайту не індексується Google - як пояснювалося вище, система індексування Google обробляє JavaScript, але деякі проблеми можуть бути виправлені, щоб зробити вміст доступним.

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

Щоб перевірити, як Google здійснює вашу сторінку SPA, просто скористайтеся інструментом "Вибрати як Google", знайденим у консолі пошуку, щоб отримати попередній перегляд того, що Google побачить.

Прогресивна веб-програма (PWA)

Прогресивна веб-додаток (PWA) пропонує переваги встановленої програми, за вирахуванням магазину програм.

У цьому контексті терміни «прогресивні» означають, що він працює для кожного користувача, незалежно від вибору браузера, оскільки він побудований з прогресивним розширенням як основним функціоналом. PWA має мати відповідний інтерфейс, що означає, що він відповідає будь-якому форм-фактору; настільний, мобільний, планшетний або будь-який інший. PWA не обов'язково має бути SPA, але може бути багатосторінковим, якщо розробники роблять додаткові зусилля для створення власних URL-адрес.

Ця технологія показує дві специфікації, які особливо цікаві для майбутнього SEO & UX:

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

PWA є дружніми SEO, якщо вони дотримуйтесь контрольного списку передового досвіду і не приймають форму СПА. Для кращої практики SEO, PWAs повинні використовувати Історія API для відтворення свого роду URL-стежки замість фрагментів сторінок, які використовують Hashbang (#!). Наприклад, все після #! в https://example.com/#!user/26601 .

Доступні рішення

Оскільки весь код завантажується лише один раз на програми з однією сторінкою (SPA), пошукові системи не можуть оцінювати якість вмісту сторінки, а також не привласнювати будь-яку оцінку якості сторінки цій веб-сторінці (або "PageRank"). Іншими словами, Google знає про існування сторінки, оскільки вони мають можливість виявити її за допомогою посилань, але не можуть сказати, чи може копія на цій сторінці відповідати відповідно до намірів пошуку.

У Harvest ми досліджували різні обхідні шляхи нижче, щоб запустити SEO-Friendly One Page Apps (SPA). Деякі параметри можуть включати ресурси Dev і / або додаткові витрати сторонніх інструментів.

Розташуйте файл Sitemap

Загалом, файли Sitemaps є особливо корисними, якщо на сайті сайту є сторінки, які Googlebot не легко виявити під час процесу сканування - наприклад, сторінки з багатим AJAX або зображеннями. Незважаючи на те, що це лише часткове рішення, варто розгорнути XML-карту сайту (якщо цього ще не зроблено) на вашому сайті. За допомогою цієї карти сайту пошукові системи зможуть переходити за посиланнями, а потім відкривати сторінки. Однак карта сайту не вирішить труднощів щодо сканування та індексування вмісту сторінки. Іншими словами, веб-сторінки відображатимуться в Google (по суті), але, можливо, вони не мають вмісту в видачах, якщо вони використовують важкі JavaScript-рамки.

Наприклад: Перевірка кешу Google для SPA, яка розгортає лише XML-карту сайту (але не інше рішення), говорить нам, що їхні індексовані сторінки є пустими:

Створення користувацьких URL-адрес

Залежно від JavaScript Framework, SPA, такі як Ember.js, можна налаштувати / оптимізувати, щоб показувати користувацькі URL-адреси через динамічний сегменти . У випадку Angular.js, це вимагає уваги від розробника для налаштування Режим розташування до HTML5.

BromBone

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

• Тип: HTML-попередня візуалізація
• Динамічне / статичне оновлення: Динамічне
• Легкість розгортання: легка
• Вартість: $ 129 / місяць
• Ресурс: http://www.brombone.com/

Prerender.io

Prerender.io вимагає ручного завантаження sitemap.xml і зробить все інше. Менші сайти (до 250 сторінок) можуть безкоштовно використовувати програму Pre-rendering, тоді як більші сайти (або сайти, які постійно оновлюються) можуть заплатити до $ 200 + / місяць. Проте неоціненним є наявність індексованої версії вашого сайту, яка дозволяє залучати клієнтів через органічний пошук.

• Тип: HTML-попередня візуалізація
• Динамічне / статичне оновлення: статичне
• Легкість розгортання: дуже просто
• Вартість: $ 200 + / місяць
• Ресурс: https://prerender.io/

Висновок

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

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