--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/seo' title: 'Створення SEO-дружніх сторінок | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:26:10+00:00' updated: '2026-10-24T20:03:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Тут ви створюєте одну сторінку послуги так, як пошукові системи читають найкраще: заголовок сторінки як її єдиний Heading 1, заголовки за порядком під ним, альтернативний текст на зображенні й кнопку, що каже, куди веде. Використовуйте її як контрольний список для кожної сторінки, яку публікуєте. Заголовки сторінок, описи й URL живуть поза конструктором; останній розділ показує, де. Відео створює сторінку ради «Apply for a resident parking permit». tags: - 'Follow a tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:03:43+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Створення SEO-дружніх сторінок' description: |- Тут ви створюєте одну сторінку послуги так, як пошукові системи читають найкраще: заголовок сторінки як її єдиний Heading 1, заголовки за порядком під ним, альтернативний текст на зображенні й кнопку, що каже, куди веде. Використовуйте її як контрольний список для кожної сторінки, яку публікуєте. Заголовки сторінок, описи й URL живуть поза конструктором; останній розділ показує, де. Відео створює сторінку ради «Apply for a resident parking permit». image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:26:10+0000' dateModified: '2026-10-24T20:03:43+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/seo' articleSection: 'Покрокові інструкції' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/seo' description: |- Тут ви створюєте одну сторінку послуги так, як пошукові системи читають найкраще: заголовок сторінки як її єдиний Heading 1, заголовки за порядком під ним, альтернативний текст на зображенні й кнопку, що каже, куди веде. Використовуйте її як контрольний список для кожної сторінки, яку публікуєте. Заголовки сторінок, описи й URL живуть поза конструктором; останній розділ показує, де. Відео створює сторінку ради «Apply for a resident parking permit». breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Покрокові інструкції](/uk/hc/documentation/learn-dxpr-builder/tutorials/overview) # Створення SEO-дружніх сторінок. Вивчення DXPR BuilderСтворення сторінокПокрокові інструкції ## In this guide Related guides - [Додавання зображення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F) - [Додавання посилання](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BF%D0%BE%D1%81%D0%B8%D0%BB%D0%B0%D0%BD%D0%BD%D1%8F) - [Додавання текстового елемента](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D1%82%D0%B5%D0%BA%D1%81%D1%82) Тут ви створюєте одну сторінку послуги так, як пошукові системи читають найкраще: заголовок сторінки як її єдиний 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 створюють стандартні теги `

` до `

`, `

`, `