---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo'
title: '构建 SEO 友好页面 | DXPR'
author:
name: Jurriaan
url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:25:36+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
在这里，您以搜索引擎最易读懂的方式构建一个服务页面：页面标题作为唯一的 Heading 1，其下是依次排列的标题、图像的替代文本，以及一个说明去向的按钮。请将其作为发布每个页面时的检查清单。页面标题、描述和网址在页面构建器之外；最后一部分说明它们的位置。
本视频构建市政 "Apply for a resident parking permit" 页面。
tags:
- 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
site_name: DXPR
updated_time: '2026-10-24T08:25:36+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，其下是依次排列的标题、图像的替代文本，以及一个说明去向的按钮。请将其作为发布每个页面时的检查清单。页面标题、描述和网址在页面构建器之外；最后一部分说明它们的位置。
本视频构建市政 "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-24T08:25:36+0000'
dateModified: '2026-10-24T08:25:36+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/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo'
articleSection: 'Volg een tutorial'
-
'@type': WebPage
'@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo'
description: |-
在这里，您以搜索引擎最易读懂的方式构建一个服务页面：页面标题作为唯一的 Heading 1，其下是依次排列的标题、图像的替代文本，以及一个说明去向的按钮。请将其作为发布每个页面时的检查清单。页面标题、描述和网址在页面构建器之外；最后一部分说明它们的位置。
本视频构建市政 "Apply for a resident parking permit" 页面。
breadcrumb:
'@type': BreadcrumbList
itemListElement:
-
'@type': ListItem
position: 1
name: 首页
item: 'https://dxpr.com/zh-hans'
publisher:
'@type': Organization
'@id': 'https://dxpr.com/#organization'
name: DXPR
inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 构建 SEO 友好页面.
Learn DXPR BuilderBuild pagesVolg een 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)
在这里，您以搜索引擎最易读懂的方式构建一个服务页面：页面标题作为唯一的 Heading 1，其下是依次排列的标题、图像的替代文本，以及一个说明去向的按钮。请将其作为发布每个页面时的检查清单。页面标题、描述和网址在页面构建器之外；最后一部分说明它们的位置。
本视频构建市政 "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**，勾选 **DXPR Hide Regions** 下的 **Page Title** 并点击 **Save**。DXPR Theme 已在首页隐藏标题。不要按大小选择标题级别：请改用元素 **Style** 面板中的 **Font size** 更改大小。
## 第 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 步：为图像添加替代文本
每张图像都需要描述其内容的替代文本属性。
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** 并检查标题顺序正确。
## 进一步了解
视频中未展示：
- **图像尺寸**：上传前请将图像调整为显示宽度；1200 像素可覆盖整列。**Image width** 保持 100%，**Image height** 留空，每个文件保持在 300 KB 以下，因为速度影响排名。
- **要忽略的链接**：对于登录页面或类似页面，添加一个 **Link** 元素，打开其 **SEO** 面板并打开 **Tell search engines not to follow**.
- **文本链接**：在 Text 元素内选择词语并使用工具栏上的链接按钮。保持链接词语有意义："the permit zone map"，而非 "here"。
- **Anchors**：打开 **More** > **Settings** 在版块上，设置 **HTML ID** 为短小写名称，例如 `who-can-apply`，并通过以下方式链接到它 `#who-can-apply`.
## 保持 HTML 语义
Text、Button、Link 和 Image 元素生成标准 `` 到 ``, `
`, `