O quê: Como parte de nossos esforços contínuos para tornar nossa documentação mais acessível, atualizamos vários textos âncora para que sejam mais descritivos da página de destino.

Por quê: dependendo das configurações de um leitor de tela, o usuário pode pular de um link para outro em uma página. Portanto, cada texto âncora em uma página deve ser descritivo, mesmo sem o contexto circundante.

9 de janeiro
Trocar referências de @id para usar hashtags

O quê: troque todos os exemplos de código de dados estruturados que usam referências @id na página para usar hashtags. Por exemplo, o exemplo de clipes em nossa documentação de receitas.

Por quê: é uma prática recomendada de esquema usar hashtags como identificadores de nó na página resolvíveis em RDF, e queremos que nossos exemplos sigam as práticas recomendadas. No entanto, você não precisa alterar seus IDs existentes se ainda estiver usando identificadores in-page.

Adicionando suporte para Idade sugerida ao Produto

O quê: suporte adicionado para a propriedade suggestedAge como alternativa a suggestedMaxAge e suggestedMinAge. Esclarecida a lista de valores possíveis para faixas etárias em nossa documentação de dados estruturados do produto.

Por quê: queremos tornar mais fácil e flexível para as pessoas especificarem faixas etárias para um produto. Além disso, o texto anterior era confuso e não correspondia bem à documentação do Merchant Center sobre as faixas etárias dos produtos.

5 de janeiro
Esclarecendo a fonte primária dos snippets

O quê: esclarecemos em nossa documentação sobre snippets que a fonte principal do snippet é o próprio conteúdo da página.

Por quê: o texto anterior implicava incorretamente que os dados estruturados e o elemento HTML de meta descrição são as fontes primárias de snippets.

—
Texto descritivo do link
Ao adicionar links baseados em texto em uma página da web, escolha cuidadosamente quais palavras criar o hiperlink. A regra geral é sempre vincular palavras-chave. Vincular palavras-chave irá:
ajudar a melhorar a otimização do mecanismo de pesquisa
forneça mais detalhes aos usuários com visão funcional que estão examinando sua página da web
fornecer contexto para indivíduos sem visão funcional que possam estar usando um leitor de tela ou outra tecnologia assistiva
Links, leitores de tela e acessibilidade

O texto vinculado deve fazer sentido fora do contexto. Isso ocorre porque os leitores de tela geralmente navegam de um link para outro, ignorando o texto ao redor. Eles lerão cada link em voz alta, em ordem sequencial.

Por exemplo, se o texto do link for “Copper Country”, o leitor de tela dirá “link Copper Country” e o usuário saberá que a página da Web vinculada provavelmente é sobre o Copper Country. Se, em vez disso, o texto do link for “clique aqui”, o leitor de tela dirá link clique aqui e o usuário não terá ideia do que se trata a página da Web vinculada.

Bom exemplo

<p>Michigan Tech e o <a href=”/tour/copper-country/”>Copper Country</a> têm uma atmosfera de cidade pequena. Estudantes e membros da comunidade dizem que é perfeito – não tão grande que seja fácil se perder, mas também não muito pequeno. Um lugar ideal para chamar de lar.</p>

Mau exemplo

<p>Michigan Tech e Copper Country têm uma sensação de cidade pequena. Estudantes e membros da comunidade dizem que é perfeito – não tão grande que seja fácil se perder, mas também não muito pequeno. Um lugar ideal para chamar de lar. <a href=”/tour/copper-country/”>Clique aqui</a> para saber mais.</p>

Outro recurso que os usuários de leitores de tela podem aproveitar é a capacidade de ordenar os links das páginas em ordem alfabética. Isto é particularmente útil se o usuário já tiver um link específico em mente, como um formulário de contato ou uma lista de funcionários. É importante manter as palavras-chave mais importantes no início do texto do link. A “lista de funcionários” aparecerá em ordem alfabética conforme esperado. “Ver nossa lista de funcionários” não.

Dicas para escrever texto de link

Use as dicas a seguir para garantir que o texto do link esteja acessível:

