Buenas razones por las que utilizar urls amigables

Mucho se escucha sobre las famosas urls amigables y muchas veces los desarrolladores se plantea implementar en su sitio las urls amigables.

¿Por qué deberias poner urls amigables en tu sitio?

Pues hay varias razones pero lo que habrá que plantearse es si estos motivos son suficientes como para rediseñar tu sitio y adaptarlo al uso de urls amigables.

1. Marketing Viral

El marketing viral y la publicidad viral son términos que se utilizan para explicar aquellas tácticas que utilizan redes sociales para producir incrementos exponenciales en el conocimiento de tu sitio.

Obviamente es mucho mas sencillo recordar http://www.tufuncion.com/linea_comandos que http://www.tufuncion.com/node?id=17.

Del mismo modo será más sencillo recordar una url descriptica cómo la escrita anteriormente.

2. Optimización

La mayoría de los buscadores (pocas excepciones como Google) no indexa cualquier página que tenga símbolos raros (?,=,&) en la url.

Por eso muchas webs dinámicas no son correctamente indexadas, y obviamente no es bueno que no te indexen.

Efecto del cambio

El efecto que esto provocó en Google fue enorme, el buscador empezó a pasearse como Pedro en su casa por el Weblog e indexó casi todo su contenido. Pasamos de tener unas 5,000 páginas indexadas a más de 12,000… no me pregunten ¿por qué?, pero fue a consecuencia del cambio (de esto no hay duda).

Otro efecto positivo (si el afán es el posicionamiento en buscadores), fue la mayor atracción de visitantes pasajeros (no es mi intención hablar de estadísticas, pero aproximadamente hubo un incremento del 10% al 20% de tráfico por Google).

Baluart.net

3. Imagen de tu marca

La imagen de tu sitio sera mucho más transparentes aquellos id seran convertidos en palabras que diran en cada momento algo interesante sobre la página que albergan.

Es una de las principales características de las webs 2.0 lo que dice mucho sobre el futuro de esta técnica, está claro que si el objetivo de un buscador tan importante como Google es organizar la informacion del mundo terminarán premiando a aquellos que les faciliten el trabajo, CMS cómo Drupal, Joomla, WordPress, Moveable Type utilizan está técnica obteniendo unos resultados geniales.

Hacer URLs amigables

Voy a explicar dos técnicas para llevar a cabo esta mejora en nuestras páginas, ambas funcionan con PHP-Apache.

Método 1: PATH_INFO

Si echas un ojo a la barra de direcciones de webs cómo Sitepoint veras una URL como esta:

http://www.sitepoint.com/article/flex-2-internet-applications

Sitepoint utiliza este método para hacer sus URLs amigables.

Esta solución es la menos avanzada tecnologicamente pero la que requiere de menos recursos, va para aquellos que tienen una cuenta de hosting compartido o un servidor gratuito, habrá que colocar este script en la cabecera de todas nuestras páginas (recomendable el uso de include).

$var_array = explode(“/”,$PATH_INFO);
$num_param = count($var_array );

if($num_param % 2 == 0) {

$var_array [] = ”;

$num_param++;

}

for($i=1; $i<$num_param; $i+=2) {

$$var_array [$i] = $var_array [$i+1];

$total=$total + $$var_array [$i];

}

La clave de su funcionamiento está en que toma los números pares como variables y los impares cómo los valores.

Tomemos cómo ejemplo esta url:

http://www.tusitio.com/articulo.php/id/333/noticia/21&#8221;

Primeto separamos las diferentes partes en variables, usando la funcion explode de php.

Una vez realizado esto, obtendremos el siguiente resultado:

$var_array[0] = “articulo.php”

$var_array[1] = id

$var_array[2] = 333

$var_array[3] = noticia

$var_array[4] = 21

Podríamos renombrar los $var_array[1] por nombres más descriptivos como $id o $noticia y hacer una consulta a la base de datos con está información.

Si vas a utilizar este método asegurate de tener controlado el log de tu servidor para evitar las molestas “arañas”.

Método 2 .HTACCESS

Este método implica el uso del archivo .htaccess, si eres nuevo en esto, te puedo decir que es un archivo que se utiliza para administrar las opciones de acceso en el directorio en el que se encuentra alojado.

En primer lugar asegurate de tener activado el mod_rewrite esencial para el uso de este método, edita un fichero y pega este código:

phpinfo();

?>

Una vez comprobado que el mod_write está activado podemos pasar a configurar nuestro .htaccess:

Options +FollowSymLinks

RewriteEngine on
Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5

Rewriterule ^(.*)/(.*),(.*)/$ $1.php?$2=$3

En las dos primeras líneas comprobamos el correcto funcionamiento del mod_rewrite en el Apache (si esto no funciona vuelve al paso anterior y compruébalo).

En las líneas siguientes se establecen una serie de reglas que nos permitirán transformar nuestras URLs.

Analizemos la regla: Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5

Los valores precedidos por el símbolo dólar ($) reemplazan a los (.*) de las URL amigables.

Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5

