Convertendo hyperlinks em uma SelectBox

Muitos de nós gostamos de adotar as práticas de SEO em nossos sites, não é? Pois veja um exemplo.
Eu gosto de utilizar select boxes para mudar as páginas de meus sites. Se não entendeu, veja aqui, no blog da Zatecus, no rodapé da página, um exemplo prático.

O problema é que usar select boxes para este fim não é lá muito SEO-friendly, ou seja, não é bem visto por motores de buscas como o Google, atrapalhando o desempenho do site em tais.

Para resolver este problema, com a ajuda do jQuery, existe uma função simples.

HTML
Temos abaixo três hyperlinks que serão transformados em opções de uma select box. Note que em cada hyperlink, temos uma class, neste exemplo chamada selection.

<a href="https://www.google.com.br" class="selection">Google</a>
<a href="https://www.yahoo.com.br" class="selection">Yahoo!</a>
<a href="https://www.bing.com" class="selection">Bing</a>

Abaixo, temos uma DIV que irá receber meu select box e com ID destino.

<div id="destino"></div>

Agora, o jQuery…

Abaixo temos a função em jQuery que fará a mágica acontecer.

<script>
$.fn.a2select = function (option){
	/* Guarda HTML com as opções do selectbox */
	var optionsHTML = "";
	/* Oculta todos os hyperlinks */
	$(this).hide();
	/* Verifica cada hyperlink */
	$(this).each(function(){
		/* Prepara option HTML do hyperlink atual */
		optionsHTML += "<option value=\"" + $(this).attr('href') + "\">" + $(this).html() + "</option>";
	});
	/* Monta todos os hyperlinks */
	$(option.destiny).html("<label><select>" + optionsHTML + "</select></label>");
};
</script>

 

E agora, vamos acionar esta função e fazer acontecer!

<script>
/* Quando o documento for carregado */
$(document).ready(function(){
	/* Converte hyperlinks em selectbox */
	$('a.selection').a2select({
		destiny: 'div#destino'
	});
});
</script>

 

Pronto! O resultado será uma select box montada com as opções do hyperlink, sem atrapalhar o SEO de seu site.