Створення SEO-дружніх сторінок.

Вивчення DXPR BuilderСтворення сторінокПокрокові інструкції

Тут ви створюєте одну сторінку послуги так, як пошукові системи читають найкраще: заголовок сторінки як її єдиний Heading 1, заголовки за порядком під ним, альтернативний текст на зображенні й кнопку, що каже, куди веде. Використовуйте її як контрольний список для кожної сторінки, яку публікуєте. Заголовки сторінок, описи й URL живуть поза конструктором; останній розділ показує, де.

Відео створює сторінку ради «Apply for a resident parking permit».

Перед початком

  • Ваша роль має дозвіл Edit with DXPR Builder.
  • Медіабібліотека містить фото, що пасує послузі.
  • Сторінка відкрита в конструкторі. Для нової перейдіть до Content > Add content > Landing Page (/node/add/landing_page), введіть зрозумілий Title, як-от «Apply for a resident parking permit», і натисніть Save. Тема виводить цей заголовок як Heading 1 сторінки.

Крок 1: початок вмісту з Heading 2

Використовуйте заголовки за порядком, щоб сторінка читалася як план. Тема виводить заголовок сторінки як Heading 1 сторінки, тож вміст конструктора починається з Heading 2 для головних розділів, із Heading 3 для підрозділів. Використовуйте Heading 4-6 лише за потреби.

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Натисніть + на розділі й виберіть Text на вкладці Content.
  3. Введіть «Apply in five minutes» і виберіть Heading 2 у розкривному списку заголовків.
  4. На новому рядку додайте підсумок звичайним текстом: «Residents of zones A to D can apply online. Permits are issued within five working days.» Натисніть Save.

Лишіть Heading 1 заголовку сторінки. Щоб натомість зробити заголовок конструктора Heading 1 сторінки, спочатку приховайте заголовок теми на цій сторінці. На DXPR CMS відкрийте форму редагування сторінки, відкрийте DXPR Theme Settings, позначте Page Title у розділі DXPR Hide Regions і натисніть Save. DXPR Theme уже ховає заголовок на головній сторінці. Ніколи не вибирайте рівень заголовка за розміром: натомість змініть розмір за допомогою Font size на панелі Style елемента.

Крок 2: розділ для деталей

  1. Наведіть курсор на розділ і натисніть Add Section Below.
  2. Натисніть + на новому розділі й виберіть Row; спочатку він має два рівні стовпці. Натисніть піктограму сітки (Column layout) на панелі керування рядка, виберіть пресет 2/3 + 1/3 і натисніть Save.

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

Крок 3: написання описового тексту посилань

Текст посилання каже пошуковим системам, про що місце призначення. Уникайте «click here» і «read more».

  1. Натисніть + у широкому стовпці й виберіть Button.
  2. Установіть Title на «Start your parking permit application», Link на /parking/apply, а Type на Primary, потім натисніть Save.

Крок 4: підрозділ Heading 3

  1. Натисніть + у широкому стовпці знову й виберіть Text; він стане над кнопкою.
  2. Введіть «What you need» і виберіть Heading 3.
  3. Введіть документи, по одному на рядок: «Proof of address», «Vehicle registration document». Натисніть Save.

Крок 5: заголовок розділу Heading 2

  1. Натисніть + у широкому стовпці ще раз і виберіть Text.
  2. Введіть «Who can apply» і виберіть Heading 2.
  3. Додайте правило про те, хто може подаватися, одним рядком, потім натисніть Save.

Крок 6: додавання альтернативного тексту до зображення

Кожне зображення потребує атрибута alt, що описує його вміст.

  1. Натисніть + у вузькому стовпці й виберіть Image.
  2. Натисніть Select Image, знайдіть у медіабібліотеці за допомогою Apply filters, позначте фото й натисніть Insert selected.
  3. Відкрийте панель SEO і заповніть Alt attribute: «Laptops, phones and cups of tea on a shared wooden desk». Натисніть Save.

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

Крок 7: збереження й попередній перегляд

  1. Натисніть Save на панелі інструментів конструктора.
  2. Відкрийте меню перегляду (піктограма ока), виберіть Preview і перевірте, що заголовки читаються за порядком.

Далі

Не показано у відео:

  • Image size: змінюйте розмір зображень до ширини, на якій вони показуються, перш ніж завантажувати; 1200 пікселів покриває повний стовпець. Тримайте Image width на 100%, лишайте Image height порожнім і тримайте кожен файл менш ніж 300 КБ, бо швидкість впливає на ранжування.
  • Links to ignore: для сторінки входу чи подібної додайте елемент Link, відкрийте його панель SEO і увімкніть Tell search engines not to follow.
  • Text links: усередині елемента Text виділіть слова й використовуйте кнопку посилання на панелі інструментів. Добирайте значущі зв’язані слова: «the permit zone map», а не «here».
  • Anchors: відкрийте More > Settings на розділі, установіть HTML ID на коротке ім’я малими літерами, як-от who-can-apply, і дайте йому посилання через #who-can-apply.

Дотримуйтеся семантичного HTML

Елементи Text, Button, Link і Image створюють стандартні теги <h1> до <h6>, <p>, <ul>, <a> і <img>. Використовуйте ці елементи для вмісту. Лишайте елемент HTML для коду вбудовування, який жоден інший елемент не може створити.

Метадані й URL

Заголовки сторінок, метаописи й URL живуть у Drupal, поза конструктором:

  • Metatag: установлюйте теги заголовків, описи й теги Open Graph у розділі Configuration > Search and metadata > Metatag (/admin/config/search/metatag) або для кожної сторінки у формі редагування матеріалу.
  • Pathauto: створюйте чисті URL із заголовків сторінок у розділі Configuration > Search and metadata > URL aliases > Patterns (/admin/config/search/path/patterns).

Що ви бачите

Попередній перегляд показує заголовок сторінки як Heading 1 сторінки, потім «Apply in five minutes» як Heading 2 із підсумком під ним. У широкому стовпці «Who can apply» йде першим, потім «What you need» із двома документами й кнопкою Start your parking permit application. Фото міститься у вузькому стовпці, а його альтернативний текст лишається невидимим.

Якщо сторінка виглядає не так, як показано

  • Заголовки читаються в неправильному порядку. Нові елементи стають угорі свого стовпця, тож останній доданий вами йде першим. Перетягніть кожен елемент Text на місце за ручку перетягування на його панелі керування.
  • Заголовок виглядає надто великим чи малим. Ваша тема задає один розмір на рівень заголовка. Тримайте рівень, що пасує плану, і змініть Font size на панелі Style елемента.
  • Ви не можете знайти альтернативний текст на сторінці. Альтернативний текст призначено для екранних читачів і пошукових систем, тож сторінка ніколи його не показує. Натомість відкрийте налаштування зображення й перевірте панель SEO.
  • Результати пошуку показують неправильний заголовок сторінки. Конструктор не встановлює тег заголовка. Установіть його модулем Metatag, як описано в розділі «Метадані й URL».

Що далі?