---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/seo'
title: 'Build SEO-friendly pages | DXPR'
author:
name: docs-sync
url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'A tutorial that applies these practices to one page'
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-23T14:31:17+0000'
'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
'@context': 'https://schema.org'
'@graph':
-
mainEntity: { }
-
'@type': TechArticle
headline: 'Build SEO-friendly pages'
description: 'A tutorial that applies these practices to one page'
image:
'@type': ImageObject
url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
width: '1200'
height: '630'
datePublished: '2026-10-23T14:31:17+0000'
dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/tutorials/seo'
articleSection: 'Follow a tutorial'
-
'@type': WebPage
'@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/seo'
description: 'A tutorial that applies these practices to one page'
breadcrumb:
'@type': BreadcrumbList
itemListElement:
-
'@type': ListItem
position: 1
name: Home
item: 'https://dxpr.com/'
publisher:
'@type': Organization
'@id': 'https://dxpr.com/#organization'
name: DXPR
inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Build SEO-friendly pages.
A tutorial that applies these practices to one page
Learn DXPR BuilderBuild pagesFollow a tutorial
## In this guide
Related guides
- [Image](/hc/documentation/learn-dxpr-builder/elements/image)
- [Link](/hc/documentation/learn-dxpr-builder/elements/link)
- [Text](/hc/documentation/learn-dxpr-builder/elements/text)
Here you build one service page the way search engines read it best: the page title as its one Heading 1, headings in order below it, alt text on the image and a button that says where it goes. Use it as a checklist for every page you publish. Page titles, descriptions and URLs live outside the builder; the last section shows where.
The video builds a council's "Apply for a resident parking permit" page.
## Before you start
- Your role has the **Edit with DXPR Builder** permission.
- The media library holds a photo that fits the service.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`), type a clear **Title** such as "Apply for a resident parking permit" and click **Save**. The theme prints this title as the page's Heading 1.
## Step 1: start the content at Heading 2
Use headings in order so the page reads as an outline. The theme prints the page title as the page's **Heading 1**, so the builder content starts at **Heading 2** for main sections, with **Heading 3** for subsections. Use Heading 4 to 6 sparingly.
1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Click **+** on the section and pick **Text** from the **Content** tab.
3. Type "Apply in five minutes" and choose **Heading 2** from the heading dropdown.
4. On a new line, add the summary as normal text: "Residents of zones A to D can apply online. Permits are issued within five working days." Click **Save**.
Leave **Heading 1** to the page title. To make a builder heading the page's Heading 1 instead, hide the theme's title on this page first. On DXPR CMS, open the page's edit form, open **DXPR Theme Settings**, tick **Page Title** under **DXPR Hide Regions** and click **Save**. DXPR Theme already hides the title on the front page. Never pick a heading level for its size: change the size with **Font size** in the element's **Style** panel instead.
## Step 2: a section for the details
1. Hover the section and click **Add Section Below**.
2. Click **+** on the new section and pick **Row**; it arrives with two equal columns. Click the grid icon (**Column layout**) on the row's control bar, pick the **2/3 + 1/3** preset and click **Save**.
New elements land at the top of a column. So the next three steps fill the wide column from the bottom up: the button, the subsection, then the section heading.
## Step 3: write descriptive link text
Link text tells search engines what the destination is about. Avoid "click here" and "read more".
1. Click **+** in the wide column and pick **Button**.
2. Set **Title** to "Start your parking permit application", **Link** to `/parking/apply` and **Type** to **Primary**, then click **Save**.
## Step 4: a Heading 3 subsection
1. Click **+** in the wide column again and pick **Text**; it lands above the button.
2. Type "What you need" and choose **Heading 3**.
3. Type the documents, one per line: "Proof of address", "Vehicle registration document". Click **Save**.
## Step 5: a Heading 2 section heading
1. Click **+** in the wide column once more and pick **Text**.
2. Type "Who can apply" and choose **Heading 2**.
3. Add the rule for who may apply in one line, then click **Save**.
## Step 6: add alt text to the image
Every image needs an alt attribute that describes its content.
1. Click **+** in the narrow column and pick **Image**.
2. Click **Select Image**, search the media library with **Apply filters**, tick the photo and click **Insert selected**.
3. Open the **SEO** panel and fill in **Alt attribute**: "Laptops, phones and cups of tea on a shared wooden desk". Click **Save**.
Write the alt text for someone who cannot see the picture. Leave it empty only for images that are pure decoration. Use **Title attribute** only when a tooltip adds something; it does not replace alt text.
## Step 7: save and preview
1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**), choose **Preview** and check that the headings read in order.
## Go further
Not shown in the video:
- **Image size**: resize images to the width they display at before you upload them; 1200 pixels covers a full column. Keep **Image width** at 100%, leave **Image height** empty and keep each file under 300 KB, because speed affects ranking.
- **Links to ignore**: for a login page or similar, add a **Link** element, open its **SEO** panel and switch on **Tell search engines not to follow**.
- **Text links**: inside a Text element, select the words and use the link button on the toolbar. Keep the linked words meaningful: "the permit zone map", not "here".
- **Anchors**: open **More** > **Settings** on a section, set **HTML ID** to a short lowercase name such as `who-can-apply`, and link to it with `#who-can-apply`.
## Keep the HTML semantic
Text, Button, Link and Image elements produce standard `` to ``, `
`, `
`, `` and `![]()
` tags. Use those elements for content. Keep the **HTML** element for embed code that no other element can produce.
## Meta data and URLs
Page titles, meta descriptions and URLs live in Drupal, outside the builder:
- **Metatag** module: set title tags, descriptions and Open Graph tags at **Configuration** > **Search and metadata** > **Metatag** (`/admin/config/search/metatag`), or per page on the node edit form.
- **Pathauto** module: build clean URLs from page titles at **Configuration** > **Search and metadata** > **URL aliases** > **Patterns** (`/admin/config/search/path/patterns`).
## What you see
The preview shows the page title as the page's Heading 1, then "Apply in five minutes" as a Heading 2 with its summary below. In the wide column "Who can apply" comes first, then "What you need" with its two documents and the **Start your parking permit application** button. The photo sits in the narrow column, and its alt text stays out of sight.
## If you don't see the page as shown
- **The headings read in the wrong order.** New elements land at the top of their column, so the last one you add comes first. Drag each Text element into place by the drag handle on its control bar.
- **A heading looks too large or too small.** Your theme sets one size per heading level. Keep the level that fits the outline and change **Font size** in the element's **Style** panel.
- **You cannot find the alt text on the page.** Alt text is meant for screen readers and search engines, so the page never shows it. Open the image's settings and check the **SEO** panel instead.
- **Search results show the wrong page title.** The builder does not set the title tag. Set it with the Metatag module, as described under Meta data and URLs.
## What's next?
- [Image element](/hc/documentation/learn-dxpr-builder/elements/image) for every image setting
- [Link element](/hc/documentation/learn-dxpr-builder/elements/link) for the SEO accordion
- [Text element](/hc/documentation/learn-dxpr-builder/elements/text) for the CKEditor toolbar