Tipos de hyperlinks

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.

Use o atributo rel para adicionar tipos de links.

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>

Nesse post vamos falar apenas dos tipos de hiperlinks.

Tipos de links Descrição…
alternate Uma maneira alternativa de ver a página.
author Mais informações sobre o autor da página (ou partes da página).
bookmark Um permalink.
help Um conteúdo que ajuda o usuário com uma específica parte da página.
license O licença/copyright do conteúdo principal da página.
nofollow Uma página que você não se responsabiliza pelo conteúdo. Ou uma página que você linkou para algum lucro
noreferrer Uma página que não vai dizer que o clique veio da sua página
prefetch Um link que o usuário provavelmente vai visitar então o navegar vai pré-carregar e carregá-lo antes do usuário clicar.
search Uma página de busca da página.
tag Uma palavra-chave ou categoria da página.
next A próxima página em uma série de páginas
prev A página anterior em uma série de páginas.

 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>
 Linkando o autor de um artigo

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 -->
<div>
   <h1>Post 1</h1>
   <a rel="bookmark" href="post-1.html">Leia mais</a>
</div>
<!-- Blog Post #2 -->
<div>
   <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 nem que seja na página, 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 web 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 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

Pelo projeto, o tipo de link noreferrer é usada 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>

 Search

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. Para permitir que navegadores saber que, eu poderia fazer isso:

<p>This guide is under the <a rel="tag" href="http://sixrevisions.com/category/html">HTML</a> category.</p>

Agora, quando um motor de busca indexa esta página e está à procura de artigos semelhantes, vai saber para bater até a página da categoria HTML.

 Next and Prev

next aponta para a próxima página da web em uma série de páginas da web.

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

Vamos dizer que nós temos uma série de quatro partes de artigos. Estamos no segundo artigo da série. No final dos artigos, nós temos uma lista de todos os links que apontam para outros membros da série. Poderíamos marcar este como:

<h1>Essa é a parte 2 de uma série 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>
 
5
Kudos
 
5
Kudos

Now read this

Como funciona o nth-child()

element:nth-child(3n+3) { // some style here } Muita gente, assim como eu, um dia se perguntou - O que é esse “n” ai no meio? – É isso que eu vou explicar hoje. O que o código acima faz, é selecionar cada terceiro elemento, ou seja, o... Continue →