Tipos de links ajudam a descrever o relacionamento entre duas ou mais páginas da web. Eles também podem expressar o motivo pelo qual determinados hiperlinks estão presentes na página da web. Definir tipos de links é bom para SEO porque os mecanismos de pesquisa podem usar esses dados para entender melhor o seu conteúdo. Outros serviços da web, como plataformas de mídia social, tecnologias assistivas e ferramentas de tradução de idiomas, serão beneficiados sempre que você especificar tipos de links apropriados em sua marcação HTML.
Como definir um tipo de link
Use o rel atributo para definir tipos de links. Abaixo está um exemplo de configuração do nofollow tipo de link em um elemento HTML:
rel="nofollow" href="http://amzn.to/1JunkLD">Buy me a Macbook ProConfigurando vários tipos de link
Você pode definir mais de um tipo de link. Basta usar espaços para separar os tipos de links. Se você estiver criando um link para uma página da Web que tenha os tipos de link de nofollow e noreferreré assim que você faria:
rel="nofollow noreferrer" href="http://amzn.to/1JunkLD">Buy me a Macbook ProOs tipos de links para hiperlinks
Neste guia, cobriremos apenas o tipos de links para hiperlinks. Há 12 tipos de links que pode ser definido em hiperlinks. O que se segue é uma tabela de possíveis tipos de links e para onde cada tipo de link deve apontar.
| Tipo de link | Links para… |
|---|---|
alternate | uma forma alternativa de visualizar a página da web. |
author | mais informações sobre o autor da página web (ou partes da página web). |
bookmark | um link permanente ou slug de SEO. |
help | conteúdo que ajuda o usuário em uma parte específica da página da web. |
license | a licença de direitos autorais do conteúdo principal da página da web. |
nofollow | uma página da web que você não endossa. Ou uma página da web à qual você criou um link principalmente para fins lucrativos. |
noreferrer | uma página da web que não deveria ser informada de que o clique veio da sua página da web. |
prefetch | um recurso que o usuário provavelmente precisará. O navegador deve buscar e armazenar em cache o recurso antes mesmo de o usuário solicitá-lo. |
search | uma interface de pesquisa para a página da web. |
tag | a palavra-chave ou categoria da página da web. |
next | a próxima página de uma série de páginas da web. |
prev | a página anterior em uma série de páginas da web. |
Vamos examinar cada tipo de link com mais detalhes. Também mostrarei casos de uso para cada tipo de link.
Tipo de link alternativo
O alternate o tipo de link aponta para outras formas de visualizar a página da web.
Vinculando a outros formatos de arquivo
Você pode ter a página da web em outro formato. Como um PDF. Ou talvez você tenha uma versão da página para impressão. Usando o alternate tipo de link informa aos navegadores: Ei, este é o mesmo conteúdo, apenas em um formato diferente. Usando o type O atributo no link também seria útil neste caso. No bloco de código a seguir, afirmamos que ambos os hiperlinks vão para uma representação alternativa da página da web. O primeiro link leva para uma versão em PDF da página da web. O segundo link leva a um arquivo ZIP para download que contém o PDF.
rel="alternate"type="application/pdf" href="https://www.MidiaPro.com/blog/web-design/link-types-hyperlinks/this-page.pdf">PDF version rel="alternate"type="application/zip" href="https://www.MidiaPro.com/blog/web-design/link-types-hyperlinks/this-page.zip" download>Download this web pageVinculando a traduções de idiomas
Você pode usar o alternate tipo de link sempre que você estiver fazendo referência a uma tradução do idioma da página atual. Para maior significado, você pode usar o hreflang atributo para definir o idioma usado na página da web referenciada.
rel="alternate"hreflang="es" href="https://www.MidiaPro.com/blog/web-design/link-types-hyperlinks/spanish-version.html">Read this page in Spanish rel="alternate"hreflang="tl" href="https://www.MidiaPro.com/blog/web-design/link-types-hyperlinks/tagalog-version.html">Read this page in Tagalogtipo de link do autor
O author tipo de link informa ao navegador que o link leva a informações sobre um autor.
Link para o autor de toda a página da web
This web page was created by me.
rel="author" href="https://www.MidiaPro.com/blog/web-design/link-types-hyperlinks/my-author-bio.html">About Me Link para o autor de um artigo
Muitas vezes, apenas partes de uma página da web são do autor. Neste caso, o author o tipo de link deve se referir ao autor que escreveu o conteúdo do pai article elemento. Nos sites de notícias, o conteúdo principal da página é escrito por jornalistas. Mas as outras coisas na página da web podem ser de autoria de outra pessoa. Os comentários na página web, por exemplo, são dos leitores do artigo. Esta situação pode ser marcada como tal:
This article is by Someone Else.
rel="author" href="https://www.MidiaPro.com/blog/web-design/link-types-hyperlinks/someone-else.html">About Someone Else tipo de link de ajuda
O help o tipo de link vai para conteúdo que fornece informações úteis. Ao usar o help tipo de link, o conteúdo referenciado deve ser específico do contexto. Em outras palavras, o link deve apontar para informações de ajuda específicas sobre o elemento HTML pai que contém o hiperlink. Abaixo está um exemplo de uso do help tipo de link em um formulário da web de comentários. Neste caso, o help tipo de link alude a uma página da web que fornece informações úteis sobre o pai form elemento do hiperlink (ou seja, o HTML element).
license Link Type
The license O tipo de link pode ser usado em links que levam aos termos de licenciamento do conteúdo principal da página da web. Este tipo de link deve ser usado dentro tags para que você possa definir quais partes da página da web são cobertas pela licença. A licença só se aplicará ao conteúdo do pai main elemento. A marcação abaixo representa três imagens. No entanto, apenas um deles está licenciado sob a Dedicação de Domínio Público Creative Commons (CC0).
License: rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0
Tipo de link nofollow
nofollow serve para especificar que o link na sua página é algo que você não endossa ou que está na página porque você foi recompensado por colocá-lo lá.
Links gerados pelo usuário
Um lugar para usar o nofollow o tipo de link está em links gerados pelo usuário. Links em entradas de wiki, comentários de uma postagem de blog ou respostas em sites de perguntas e respostas como StackOverflow são candidatos para esse tipo de link. Esses links foram colocados na página da web por outra pessoa. Como proprietário do site, você nem sempre pode apoiar ou endossar os links que os usuários compartilham no seu site. Neste caso, o nofollow o tipo de link informa aos mecanismos de pesquisa que o proprietário do site pode não ter revisado o link e/ou o proprietário do site não endossa o link.
I am luve ur blog post on the "Angular Boosttrap preprocessor".Plz see this rel="nofollow" href="http://loseweight.now.ru">weight loss pill.
Links pagos
Outro uso do nofollow tipo de link é para links pagos. Geralmente são anúncios. Se o proprietário do site colocou um link em uma página da Web principalmente por causa de um relacionamento comercial/com fins lucrativos com a página vinculada, definir o link como um nofollow é a coisa apropriada a fazer.
rel="nofollow" href="http://paid.example.co">A paid linkTipo de link noreferrer
Por design, o noreferrer O tipo de link é usado em hiperlinks que, quando clicados, não informam a página de destino de onde o usuário veio de sua página. Não tenho certeza de quantos navegadores realmente implementam as especificações desse tipo de link no momento.
rel="noreferrer" href="http://faceup.com">Don't track this linkQuando você clica em um link com um noreferrer tipo de link, o navegador não deve incluir o Referer Cabeçalho HTTP, que pode ser usado pelos proprietários de sites para rastrear a origem dos usuários.
pré-busca do tipo de link
O prefetch O tipo de link deve ser usado quando você aponta para recursos externos que o usuário provavelmente precisará. Ele diz aos navegadores para obtê-lo e armazená-lo em cache antes mesmo de o usuário clicar no link. Por exemplo, você pode ter uma galeria de imagens. Quando o usuário clica em uma imagem, você exibe uma versão maior da imagem. Para uma experiência mais rápida, você pode instruir o navegador a armazenar em cache a versão maior da imagem para que ela esteja pronta quando o usuário desejar.
rel="prefetch" href="https://www.MidiaPro.com/blog/web-design/link-types-hyperlinks/large.jpg" title="Vá para uma versão maior da foto.">
pesquisar tipo de link
O search tipo de link aponta para uma interface de pesquisa para a página da web. Essa interface de pesquisa pode ser um formulário de pesquisa na página ou outra página da web que possa pesquisar a página atual (e páginas relacionadas). Aqui está um exemplo de link para um formulário de pesquisa da web na página.
rel="search" href="#search">Search this page ... tag Tipo de link
O tag o tipo de link pode ser usado para apontar para a categoria ou palavra-chave que corresponde ao conteúdo da página da web. Por exemplo, este guia que você está lendo agora está categorizado na categoria HTML. Para que os navegadores saibam disso, eu poderia fazer o seguinte:
This guide is under the rel="tag" href="https://www.MidiaPro.com/category/html">HTML category.
Agora, quando um mecanismo de pesquisa rastrear esta página e procurar artigos semelhantes, ele saberá que deve acessar a página da categoria HTML.
próximos e anteriores tipos de link
O next tipo de link aponta para a próxima página da web em uma série de páginas da web. O prev o tipo de link vai para a página anterior da série. Digamos que temos uma série de artigos em quatro partes. Estamos no segundo artigo da série. Ao final dos artigos, temos uma lista com todos os links que apontam para outros integrantes da série. Poderíamos marcar isso como:
Outras coisas para saber
Uma coisa menor a ter em mente é que o palavras-chave de tipo de link não diferenciam maiúsculas de minúsculas. Este ponto não é nada demais, só porque a convenção comum é usar letras minúsculas para marcação HTML. Mas, ei, é a sua marcação, então você deve fazer o que funcionar para você. Portanto, no exemplo a seguir, todos os hiperlinks são válidos:
Buy me a Macbook Pro Buy me a Macbook Pro Buy me a Macbook ProAlém disso, existem dois outros tipos de link que não foram abordados aqui: icon e stylesheet. Eles não pode ser usado em hiperlinks. Você também pode usar Tipos de link de microformatos. Esses tipos de links não fazem parte oficialmente dos padrões W3C, mas os mecanismos de pesquisa e navegadores os suportam. Este guia é baseado em Recomendação HTML5 W3C para tipos de links.
Conteúdo relacionado
Como definir um tipo de link
Configurando vários tipos de link
Você pode definir mais de um tipo de link. Basta usar espaços para separar os tipos de links. Se você estiver criando um link para uma página da Web que tenha os tipos de link de nofollow e noreferrer é assim que você faria:
Os tipos de links para hiperlinks
Tipos de links para hiperlinks
Neste guia, cobriremos apenas o tipos de links para hiperlinks. Há 12 tipos de links que podem ser definidos em hiperlinks. O que se segue é uma tabela de possíveis tipos de links e para onde cada tipo de link deve apontar.
Tipo de link alternativo
Vinculando a outros formatos de arquivo
Você pode ter a página da web em outro formato. Como um PDF. Ou talvez você tenha uma versão da página para impressão. Usando o alternate tipo de link informa aos navegadores: “Ei, este é o mesmo conteúdo, apenas em um formato diferente.”
Tipo de link do autor
Link para o autor de toda a página da web
This web page was created by me.
About Me
Marcador Tipo de link
O bookmark tipo de link informa aos navegadores que o hiperlink vai para um link permanente. Esse tipo de link é útil na página inicial de blogs e sites de notícias. Abaixo, temos trechos de duas postagens de blog com links para links permanentes.
Tipo de link de ajuda
O help tipo de link vai para conteúdo que fornece informações úteis. Ao usar o help tipo de link, o conteúdo referenciado deve ser específico do contexto. Em outras palavras, o link deve apontar para informações de ajuda específicas sobre o elemento HTML pai que contém o hiperlink. Abaixo está um exemplo de uso do help tipo de link em um formulário da web de comentários. Neste caso, o help tipo de link alude a uma página da web que fornece informações úteis sobre o pai form elemento do hiperlink (ou seja, o HTML element).
