Створення паралакс-сайту і конфлікт з seo - вирішення проблеми

Багато напевно знають про parallax-ефект, стрімко долає світ. Ніхто не сперечається, що це здорово виглядає з точки зору візуалізації, але ось просувати контент таким чином досить проблематично. Якраз про це я хочу розповісти в цій статті. У ній я постараюся висвітлити проблему сумісності parallax і seo. Якщо ви маєте відношення до створення сайтів з parallax-ефектом і бажаєте, "щоб seo не образився", то раджу вам прочитати цей текст.

Що таке parallaxеффект?

Ефект parallax - це переміщення декількох об'єктів на сторінці з різною швидкістю, що створює ілюзію 3-х вимірів. Свого часу цей ефект активно використовувався в простих комп'ютерних іграх далеких 90-х років.

Як працює parallaxеффект?

Для деяких CMS (наприклад, WordPress) існують готові шаблони, завдяки яким ви можете зробити собі сайт з parallax-ефектом, навіть не вміючи програмувати.

Parallax - проблеми ефекту

Тепер у вас є уявлення про parallax-ефекті. Нижче наведені проблеми сайтів з parallax-ефектом для пошукової оптимізації:

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

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

Обмежена кількість ключових слів. Для однієї сторінки ви можете використовувати досить мало ключових слів: хтось рекомендує одне слово, хтось - три. Нагадую: при parallax-ефекті сайт являє собою одну сторінку. Це означає, що ви просто не зможете використовувати всі ключові слова для свого сайту, ви не зможете оптимізувати сторінки під необхідні запити, тому що сторінок немає. Таким чином, ви втрачаєте всі переваги перед конкурентами, які будуть оптимізувати свої сторінки звичними методами.

Знову обмеження для ключових слів. Цього разу це стосується заголовка H1, який також повинен бути одним на всій сторінці. У підсумку ми можемо використовувати заголовок H1 всього один раз на всьому сайті. І якщо ви вирішите використовувати багато ключових слів в заголовку, то Google або Яндекс знизять ваш сайт у видачі за надмірне вживання ключових слів на сторінці. Ви будете втрачати позиції, трафік і, як наслідок, клієнтів. А якщо ви вирішите використовувати в заголовку одне ключове слово, то ніяких фільтрів ви не отримаєте, але при цьому весь ваш сайт буде оптимізований всього лише під одне ключове слово.

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

Тільки один комплект метатегов (title, keywords, description). На одному url ми можемо використовувати їх тільки 1 раз. На відміну від вашого сайту, сайти конкурентів мають багато сторінок зі своїми унікальними метатегами для різних сторінок. Чим більше у вас сторінок, тим більше буде список ключових слів, які ви можете розподілити по всьому сайту.

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

Рішення проблеми

Рішення виявляється досить простим: створюється сайт з ефектом parallax, але вміст файлів має завантажуватися з різних HTML-файлів, всі дані не повинні бути в одному файлі. Потрібно створити для вашого сайту різні файли. Після цього ви додаєте вміст в кожен окремий файл (наприклад: /, about.html, contacts.html, catalog.html, articles.html і т.д.).

Про завантаженні зовнішнього вмісту

Є кілька способів завантаження зовнішнього вмісту:

1) PHP. Якщо ви вирішили використовувати цей спосіб, необхідно змінити розширення файлів на PHP. Слід переконатися, що це безпечно з точки зору SEO. Зробивши це, ви можете просто завантажити зовнішнє вміст за допомогою подібного коду:

2) JQuery - це більш швидкий спосіб. Використовуйте Javascrip і AJAX:

Ви можете використовувати найбільш зручний для вас спосіб.

висновок

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

Приклад з нашої практики

Був створений сайт з parallax-ефектом - www.mksm.ru.

Мал. 3. Скріншот першого екрану сайту. Сайт - www.mksm.ru

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

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

- Класична схема дійсно складається з 3-х шарів, але їх може бути і більше, і менше. Коли більше 3-4 шарів, починається велике навантаження на процесор, а якщо ми хочемо ще довантажувати в нашу сторінку контейнери внутрішніх, то це буде важко.

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

- Як відмічено в статті, меню-«пріліпалка» дійсно є обов'язковим елементом, інакше ми дуже сильно втрачаємо в юзабельності.