Tipos de hyperlinks

Feb 26, 2016

Hyperlinks são um dos elementos mais básicos que existem, se você trabalha com web provavelmente você vê eles todo santo dia. Desde quando foram criados eles tem o mesmo objetivo, ligarem uma página.

Mas uma coisa que talvez você não saiba é que existem diferentes tipos de hyperlinks que podem ser usados para melhorarem a semântica, acessibilidade entre outras coisas na sua página.

Um guia dos diferentes tipos de links.

Tipos de links são bons para descrever a relação entre duas ou mais páginas e também podem expressar a razão de porque certos links estão na página.

Definir tipos de links também ajuda no SEO, já que os motores de busca podem usar essa informação para melhor entender o conteúdo do seu site.

Outras ferramentas online como redes sociais ou tradutores aproveitam sempre que você adiciona certos tipos de links.

Para adicionar basta utilizar o atributo rel.

Abaixo um exemplo de como usar o nofollow .

<a rel="nofollow" href="http://amzn.to/1JunkLD">
  Buy me a Macbook Pro
</a>

Você pode usar vários tipos, basta separá-los com espaço.

<a rel="nofollow noreferrer" href="http://amzn.to/1JunkLD">
  Buy me a Macbook Pro
</a>

Alternate

O alternate aponta para uma outra forma de ver a página.

Linkando para outros formatos de arquivos.

Você pode ter a página da web em outro formato. Como um PDF ou uma página impressa.

No código abaixo, os dois links vão para uma página alternativa do site principal. O primeiro vai para um PDF e o outro faz o download de um arquivo .zip com o PDF.

<!-- O conteúdo em PDF --> 
<a rel="alternate" type="application/pdf" href="this-page.pdf">
  PDF version
</a>

<!-- O link para download -->
<a rel="alternate" type="application/zip" href="this-page.zip" download>
  Download this web page
</a>

Author

O author mostra para o navegador que o link leva para informações sobre o autor.

Linkando o autor de uma página inteira

<html>
  <body>
    <h1>Minha página</h1>
    <p>Essa página foi criada por mim</p>
    <a rel="author" href="filipelinhares.html">
      Sobre mim
    </a>
  </body>
</html>

A maioria das vezes só uma parte da página é de um autor. Nesse caso o link com author deve se referir ao autor que escrever o conteúdo dentro do elemento article que envolve todo o conteúdo.

Em sites de noticias a maioria dos artigos são escritos por jornalistas. Mas outras coisas na página podem ser escritas por qualquer um. Os comentários na página por exemplo, é escrito pelos leitores do artigo. Nesse caso, a marcação pode ser feita assim:

<html>
  <body>
    <article>
      <!-- Essa parte foi postada por alguém -->
      <h1>O post de um convidado</h1>
      <p>Esse post é do Fulano</p>
      <a rel="author" href="fulano.html">
        Fulano
      </a>
    </article>
    
    <!-- Comentários -->
    <h1>Comentários</h1>
    <article>
      <a rel="author" href="visitante.html">
        O visitante
      </a>
      <p>Esse comentário foi escrito pelo Visitante</p>
    </article>
  </body>
</html>

Bookmark

O bookmark diz para o navegador que o link leva para um permalink.

Esse link é muito útil em home pages de blogs ou site de notícias.

A seguir temos o exemplo de dois blog posts que levam para permalinks.

<!-- Post #1 -->
<article>
  <h1>Post 1</h1>
  <a rel="bookmark" href="post-1.html">
     Leia mais
  </a>
</article>

<!-- Blog Post #2 -->
<article>
  <h1>Post #2</h1>
  <a rel="bookmark" href="post-2.html">
    Leia mais
  </a>
</div>

Help

O help diz para o navegador que o link leva para uma página que contem informações úteis.

Ao usar o help, o conteúdo referenciado devem ser específicos ao contexto. Em outras palavras, o link deve apontar para informações específicas de ajuda sobre o elemento HTML pai que contém o hiperlink.

License

O license pode ser usado em ligações indo para os termos de licenciamento do conteúdo principal da página web.

Este tipo de ligação deve ser usado dentro de marcas principais para que você possa definir quais partes da página web estão cobertos pela licença. A licença só é aplicável aos conteúdos do elemento principal pai.

A marcação abaixo representa três imagens. No entanto, apenas um deles está licenciado sob a Dedicação Creative Commons Public Domain (CC0).

