Creando enlaces básicos
Los enlaces se crean utilizando el tag <a> en donde debemos colocar a donde queremos enlazar y el texto que servirá de enlace. Por ejemplo si deseamos enlazar al buscador Google lo hacemos con el siguiente código:

1

<a href="http://www.google.com">Google</a>

La ruta a la que deseamos enlazar puede ser de dos tipos: absoluta y relativa.

• Absoluta: es decir la ruta completa, sirve para cuando deseamos enlazar sitios externos al nuestro, por ejemplo: http://www.google.com
• Relativa: es la ruta relativa a la página que estamos visitando, se utiliza cuando deseamos enlazar páginas de nuestro mismo dominio, por ejemplo: contacto.php

Respecto a las rutas relativas, vemos que sucede si la página esta en una carpeta diferente a la de nuestro archivo actual:

• folder/pagina.html para cuando la pagina se encuentra en una carpeta llamada folder.
• ../pagina.html para cuando la pagina se encuentra en una carpeta superior.
• /pagina.html cuando el destino se encuentra en el root de nuestro servidor.

Enlazando desde Imagenes
Si deseamos que el enlace sea una imagen en lugar de un texto, debemos colocar el tag <img> con las propiedades de la imagen de la siguiente forma:

1

<a href="contact.php"><img src="btcontact.gif" width="120" height="24" /><a>

Agregando la propiedad target
La propiedad target sirve para indicar donde deseamos abrir el enlace, para ello tenemos las siguiente posibilidades:

• _blank para abrir en enlace en una ventana nueva.
• _parent si usas frames para abrir en el frame padre.
• _top para abrir en el frame principal de la página.
• _self abrir en enlace en la misma ventana.

Entonces si deseamos poner enlaces para que abran en ventana nueva podemos colocarlo de la forma:

1

<a href="http://www.google.com" target="_blank">Google</a>

Como pueden ver es sencillo la creación de enlaces y con ello ayudarán a sus visitantes a desplazarse cómodamente en el contenido de su página web.

Tweet

La mayoría de buscadores tienen amplia documentación para ayudarnos a mejorar la ubicación de nuestros sitios web en los resultados de búsqueda. Recientemente Google ha puesto a disposición una Guía SEO para principiantes. Veamos que puntos recomiendan.

Títulos de páginas únicos y concisos
Los títulos de tus páginas deben ser únicos, cortos y concisos indicando el contenido del mismo, de esta forma los usuarios reconocerás fácilmente la información a la que accederán. Un error común es colocar los títulos de las páginas con lo cual aparecerá “Untitled” o “New Page 1“.

1

<title>2WebFacil</title>

Usar el metatag description
El metatag description es utilizado para indicarle a los buscadores un resumen del contenido de la página que se esta visualizando, este contenido es utilizado como texto descriptivo en los resultados de búsqueda. Si no se encuentra el description el buscador generará automáticamente un pequeño resumen con las primeros párrafos que se encuentran en nuestro html.

1

<meta name="description" content="Tips, tutoriales para personalizar tu web" />

Mejorar las estructura de los URLs
Es recomendables que las URLs contengan las palabras clave de las páginas parte del título, esto hará que sea mas sencillo recordarlas y puede indicar la estructura de nuestros documentos. Por ejemplo es mejor crear una página llamada contacto.html para nuestra página de contáctenos que una llamada file3.html. Si estas utilizando algún lenguaje de servidor es recomendable no utilizar los IDs y utilizar los keywords, por ejemplos:

1

http://tuweb.com/products.php?idcat=5&idprod=116

Es poco probable que el usuario pueda identificar a que producto accederá en lugar de ello se puede cambiar la estructura del html de la siguiente forma:

1

http://tuweb.com/products/fruits/apples/

Es obvio que en el segundo enlace estas entrando a la sección productos, estas visualizando las manzanas de la categoría frutas.

Crea tu sitio fácil de navegar
Organiza tus archivos de forma lógica de manera que el usuario pueda detectar a que información esta accediendo, por ejemplo los productos puedes colocarlos dentro de una carpeta llamada productos y puedes crear una carpeta por cada producto que tienes.

Ofrece contenido y servicios de calidad
Si ofreces un sitio con contenido de calidad hará que los visitantes regresen nuevamente, esto ayuda a fidelizar a los usuarios, además si un usuario ha encontrado útil tu web de seguro lo recomendará y así conseguirás mas visitas. Para ello puedes escribir contenido fácil de leer, crea contenido único, ofrece productos y servicios exclusivos.

Escribe correctamente los enlaces
Los enlaces son utilizados para redireccionar a otras páginas, pero estos enlaces deben contener explicitamente el contenido al cual se accederá. Por ejemplo si tienes un enlace al listado de productos es recomendable colocar ‘Listado de Productos‘ en lugar de ‘Click aqui‘.

1

...puede visitar nuestro <a href="productos.html">Listado de Productos</a>

