构建 SEO 友好页面.

Learn DXPR BuilderBuild pagesVolg een tutorial

在这里，您以搜索引擎最易读懂的方式构建一个服务页面：页面标题作为唯一的 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 元素生成标准 <h1> 到 <h6>, <p>, <ul>, <a> 和 <img> 标签。将这些元素用于内容。保持 HTML 其他元素无法生成的嵌入代码元素。

元数据和网址

页面标题、元描述和网址位于 Drupal 中，在页面构建器之外：

  • Metatag 模块：在 Configuration > Search and metadata > Metatag (/admin/config/search/metatag) 设置标题标签、描述和 Open Graph 标签，或在节点编辑表单中按页面设置。
  • Pathauto 模块：在以下位置从页面标题构建干净网址 Configuration > Search and metadata > URL aliases > 模式 (/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 模块设置，如元数据和网址下所述。

接下来做什么？