Supongamos que tenemos esta url:

./index.php?seccion=coches&id=12345

obtendremos…

./index/seccion,coches/id,12345/

Por lo tanto nos quedamos con el nombre del script libre de extensión, y transformamos los valores en subcarpetas.

Sube el .htaccess y comprueba que todo funciona correctamente, una vez hecho esto edita todas las reglas que necesites.

Por último falta revisar nuestro antiguo código, tomando como comienzo que el resultado de la consulta a la base de datos esta en $rs nuestro código viejo sería:

while($row = @ mysql_fetch_array($rs)){

$category = $row[“category”];

$category = URLencode(htmlentities($category,ENT_QUOTES));

$subject= $row[“subject”];

$subject = URLencode(htmlentities($subject,ENT_QUOTES));

/*format for following HTML result
http://www.mysite.com/main.php?category=books&subject=biography

*/

echo “<‘a href=\”http://www.mysite.com/main.php?

category=$category&subject=$subject\”>”;

echo “$row[description]
\n”;
}

?>

Y nuestro código para URLs amigables quedaría:

while($row = @ mysql_fetch_array($rs){

$category = $row[“category”];

$category = URLencode(htmlentities($category,ENT_QUOTES));
$subject= $row[“subject”];

$subject = URLencode(htmlentities($subject,ENT_QUOTES));

/*format for the URL rewrite is as follows

http://www.mysite.com/type$category-$subject.htm

*/

echo “<‘a href=\”http:/www.mysite.com/type$
category-$subject.htm\”>”;

echo “$row[description]
\n”;

}

?>

Enlaces interesantes

Cómo consejo final conviene antes de comenzar conocer más sobre el uso del mod_rewrite en Apache.

SitePoint: Search-Engine Firendly Urls

Baluart.net

Devarticles: Make Dynamic URLs

Foro: Uso de URLs amigables

Mejores prácticas en PHP

Via BuayaCorp

 

PHP best practices, the dos and don’ts, es una presentación muy interesante acerca de las cosas que se deben tener en cuenta al desarrollar aplicaciones Web con PHP.

La presentación está dividida en tres partes:

Nota: para ver la presentación necesitan un navegador que no sea IE, caso contrario verán el siguiente mensaje:

IE is not supported – please use Firefox, Safari, Konqueror or just about anything else.

Optimiza tu blog para los buscadores

Via TuFuncion.com, uno de los sitios que la lleva hoy por hoy !!

 

Estructura de la URL

La estructura de tu URL debería ser rellenada con palabras, sin llegar a ser demasiada extensa.
A menudo se ven páginas en los que las fechas de publicación son incluidas en la URL pero yo prefiero algo como esto:

tusitio.com/titulodepost

Esto mantiene una URL corta descriptiva y sencilla de recordar.

Título de las páginas

Los motores de búsqueda usa los títulos de las páginas en sus resultados de búsqueda. La mayoría de los blogs mantienen una estructura parecida a esta:

nombredelblog.com >> Título del Post

Mi recomendación sería colocar unicamente el título del post. Aquí os dejo el código para los que utilizais Movable Type y WordPress.

Movable Type

<title><$MTEntryTitle$></title>

WordPress

<title><?php if (is_home () ) { bloginfo(‘name’); } elseif ( is_category() ) { single_cat_title(); echo ” – “; bloginfo(‘name’); } elseif (is_single() || is_page() ) { single_post_title(); } elseif (is_search() ) { bloginfo(‘name’); echo ” search results: “; echo wp_specialchars($s); } else { wp_title(”,true); } ?> </title>

Meta Description

Los motores de búsqueda a menudo ven contenido cómo duplicado pero con un Meta Description podenmos solventar este problema.

Movable Type

<meta name=”description” content=”<$MTEntryBody words=”25″$> …” />

WordPress

Si usas WordPress descarga el plugin head meta description. Fija entre 15 y 25 palabras.

Cabeceras

Las cabeceras son realmente importante para la indexación de tu contenido, tienes numerosas opciones para resaltar contenido dentro de tu post, pero lo mas eficaz es utilizar las etiquetas H1, H2, o H3.

Imágenes y enlaces de texto

Las imagenes y enlaces de texto deberían de poseer un comentario que se muestre al pasar el ratón por encima del enlace.
Esto se hace con las etiquetas “alt” (imágenes) y “tittle” (texto) aseguráte de que estos comentarios contengan palabras descriptivas.
Alt

alt=”descripción”

Title

title=”descripción”

Sitemap

La mayoría de blogs no posee sitemap y lo necesitan, puesto que es un elemento muy importante de cara a la optimización para los motores de búsquedas.Puedes utilizar el servicio de Google “webmaster tools” o crear tu propio sitemap.
Te ayudará a indexar el contenido de tu blog de manera eficiente.

Redirección 301

Cuando otras páginas enlazan tu blog lo harán: http://tufuncion.com o http://www.tufuncion.com. Habitualmente los motores de búsqueda verán dos sitios diferentes, sólo habría que echar un vistazo a Google en las que el numero de enlaces de una y otra estrcutura son totalmente distintos.
Si prefieres unificar estos datos solo tendras que configurar el .htaccess con este trozo de código:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_Host} ^TUSITIO.com [NC]
RewriteRule ^(.*)$ http://www.TUSITIO.com/$1 [L,R=301]