Utiliza los tags de texto adecuadamente
Los tags para formatear texto (<h1>, <h2> … <h6>) aparte de dar el tamaño de los textos indica la estructura del contenido, un tag <h1> es como el titulo del texto, <h2> como si fuera el subtitulo y así sucesivamente. Esto ayudará a los buscadores a tener la estructura adecuada del contenido de nuestra página.

Optimiza el contenido de las imágenes
Si utilizas imágenes es recomendable agregarle la propiedad alt en donde se coloca el contenido de la imagen, por ejemplo si estas mostrando una imagen con la fachada de una casa el código que debes poner sería:

1

<img src="photo.jpg" width="200" alt="Fachada Edificio San Andres" />

De esta forma los buscadores tendrán una referencia del contenido de la imagen, y en los buscadores de imagen pueden encontrarlas e incluso recibir visitas por este método.

Utiliza el archivo robots.txt
Este archivo le indica a los buscadores que contenidos deben o no deben indexar, de esta forma podemos restringir que se indexen los contenidos de la zona de usuarios registrados por ejemplo.

Utilizar la propiedad rel=”nofollow” en los enlaces
Esta propiedad le indica a los buscadores que no rastreen o indexen el enlace, esto es útil para prevenir que se rastreen paginas con contenido dudoso, por ejemplo es lo comentarios de los blogs los enlaces tiene la propiedad rel=”nofollow” para indicar que estos links no forman parte de contenido del blog y que no deben seguirse. también es útil para prevenir el spam.

1

<a href="http://webspam.com" rel="nofollow">Comentario Spam</a>

Utilizar Google Webmaster Tools
Google Webmaster Tools son un conjunto de herramientas gratuitas para facilitar el seguimiento de las páginas indexadas así como de errores y sugerencias para nuestras páginas.

En resumen son tips sencillos y fáciles de implementar los cuales nos ayudarán a posicionarnos adecuadamente en los buscadores y de esta forma conseguir más visitas.

Tweet

Para nuestro formulario de contacto utilizaremos el servicio Kontactr el cual mediante un registro sencillo y sobre todo gratuito nos permitirá obtener un formulario de contacto para nuestro web o blog según sea nuestra necesidad.

Utilizando Kontactr
Una vez registrados en este servicio tendremos las siguientes opciones, Embed Widget – AJAX el cual permite incluir el formulario con validación y envío en AJAX, para es necesario copiar un codigo del tipo:

1
2

<script type="text/javascript"> id = XXXXX; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>

La segunda forma de utilizar es Embed Widget el cual nos brinda el código html del formulario para incluirlo directamente, el cual es de la forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<form method="post" action="http://kontactr.com/euser.php">
<input name="id" type="hidden" value="XXXXX" />
<table cellpadding="10px" border="0" style="font-size: 13px; font-family: Tahoma, Verdana;">
<tr>
<td align="right">Your Name : </td>
<td><input name="sender_name" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Your Email : </td>
<td><input name="sender_email" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Subject : </td>
<td><input name="subject" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right" valign="top">Message : </td>
<td><textarea rows="10" cols="40" name="message" style="font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;"></textarea></td>
</tr>
<tr>
<td align="right" valign="middle">Image (case-sensitive): </td>
<td><img src="http://kontactr.com/captcha.php" /> <input type="text" name="captcha_code" style="margin-bottom: 10px; font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="send" type="submit" id="send" value="Send" style="font-size: 18px; width: 100px; letter-spacing: 5px;" /></td>
</tr>
</table>
</form>

Podemos observar en este formulario que tenemos los nombres de los campos, los cuales podemos modificarlos para personalizarlos, por ejemplo podríamos tener nuestro formulario en español:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<form method="post" action="http://kontactr.com/euser.php">
  <table cellpadding="2px" border="0">
    <tr>
      <td align="right">Nombre: </td>
      <td><input name="sender_name" type="text" style="width:250px;" /></td>
    </tr>
    <tr>
      <td align="right">Email: </td>
      <td><input name="sender_email" type="text" style="width:250px;" /></td>
    </tr>
    <tr>
      <td align="right">Asunto: </td>
      <td><input name="subject" type="text" style="width:250px;" /></td>
    </tr>
    <tr>
      <td align="right" valign="top">Mensaje: </td>
      <td><textarea rows="10" cols="40" name="message" style="width:250px;"></textarea></td>
    </tr>
    <tr>
      <td align="right" valign="middle">Imagen: </td>
      <td><img src="http://kontactr.com/captcha.php" />
        <input type="text" name="captcha_code" style="margin-bottom: 10px; padding: 3px;" /></td>
    </tr>
    <tr>
      <td align="center">&amp;nbsp;</td>
      <td><input name="send" type="submit" id="send" value="Send" style="width: 100px;" />
        <input name="id" type="hidden" value="XXXXX" /></td>
    </tr>
  </table>
</form>

Pueden ver el ejemplo funcionando:

• Formulario de contacto en WordPress
• Formulario de contacto en Blogger

Tweet