Пітер хотів, щоб у його бізнесі був простий, але надійний і красивий веб-сайт.

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

Peter's - це класичний вид бізнесу, для якого, на перший погляд, не здається важливим мати веб-сайт. Зазвичай він залучав своїх клієнтів за допомогою місцевих груп у Facebook та особистих рефералів. Тому, хоча це вже виникло на момент початку бізнесу, воно довго затягувало створення власного веб-сайту.

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

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

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

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

Переваги односторінкового веб-сайту

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

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

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

Недоліки односторінкової веб-сторінки

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

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

Отже, якщо ви хочете отримати великий трафік від Google, веб-сайт на одній сторінці - не найкраща ідея.

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

Порада щодо оптимізації пошукових систем на односторінкових веб-сайтах: Одним із загальновизнаних основних законів SEO є використання лише одного тегу H1 на сторінці. Однак для односторінкових веб-сторінок корисно надати кожному більшому блоку (відокремленому кодом div) окремий тег H1. Це дозволяє нам оптимізувати окремі блоки для різних ключових слів.

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

Створення веб-сайту на одній сторінці за допомогою Divi

Я почав створювати веб-сайт Петра з пошуку за ключовими словами. Незабаром стало очевидним, що веб-сайт вартий оптимізації для трьох пошукових термінів: органічний сад, органічний садівник та органічне садівництво. Усі троє запускають 300-400 запитів на місяць, тоді як конкуренція напрочуд низька (мало хто оптимізує для цих ключових слів).

Тим часом відбувся хостинг та реєстрація доменів. На наступному кроці я надіслав Петрові «макети» Divi для коментарів.

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

Пітер, на мою думку, смакував досить добре, вибрав абсолютно новий пакет під назвою „Садівник”, який був розроблений спеціально для садівничого бізнесу командою Elegant Themes, яка стоїть за Divi. Пакет макета має достатньо зразків для кількох підсторінок (головна сторінка, цільова сторінка, служби, посилання тощо). З них - відповідно до потреб Петра - я вибрав блоки, розділи та модулі, які нам потрібні для веб-сайту на одній сторінці.

шаблоном

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

Після прискіпливої ​​персоналізації готових предметів прийшла настройка навігації. На щастя, з Divi це дуже легке завдання. По-перше, в інтерфейсі WordPress, у пункті меню «Редагувати сторінку» (правий верхній кут), ви знайдете пункт навігації по точках у налаштуваннях сторінки Divi.

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

Для цього виберіть у меню елемент, на який ви хочете отримати посилання, а потім клацніть на вкладці «Додатково» в налаштуваннях. У розділі «Ідентифікатор та класи CSS» додайте слово до ідентифікатора CSS, яке в цьому випадку було «Органічний сад».

Важливо, що це буде включено до URL-адреси замість класичного шлейфу, тому, з одного боку, ми уникаємо наголосів (оскільки на їх місці буде знак%), а з іншого боку, варто дотримуватися наших міркувань щодо SEO в розум при введенні посвідчення особи. На практиці “дім-1” - це не дуже гарне рішення. Перейдіть до панелі керування WordPress за адресою Зовнішній вигляд >> Меню вказати. Створіть своє основне меню, як зазвичай, але для створення пунктів меню замість сторінок та записів виберіть «Спеціальні посилання».

У поле URL введіть ідентифікатор, вказаний на попередньому кроці, з хештегом, в даному випадку #Biokertesz. У тексті Посилання напишіть те, що ви хочете відображатись у меню, наприклад Про мене, Контакти тощо, і додайте це в меню. Повернувшись на веб-сайт, ми виявимо, що натиснувши вказаний пункт меню в головному меню, сторінка прокрутиться до потрібної частини.

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

Коли ми закінчили з цим, нам потрібно було лише вдосконалити вміст та оптимізувати зовнішній вигляд мобільних пристроїв. Результат, на мій погляд і на думку Петра, став справді приємним веб-сайтом на одній сторінці. Сподіваюся, це (оскільки це насправді має значення) підтвердять і замовники Пітера.