Crie páginas amigas de SEO.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aqui constrói-se uma página de serviço da forma que os motores de pesquisa melhor leem: o título da página como o seu único Heading 1, cabeçalhos por ordem por baixo, texto alternativo na imagem e um botão que diz para onde vai. Use-a como lista de verificação para todas as páginas que publicar. Títulos de páginas, descrições e URLs vivem fora do construtor; a última secção mostra onde.

O vídeo constrói a página "Apply for a resident parking permit" de um município.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • A biblioteca de média tem uma foto adequada ao serviço.
  • A página está aberta no construtor. Para uma nova, vá a Content > Add content > Landing Page (/node/add/landing_page), escreva um Title claro como "Apply for a resident parking permit" e clique em Save. O tema imprime este título como Heading 1 da página.

Passo 1: comece o conteúdo em Heading 2

Use cabeçalhos por ordem para a página se ler como um esquema. O tema imprime o título da página como Heading 1 da página, por isso o conteúdo do construtor começa em Heading 2 para as secções principais, com Heading 3 para as subsecções. Use Heading 4 a 6 com moderação.

  1. Clique em Add Elements na página vazia e escolha Section no separador Layout.
  2. Clique em + na secção e escolha Text no separador Content.
  3. Escreva "Apply in five minutes" e escolha Heading 2 na lista de cabeçalhos.
  4. Numa linha nova, adicione o resumo como texto normal: "Residents of zones A to D can apply online. Permits are issued within five working days." Clique em Save.

Deixe o Heading 1 para o título da página. Para fazer de um cabeçalho do construtor o Heading 1 da página, esconda primeiro o título do tema nesta página. No DXPR CMS, abra o formulário de edição da página, abra DXPR Theme Settings, marque Page Title em DXPR Hide Regions e clique em Save. O DXPR Theme já esconde o título na página inicial. Nunca escolha um nível de cabeçalho pelo tamanho: mude antes o tamanho com Font size no painel Style do elemento.

Passo 2: uma secção para os detalhes

  1. Paire o cursor sobre a secção e clique em Add Section Below.
  2. Clique em + na secção nova e escolha Row; vem com duas colunas iguais. Clique no ícone de grelha (Column layout) na barra de controlos da fila, escolha a predefinição 2/3 + 1/3 e clique em Save.

Os elementos novos ficam no topo de uma coluna. Por isso os três passos seguintes preenchem a coluna larga de baixo para cima: o botão, a subsecção e depois o cabeçalho da secção.

Passo 3: escreva texto de ligação descritivo

O texto de ligação diz aos motores de pesquisa do que trata o destino. Evite "click here" e "read more".

  1. Clique em + na coluna larga e escolha Button.
  2. Defina Title como "Start your parking permit application", Link como /parking/apply e Type como Primary e clique em Save.

Passo 4: uma subsecção Heading 3

  1. Clique novamente em + na coluna larga e escolha Text; fica por cima do botão.
  2. Escreva "What you need" e escolha Heading 3.
  3. Escreva os documentos, um por linha: "Proof of address", "Vehicle registration document". Clique em Save.

Passo 5: um cabeçalho de secção Heading 2

  1. Clique mais uma vez em + na coluna larga e escolha Text.
  2. Escreva "Who can apply" e escolha Heading 2.
  3. Adicione a regra de quem pode candidatar-se numa linha e clique em Save.

Passo 6: adicione texto alternativo à imagem

Cada imagem precisa de um atributo alt que descreva o seu conteúdo.

  1. Clique em + na coluna estreita e escolha Image.
  2. Clique em Select Image, pesquise a biblioteca de média com Apply filters, marque a foto e clique em Insert selected.
  3. Abra o painel SEO e preencha o Alt attribute: "Laptops, phones and cups of tea on a shared wooden desk". Clique em Save.

Escreva o texto alternativo para alguém que não vê a imagem. Deixe-o vazio apenas para imagens puramente decorativas. Use Title attribute apenas quando uma dica adiciona algo; não substitui o texto alternativo.

Passo 7: guarde e pré-visualize

  1. Clique em Save na barra de ferramentas do construtor.
  2. Abra o menu de vista (o ícone de olho), escolha Preview e confirme que os cabeçalhos se leem por ordem.

Para ir mais longe

Não mostrado no vídeo:

  • Tamanho de imagem: redimensione as imagens para a largura a que se apresentam antes de as carregar; 1200 píxeis cobre uma coluna inteira. Mantenha Image width em 100%, deixe Image height vazio e mantenha cada ficheiro abaixo de 300 KB, porque a velocidade afeta a classificação.
  • Ligações a ignorar: para uma página de início de sessão ou semelhante, adicione um elemento Link, abra o seu painel SEO e ligue Tell search engines not to follow.
  • Ligações de texto: dentro de um elemento Text, selecione as palavras e use o botão de ligação na barra de ferramentas. Mantenha as palavras ligadas com significado: "the permit zone map" e não "here".
  • Âncoras: abra More > Settings numa secção, defina HTML ID como um nome curto em minúsculas como who-can-apply e ligue para ele com #who-can-apply.

Mantenha o HTML semântico

Os elementos Text, Button, Link e Image produzem as etiquetas padrão <h1> a <h6>, <p>, <ul>, <a> e <img>. Use esses elementos para conteúdo. Guarde o elemento HTML para código de incorporação que nenhum outro elemento produz.

Metadados e URLs

Títulos de páginas, metadescrições e URLs vivem no Drupal, fora do construtor:

  • Metatag module: defina etiquetas de título, descrições e etiquetas Open Graph em Configuration > Search and metadata > Metatag (/admin/config/search/metatag) ou por página no formulário de edição do nó.
  • Pathauto module: construa URLs limpos a partir de títulos de páginas em Configuration > Search and metadata > URL aliases > Patterns (/admin/config/search/path/patterns).

O que vê

A pré-visualização mostra o título da página como Heading 1 da página e depois "Apply in five minutes" como Heading 2 com o seu resumo por baixo. Na coluna larga, "Who can apply" vem primeiro, depois "What you need" com os seus dois documentos e o botão Start your parking permit application. A foto fica na coluna estreita e o seu texto alternativo fica fora de vista.

Se não vir a página como mostrada

  • Os cabeçalhos leem-se por ordem errada. Os elementos novos ficam no topo da sua coluna, por isso o último que adiciona vem primeiro. Arraste cada elemento Text para o lugar pela pega de arrasto na sua barra de controlos.
  • Um cabeçalho parece demasiado grande ou pequeno. O seu tema define um tamanho por nível de cabeçalho. Mantenha o nível que se ajusta ao esquema e mude Font size no painel Style do elemento.
  • Não encontra o texto alternativo na página. O texto alternativo destina-se a leitores de ecrã e motores de pesquisa, por isso a página nunca o mostra. Abra antes as definições da imagem e verifique o painel SEO.
  • Os resultados de pesquisa mostram o título de página errado. O construtor não define a etiqueta de título. Defina-a com o módulo Metatag, como descrito em Metadados e URLs.

E a seguir?