Skip to content

Build SEO-friendly pages

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 <h1> to <h6>, <p>, <ul>, <a> and <img> 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?

Something wrong or missing on this page? Report it or edit the page.