Asegurate de modificar los parametros de las líneas 3 y 4 por los del nombre de tu dominio.

Linkar

Error si piensas que no te aporta nada linkar a otros blogs, es una característica común a los blogs importantes… estos linkan y tu debes linkar de cara a los motores de búsqueda optimizarás la indexacion de tu sitio.
La forma de hacerlo más común es incluyendo un blogroll.

Hacer ping

Si deseas incrementar tu tráfico prueba a hacer ping a páginas como technorati, Icerocket o blogalaxia.
Si utilizas FeedBurner puedes hacer ping a traves de ellos.Icerocket.

Buen truco para debugear tus CSS

Via anieto2k.com

Muy buen truco para poder tener tus capas más o menos colocadas sin tener que darles colores a cada una de ellas. La verdad es que su facilidad me ha sorprendido y su funcionamiento es simplemente genial.


  * { outline: 2px dotted red }
  * * { outline: 2px dotted green }
  * * * { outline: 2px dotted orange }
  * * * * { outline: 2px dotted blue }
  * * * * * { outline: 1px solid red }
  * * * * * * { outline: 1px solid green }
  * * * * * * * { outline: 1px solid orange }
  * * * * * * * * { outline: 1px solid blue }

Pega este código en cualquier parte de tu CSS o mejor aún crea un fichero CSS y lo agregas a tu proyecto, esto hará que todos tus elementos aparezcan delimitados por lineas de colores. Muy util para las últimas y primeras etapas de maquetación.

RIDE-ME un IDE para Ruby on Rails en Windows

Vía Webmasterlibre.com
RIDE-ME logo RIDE-ME es un entorno de desarrollo de Rails para Windows. Enfocado principalmente a los desarrolladores en proceso de migración de una plataforma de programación de Microsoft.

Captura de pantalla de RIDE-ME

RIDE-ME es software libre publicado bajo una licencia MIT

RIDE-ME: http://www.projectrideme.com/

Extensiones Firefox para programadores Web

via TuFuncion.com

Muy buen artículo, hay muchas extensiones que ni conocía, por supuesto, usa firefox y tendrás el poder, jajajajaja. muy interesante …

HTML Validator (http://users.skynet.be/mgueury/mozilla/) – Válida páginas webs con el estándar W3C con un simple checkbox en la esquina inferior derecha, podrás comprobar de una manera sencilla y visual si la página está validada, contienen warnings o no esta validada.

FireFTP (https://addons.mozilla.org/firefox/684/) – Está plataforma libre y segura proporciona acceso a sevidores FTP. No necesitaras un software externo a tu navegador para conectarte a tus cuentas FTP.

Professor X (https://addons.mozilla.org/firefox/2823/) – Permite ver el código fuente sin necesidad de tener que dirigirte al menu del navegador.

NikkelWHOIS (https://addons.mozilla.org/firefox/2646/) – Comprueba la información correspondiente al WHOIS de cualquier página haciendo click en un pequeño botón incrustado en tu barra de navegación.

IE Tab (http://ietab.mozdev.org) – Harto de comprobar una y otra vez la compatibilidad de tus páginas en los distintos navegadores… Esta es tu solución podrás testear tus páginas en diferentes pestañas dentro de tu Firefox.

FireBug (https://addons.mozilla.org/firefox/1843/) – Avanzada consola debugger que permite comprobar el estado de código JavaScript, CSS, HTML y Ajax.

Codetech (https://addons.mozilla.org/firefox/1002/) – Editor web con cierto parecido a Dreamweaver. Increible extensión para desarrolladores que no quieren desembolsar el precio de una licencia de Dreamweaver.

SEO for Firefox (http://tools.seobook.com/firefox/seo-for-firefox.html) – Resultados de búsquedas en Google y Yahoo, incluyendo pagerank, tiempo de página, ranking Alexa, WHOIS y algunas características más.
Añade tambien enlaces a servicios como Google Trends, Google Traffic Estimator, y Overture View Bid tool.

Yet Another Window Resizer (https://addons.mozilla.org/firefox/2498/) – Permite redimensionar la resolución de pantalla de tu navegador sin necesidad de configurar los valores de pantalla de Windows.

AdSense Preview (https://addons.mozilla.org/firefox/2132/) – Vista pervia de el estado de tu cuenta Adsense.

Screen grab (https://addons.mozilla.org/firefox/1146/) – Toma un pantallazo de una página y lo guarda como imagen, gran rendimiento acompañandolo con el uso de Photoshop.

Server Spy (https://addons.mozilla.org/firefox/2036/) – Indica el tipo de servidor de la página (Apache, IIS, etc.).