Evite usar um URL como texto do link; especialmente se for longo ou complicado
Os URLs podem não ser facilmente legíveis por humanos ou leitores de tela
Mantenha as frases vinculadas o mais curtas possível, mas ainda assim significativas fora do contexto. Isso economizará tempo dos usuários do leitor de tela, pois será necessário falar menos. Por exemplo,
“fazer um presente” é preferível a “para fazer um presente on-line, clique aqui”
“entre em contato conosco” é preferível a “você pode entrar em contato conosco por”
Vincule pelo menos uma palavra completa. Duas palavras geralmente são melhores.
Um link que é apenas uma letra ou símbolo será difícil de clicar e não fornecerá contexto
Se você precisar adicionar prompts de ação ao seu link, coloque-os no final. Por exemplo,
“Entre em contato conosco (abre pop-up)” é “Link abre pop-up: entre em contato conosco”
Não adicione a palavra “link” ao seu texto
Tente garantir que cada link exclusivo em sua página da web use um texto de link exclusivo
Se você tiver dois links de listagem de funcionários diferentes que levam à mesma página, tudo bem. Se eles acessarem páginas diferentes, deverão ser diferentes, como “equipe de serviços digitais” e “equipe de serviços de impressão”
Se você usasse “leia mais” com frequência, imagine como seria frustrante para um usuário de leitor de tela ouvir “leia mais” falado repetidamente sem contexto
Nunca inclua links vazios usando href=””
Vinculando eu

magos

Para algumas páginas da Web, pode ser apropriado vincular uma imagem a uma página da Web em vez de vincular texto. Nestes casos, o leitor de tela lerá o texto alternativo da imagem (tag ALT) como texto do link. A tag ALT deve incluir o conteúdo e a função da imagem. Se a imagem for decorativa, apenas a função será necessária.

Exemplo de imagem decorativa

<p><a href=”/tour/copper-country/”><img src=”my-picture.jpg” alt=”Listagem de equipe” /></a></p>

Exemplo de imagem informativa

<p><a href=”/tour/copper-country/”><img src=”my-picture.jpg” alt=”Diagrama mostrando 200 polegadas de neve total; vinculado a subtotais mensais” /></a> </p>

Técnicas de programação opcionais

Pode haver casos em que você queira manter o texto geral do link, como “[leia mais]”. Nestes casos você pode usar aria-label ou aria-labelledby para fornecer contexto de link aos leitores de tela.

Exemplo de rótulo aria

A maioria dos leitores de tela lerá em voz alta o atributo aria-label no lugar do texto do link. Por exemplo, um link “leia mais” relacionado ao País do Cobre pode ser codificado da seguinte forma:

<p class=”right”><a href=”/tour/copper-country/” aria-label=”Copper Country”>[leia mais]</a></p>

aria-labeledby Exemplo

Pode haver casos em que um título próximo pode funcionar como o rótulo perfeito para um link geral. Nesse caso, você pode conectar esse título ao link geral usando aria-labelledby.

<h2 id=”copper-country”>O país do cobre</h2>

<p>Michigan Tech e Copper Country têm uma sensação de cidade pequena. Alunos e membros da comunidade dizem que é perfeito: não é tão grande a ponto de ser fácil se perder, mas também não é muito pequeno.</p>

<p class=”right”><a href=”/tour/copper-country/” aria-labelledby=”copper-country”>[saiba mais]</a></p>

Em vez de dizer “link, saiba mais”, o leitor de tela dirá “link, Copper Country”.

Testando texto do link

Usar um leitor de tela para falar cada link da sua página da web é o melhor teste que você pode fazer. No entanto, se você não tiver acesso a um leitor de tela, leia em voz alta o texto do link de cada um dos seus links. Alguém que você está lendo entenderia a qual conteúdo você está vinculando com base apenas nas palavras vinculadas faladas?

Saber mais

Para saber mais sobre o texto descritivo do link:

WebAIM: Links e Hipertexto
W3C: Objetivo do link (no contexto)
OmniCMS

Para criar um link no conteúdo da sua página da web, destaque seu texto ou imagem e clique no ícone do link na barra de ferramentas ou use o atalho Cmd/Ctrl + K.

Para adicionar um atributo aria-label ou aria-labelledby, navegue até o código-fonte usando a barra de ferramentas.

Para adicionar uma imagem com texto alternativo ao corpo da página, leia a etapa quatro em Inserir imagem. Para modificar o texto alternativo de uma imagem que já está no corpo da sua página da Web, selecione a imagem e clique no botão “Inserir/Editar imagem” na barra de ferramentas.

Atualização de SEO do Google, janeiro de 2024