<h1>Use essa foto grátis!</h1>
<main>
  <img src="foto.jpg" />
  <p>
      License:<a rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/">
  CC0
    </a>
  </p>
</main>

Nofollow

nofollow é para especificar que o link em sua página é algo que você não “aprova”, porque você foi recompensado para colocá-lo lá.

Um lugar para usar o tipo de link nofollow é em links gerado pelo usuário. Os comentários de um post de blog, ou as respostas em sites de Q & A como StackOverflow são todos os candidatos para este tipo de ligação.

Esses links foram colocados na página por outra pessoa. Como o proprietário do site, você não pode sempre apoiar ou endossar as ligações seus usuários estão compartilhando em seu site.

Neste caso, o tipo de link nofollow diz aos motores de busca o proprietário do site pode não ter revisto o link e / ou o proprietário do site não endossa o link.

<h1>Comentários</h1>
<article>
  <h2 class="commenter">Comentado pelo Fulano</h2>
  <p>
    Gostei do seu blog, poderia dar uma olhada no meu?
    <a rel="nofollow" href="http://meublog.com">meublog</a>.
  </p>
</article>

Paid Links

Outro uso do tipo de link nofollow é para links pagos. Geralmente estes são propagandas. Se o proprietário do site colocou um link em uma página web, principalmente por causa de um relacionamento / fins lucrativos comercial com a página vinculada, em seguida, definir o destino como um nofollow é a coisa apropriada a fazer.

<a rel="nofollow" href="http://ad.com">Um link de propaganda</a>

Noreferrer

O tipo de link noreferrer é usado em hiperlinks que, quando clicado, não “contam” a página de destino que o usuário veio de sua página web.

<a rel="noreferrer" href="http://faceup.com">Não diga que fui eu!</a>

Quando você clica em um link com um tipo de link noreferrer, o navegador não deve incluir o cabeçalho HTTP Referer, que pode ser usado pelos proprietários do site para rastrear onde os usuários veio.

Prefetch

O prefetch deve ser usado quando você está apontando para recursos externos que o usuário provavelmente irá precisar. Diz aos browsers para carregar a página antes mesmo de o usuário clica no link.

Por exemplo, você pode ter uma galeria de imagens. Quando o usuário clica em uma imagem, você vai exibir uma versão ampliada da imagem.

Para uma experiência mais rápido, você pode instruir o navegador para armazenar em cache a versão maior da imagem de modo que ele está pronto quando o usuário quer.

<a rel="prefetch" href="large.jpg" title="Veja a imagem ampliada"><img src="small.jpg" alt="A imagem pequena" /></a>

O tipo search aponta para uma interface de pesquisa para a página web. Esta interface de busca pode ser um formulário de pesquisa in-page ou outra página web que pode pesquisar a página atual (e as páginas relacionadas).

<!-- link to the in-page search form -->
<a rel="search" href="#search">
  Busque nessa página</a>

<!-- search form --> 
<form id="search">
  <label for="search-term">Enter your search term</label>
  <input id="search-term" type="search" />
</form>

Tag

O tag pode ser utilizado para apontar para a categoria ou palavra-chave que corresponde ao conteúdo da página.

Por exemplo, este guia que você está lendo agora é classificado na categoria HTML.

<p>
  This guide is under the
  <a rel="tag" href="[https://medium.com/tag/h](https://medium.com/tag/apple)tml">HTML</a> category.
</p>

Next and Prev

*next *e *prev *aponta para a próxima página em uma série de páginas.

prev vai para a página anterior da série.

Vamos dizer que nós temos uma série de posts em quatro partes. Estamos no segundo artigo dessa série. No final dos artigos, nós temos uma lista de todos os links que apontam para outros membros da série.

<h1>Essa é a parte 2 de uma série de 4.</h1>
<ol>
  <li>
    <a rel="prev" href="1st.html">Part 1</a>
  </li>

  <!-- we're here -->
  <li>
    <strong>Part 2</strong> (this page)
  </li>
  <li>
    <a rel="next" href="3rd.html">Part 3</a>
  </li>
  <li>
    <a href="4th.html">Part 4</a>
  </li>
</ol>

Assim seu código fica mais semântico e com isso ajuda na acessibilidade da também ❤

Agora quando vocês for usar os diferentes tipos de links pensa duas vezes e lembra desse post.

Leitura extra

home