SEO aplicado en Web con carga de contenidos via AJAX

[popobcn]

Hola!

Leyendo uno de los POST recientes de la seccion de Posicionamiento SEO de Dragonx, he creido oportuno dedicar un tema a las posibles vias de optimización de cara a los motores de busqueda cuando nos encontramos con proyectos realizados integra o parcialmente en AJAX.

El uso de AJAX y la carga de contenidos externos mediante este lenguaje, se esta extendiendo cada vez más en muchisimos scripts y páginas web, haciendo que la parte de la optimización de cara a buscadores nos parezca una tarea complicada o practicamente imposible en muchos casos. Pero la realidad es que podemos salir airosos de esta situación y evitar que nuestros contenidos cargados via AJAX pierdan visibilidad de cara a los motores de busqueda

Para nuestro ejemplo vamos a coger una página web que carga todo su contenido de forma externa via AJAX y vamos a optimizarla de cara a los principales motores de busqueda realizando tan solo unos pocos cambios en el código y agregando 4 líneas más en nuestro HTACCESS. Y todo esto sin DUPLICAR CONTENIDOS .oO(Flipi? Flipiiiiiiiiiiiiiiiiiiiii!!!!) gracias a que el contenido cargado via ajax es practicamente INVISIBLE de cara a los motores de busqueda.

¿Como conseguiremos esto?
Realizando la carga selectiva de contenidos gracias a la transmisión de una variable por la URL, que obviamente optimizaremos para que le guste más a Google, y que identificaremos con la parte de PHP para indicarle a AJAX que contenido externo ha de cargar.

Gracias a la identificación del contenido de la variable, podremos controlar los siguientes elementos de cara a la optimización de nuestro sitio:

• Titulo de página
• Descripción de la página
• Meta-keywords

Para este ejemplo, si os interesa que lo desarrolle más podéis votar en este mismo post, tomaré prestado un script de DynamicDrive - Dynamic Ajax Content, que como su nombre indica, carga contenido via AJAX.

[pulidomann]

Hola!

Muy bueno el post. Como observación, el metatag de keywords no se toma en cuenta para el algoritmo PageRank, por ejemplo, ni para aumentar el SEO (checa twitter.com/google/status/4151902196).

Lo que está a punto de hacer explosión con los webmaster tools, es el tracking de eventos, el cual, aunado a una buena descripción y buen uso de separación de contenido en HTML, comportamiento en JavaScript, y estilos en CSS , así como la calidad del contenido, entonces automáticamente se hará un buen indexado.

No hay que olvidar generar bien los sitemap.xml.

Saludos!

-Luis

[bex]

Iniciado por pulidomann

Hola!

Muy bueno el post. Como observación, el metatag de keywords no se toma en cuenta para el algoritmo PageRank, por ejemplo, ni para aumentar el SEO (checa twitter.com/google/status/4151902196).

Lo que está a punto de hacer explosión con los webmaster tools, es el tracking de eventos, el cual, aunado a una buena descripción y buen uso de separación de contenido en HTML, comportamiento en JavaScript, y estilos en CSS , así como la calidad del contenido, entonces automáticamente se hará un buen indexado.

No hay que olvidar generar bien los sitemap.xml.

Saludos!

-Luis

Amigo, primero que el SEO no se aumenta o decrece, se realiza y punto. Segundo, la meta keywords no es tomada en cuenta por Google, eso no significa que los otros buscadores tampoco lo hagan. Y lo del PageRank... a quién le impota ya el PageRank?


PD: Popobcn me parece muy interesante tu aporte, hay poco (o nulo) material al respecto en el foro.

[pulidomann]

Tienes razón, hay muchas maneras de medir el tráfico en un sitio web.

El SEO es un proceso de mejora, y PageRank.. bueno son 500 millones de variables y 200 000 millones de términos (google.com/corporate/tech.html) .. tiene su importancia relativamente con SEO.

Sólo fue una observación. A mi también me pareció interesante el post.

Saludos!

-luis

[lagardel]

hola popobcn he leido tu post anterior sobre la carga de contenido con ajax y tengo varias dudas:

hablas de cargar el contenido pasando variables asi /variable1/variable2/ etc, si yo estoy en www.dominio.com y pulso sobre www.domino.com/variable1/ como haces para que la pagina no refresque y lo que es peor como haces para que la araña de google pulse ahi y no vea que el www.dominio.com/variable1/ y www.dominio.com tienen el mismo contenido.

me interesa mucho porque hasta ahora solo he conseguido hacer algo usando www.dominio.com#keyword1 y tiene muchas limitaciones.

[juanota]

Iniciado por popobcn

Para este ejemplo, si os interesa que lo desarrolle más podéis votar en este mismo post, tomaré prestado un script de DynamicDrive - Dynamic Ajax Content, que como su nombre indica, carga contenido via AJAX.

Hola, popobcn, ya te he votado ¿cuántos votos necesitas para desarrollar más el ejemplo? Creo que eso es lo interesante.
Saludos

[popobcn]

Bueno, pensaba que había pasado desapercibido el post... pero veo que hay algo de movimiento :)

Iniciado por lagardel

hablas de cargar el contenido pasando variables asi /variable1/variable2/ etc, si yo estoy en www.dominio.com y pulso sobre www.domino.com/variable1/ como haces para que la pagina no refresque y lo que es peor como haces para que la araña de google pulse ahi y no vea que el www.dominio.com/variable1/ y www.dominio.com tienen el mismo contenido..

La idea es que Google, al igual que el resto de motores de busqueda; sea capaz de identificar y tratar cada uno de los elementos cargados via AJAX como una sección independiente de nuestro proyecto, para ganar visibilidad y mejorar nuestras opciones de cara a una correcta indexación.

Con esto conseguiremos que nuestro "proyecto" no tenga una única página, sino tantas como secciones planteemos. El refresco de la página al efectuar un cambio de sección, una vez dentro del proyecto, no será necesario.

EJEMPLO
Página AJAX con un sistema de carga de contenidos con TABS.

La carga de todos los contenidos, se realizará mediante AJAX con un iframe. El proyecto consta inicialmente de una única página de carga de contenidos y distinguiremos un total de 4 secciones / tabs.

1. Portada
2. Portafolio
3. Acerca de
4. Contacto

Si dieramos de alta nuestro proyecto en los motores de busqueda de esta manera, no se seguirian los enlaces correctamente, no se indexaría más que los siguientes elementos:

• Titulo de proyecto
• Meta-etiquetas definidas en el script de carga

Lo que vamos a conseguir es que, de cara a los motores de busqueda, nuestro proyecto tenga las siguientes secciones, con sus correspondientes titulos y meta-etiquetas personalizadas para:

1. proyecto.xxx/index.php - Portada
2. proyecto.xxx/Portafolio
3. proyecto.xxx/Acerca de
4. proyecto.xxx/Contacto

Sin perder el sistema de navegación y carga de contenidos realizado en AJAX de cara a los usuarios que lleguen atraves de resultados de busqueda.

¿Como?
Sencillo, vamos a plantear dos sistemas de navegación diferentes. Uno para humanos y otro para motores de busqueda, sin hacer ninguna practica de blackhat (Claro esta... xD)

El sistema de navegación para humanos
Es propiamente el sistema de carga de contenidos via AJAX con navegación por TABS. El usuario podrá navegar libremente por cualquiera de las secciones existentes, sin sufrir ningún refresco de pantalla al cambiar de opción.

El sistema de navegación para motores de busqueda
NO es otra cosa que un sencillo menú dispuesto al pie de la página de nuestro proyecto, con el traspaso necesario de variables; para que los spiders puedan seguirlos, cargar las correspondientes secciones e indexarlas correctamente.

En cuanto desarrollado el ejemplo en local, lo subo y vamos avanzando paso a paso... :)

Saludos

[pulidomann]

Hay una manera fácil de manejar Ajax sin perder la estructura para spiders y robots:

Los robots siempre toman en cuenta las etiquetas <a/>, o sea que una liga <a href="terminos-y-condiciones">Ts y Cs</a> te "refrescaría la página a una página que hay que tener preparada (por si te encuentran en algún buscador) con los términos y condiciones.

Así mismo, quieres que los términos y condiciones aparezcan al usuario vía ajax sin refrescar la página (cuando se está registrando tal vez).

Puedes guardar 2 paginas: Terminos-y-condiciones.html tiene encabezados, etc... es un html normal

La otra página (ejemplo "terminos-y-condiciones-ajax.html") contiene unicamente lo que has de insertar (el contenido, sin encabezados ni nada) en cierto div en tu html, via ajax

Con la librería JQuery (de javascript) podemos hacer lo siguiente:

<body>
<h2>esto es una prueba</h2>
<a id="mi_link" href="terminos-y-condiciones.html">este es el link</a>
<div id="mi_div_para_ajax"></div> <!-- en ese div se inyecta el contenido -->
</body>
<script type="text/javascript" src="el-jquery.js"></script> <!-- bajalo de jquery.com -->
<script type="text/javascript">
// esto es para que cuando ya haya cargado el html, entonces se ejecute el script
$(document).ready(function(){
/* el .click es un evento para cuando den clic... el #mi_link es el id del link (puede ser cualquier selector */
$("#mi_link").click(function(){
// puede ser de varios tipos el llamado, en este caso es html
$.get("terminos-y-condiciones-ajax.html", {parametros:"enformatojson"}, function(resultado){
$("#mi_div_para_ajax").html(resultado);
}, "html");
/* el return false es muy importante para prevenir el comportamiento por default del link */
return false;
});
});
</script>

De esa manera, los spiders y robots, ven los links como parte de la estructura del sitio, y si la gente busca en google, puede encontrar esa seccion del sitio, pues ya está también en el servidor, una página estática con ese contenido.

Saludos!

-luis

[lagardel]

Iniciado por pulidomann

Hay una manera fácil de manejar Ajax sin perder la estructura para spiders y robots:

Los robots siempre toman en cuenta las etiquetas <a/>, o sea que una liga <a href="terminos-y-condiciones">Ts y Cs</a> te "refrescaría la página a una página que hay que tener preparada (por si te encuentran en algún buscador) con los términos y condiciones.

Así mismo, quieres que los términos y condiciones aparezcan al usuario vía ajax sin refrescar la página (cuando se está registrando tal vez).

Puedes guardar 2 paginas: Terminos-y-condiciones.html tiene encabezados, etc... es un html normal

La otra página (ejemplo "terminos-y-condiciones-ajax.html") contiene unicamente lo que has de insertar (el contenido, sin encabezados ni nada) en cierto div en tu html, via ajax

Con la librería JQuery (de javascript) podemos hacer lo siguiente:



De esa manera, los spiders y robots, ven los links como parte de la estructura del sitio, y si la gente busca en google, puede encontrar esa seccion del sitio, pues ya está también en el servidor, una página estática con ese contenido.

Saludos!

-luis

En tu caso necesitariamos tambien un archivo htaccess que le indique al servidor que si vienen a esa pagina desde el buscador se cargue la pagina principal con los datos que contiene ese archivo.

No?

[popobcn]

@pulidoman, como solución... funcionaría. Pero tiene una carga de trabajo extra en la duplicación de los contenidos y la personalización de alguno de ellos. Esta tarde si tengo tiempo pongo un ejemplo de como hacerlo sin duplicar ni crear más archivos de los existentes ;) Es incluso, más fácil que lo que planteas y menos laborioso

Saludos

[rashid]

Optimizar con Ajax no solo implica:

* Titulo de página
* Descripción de la página
* Meta-keywords

No descuides la parte más importante: El contenido, ya que el contenido (texto, imagenes, multimedia) debe estar en un formato leible.
No solo eso, también las URLs de las páginas que tengan sentido y sobre todo, que cambien cuando el nuevo contenido es llamado.
Otro punto a cuidar son los links, cuida que sean leidos.
Otro punto es....(480 mas hay!).

Yo no desarrollaria integramente en Ajax, desarrollaría en una plataforma html-php y usaría ajax como complemento para las operaciones necesarias (fórmulas, mapas, interacciones, etc).

;)

[popobcn]

Vamos a darle un empujoncito al tema... Para este ejemplo vamos a emplear el sistema de carga de contenidos via AJAX de DYNAMICDRIVE (Ajaxtab) y para que podamos ver lo sencillo que será adaptar nuestro proyecto inicial haciendo simplemente unos cuantos cambios, vamos a ver primero el código HTML sin modificar y despues las modificaciones que añadiremos:

CÓDIGO ORIGINAL:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

<body>

<h1>SEO Vs AJAX TAB - Visibilidad de cara a motores de busqueda</a></h1>

<p align="justify">
En este ejemplo ganaremos tantos enlaces como secciones definamos en nuestro proyecto sin perder la usabilidad 
de la carga de AJAX y garantizando una navegación limpia a los usuarios que lleguen a nuestro gracias a los 
resultados de busqueda.
</p>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

</body>
</html> 

Que vamos a convertir en el siguiente, agregando al pie un menu con los enlaces construidos con el traspaso de variable necesario para desarrollar nuestro ejemplo y el código necesario para ganar de entrada las METAS básicas

CÓDIGO MODIFICADO:

Código PHP:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
 
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
 
/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
</script>
<?php
if($_GET['seccion']!=""){
    switch $_GET['seccion']{
        case "portafolio":
        ?>
        <title>Portafolio - Proyecto</title>
        <meta name="description" content="Descripcion, bla, bla, bla" />
        <meta name="keywords" content="bla, bla, bla..." />
        <?
        break;
        
        case "acerca":
        ?>
        <title>Acerca de - Proyecto</title>
        <meta name="description" content="Descripcion, bla, bla, bla" />
        <meta name="keywords" content="bla, bla, bla..." />
        <?
        break;
        
        case "contacto":
        ?>
        <title>Contacto - Proyecto</title>
        <meta name="description" content="Descripcion, bla, bla, bla" />
        <meta name="keywords" content="bla, bla, bla..." />
        <?
        break;
        
        default:
        ?>
        <title>Proyecto</title>
        <meta name="description" content="Descripcion, bla, bla, bla" />
        <meta name="keywords" content="bla, bla, bla..." />
        <?
        break;
    }    
}
?>
</head>
 
<body>
 
<h1>SEO Vs AJAX TAB - Visibilidad de cara a motores de busqueda</a></h1>
 
<p align="justify">
En este ejemplo ganaremos tantos enlaces como secciones definamos en nuestro proyecto sin perder la usabilidad 
de la carga de AJAX y garantizando una navegación limpia a los usuarios que lleguen a nuestro gracias a los 
resultados de busqueda.
</p>
 
<ul id="countrytabs" class="shadetabs">
<li><a href="portada.html" <? if($_GET['seccion']==""){ echo "class='selected'";} ?> rel="countrycontainer">Portada</a></li>
<li><a href="portafolio.html" <? if($_GET['seccion']=="portafolio"){ echo "class='selected'";} ?>  rel="countrycontainer">Portafolio</a></li>
<li><a href="acerca.html" <? if($_GET['seccion']=="acerca"){ echo "class='selected'";} ?>  rel="countrycontainer">Acerca de</a></li>
<li><a href="contacto.html" <? if($_GET['seccion']=="contacto"){ echo "class='selected'";} ?>  rel="countrycontainer">Contacto</a></li>
</ul>
 
<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>
 
<script type="text/javascript">
 
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
 
</script>
 
<p align="right">
<a href="#" title="Portada">Portada</a> | <a href="proyecto.com/index.php?&seccion=portfolio" title="Portafolio">Portafolio</a> | 
<a href="proyecto.com/index.php?&seccion=acerca" title="Acerca de">Acerca de</a> | <a href="proyecto.com/index.php?&seccion=contacto" title="Contacto">Contacto</a>
</p>
 
</body>
</html>  

[rashid]

Me gustaria verlo en el web, ya implementado, entóces podré evaluar mejor los factores.

;)

[popobcn]

¿Qué hemos agregado?

1. Un control sencillo para identificar la variable de traspaso y agregar las METAS personalizadas para cada una de las secciones:

Código PHP:

  <?php
if($_GET['seccion']!=""){
    switch $_GET['seccion']{
        case "portafolio":
        ?>
        <title>Portafolio - Proyecto</title>
        <meta name="description" content="Descripcion, bla, bla, bla" />
        <meta name="keywords" content="bla, bla, bla..." />
        <?
        break;
        
        case "acerca":
        ?>
        <title>Acerca de - Proyecto</title>
        <meta name="description" content="Descripcion, bla, bla, bla" />
        <meta name="keywords" content="bla, bla, bla..." />
        <?
        break;
        
        case "contacto":
        ?>
        <title>Contacto - Proyecto</title>
        <meta name="description" content="Descripcion, bla, bla, bla" />
        <meta name="keywords" content="bla, bla, bla..." />
        <?
        break;
        
        default:
        ?>
        <title>Proyecto</title>
        <meta name="description" content="Descripcion, bla, bla, bla" />
        <meta name="keywords" content="bla, bla, bla..." />
        <?
        break;
    }    
}
?>   

2. Hemos modificado nuestro menu inicial para que ahora, tenga seleccionado el TAB correspondiente a la sección que haya localizado nuestro usuario via Google o cualquier motor de busqueda.

Para ello, simplemente, controlaremos que TAB esta activo por el contenido de la variable de la siguiente manera:

Código HTML:

<ul id="countrytabs" class="shadetabs">
<li><a href="portada.html" <? if($_GET['seccion']==""){ echo "class='selected'";} ?> rel="countrycontainer">Portada</a></li>
<li><a href="portafolio.html" <? if($_GET['seccion']=="portafolio"){ echo "class='selected'";} ?>  rel="countrycontainer">Portafolio</a></li>
<li><a href="acerca.html" <? if($_GET['seccion']=="acerca"){ echo "class='selected'";} ?>  rel="countrycontainer">Acerca de</a></li>
<li><a href="contacto.html" <? if($_GET['seccion']=="contacto"){ echo "class='selected'";} ?>  rel="countrycontainer">Contacto</a></li>
</ul> 

3. Hemos agregado un menú de navegación que traspasará la variable necesaria para que se pueda cargar el contenido X para que sea seguido por los motores de busqueda:

Código HTML:

<p align="right">
<a href="#" title="Portada">Portada</a> | <a href="proyecto.com/index.php?&seccion=portfolio" title="Portafolio">Portafolio</a> | 
<a href="proyecto.com/index.php?&seccion=acerca" title="Acerca de">Acerca de</a> | <a href="proyecto.com/index.php?&seccion=contacto" title="Contacto">Contacto</a>
</p> 

¿Qué faltaria?

Para terminar de rizar el rizo, tan solo nos quedaría optimizar las URL de salida mediante el archivo HTACCESS, configurando las URL con las variables a algo más agradable para nuestros motores de busqueda preferidos.

¿Qué hemos conseguido?

1. Por un lado, transparencia de cara a una correcta navegación por parte del usuario que llegue via un resultado de busqueda, ya que la carga del contenido se realizará dentro del sistema de navegación por TAB's de nuestro proyecto.

2. Hemos ganado 4 secciones indexables para nuestro proyecto de una única página de carga de contenidos via AJAX, simplemente agregando unas pocas líneas de código.

Espero que os haya servido de ayuda hamijos! :)

Saludos

[popobcn]

Iniciado por rashid

Me gustaria verlo en el web, ya implementado, entóces podré evaluar mejor los factores.

;)

Lo tengo puesto en marcha en uno de mis proyectitos personales xD; implantado en el sistema de navegación por tabs (Como en el ejemplo aquí expuesto) de las opciones de los perfiles personales de mis usuarios.

Para muestras, un botón:

http://www.perfiles-msn.com/perfil/saryuki
http://www.perfiles-msn.com/perfil/saryuki/huellas/
http://www.perfiles-msn.com/perfil/saryuki/fotos/

Saludos :)

[rashid]

mmmm... la optimizacion de tu sitio web no es una optimizacion típica de sitio web... es un caso muuyy interesante.

Por cierto el link de fotos me envia a una fórmula de registro.

Observaciones:

Tienes muchos Javascript en la misma página, halalos solo como referencia (include) asi la página será mas limpia, lo mismo para cualquier css, y lo mismo para la fórmula que carga todos los países, solo carga el país en cuestión.

En el html limpio de :
http://www.perfiles-msn.com/perfil/saryuki

no puedo ver el texto, el contenido importante a saber:

Mujer de 24 años, - España Soy saryuki, una chica de 24 años de edad. Vivo en Madrid, me gusta escuchar De todo! y salir por Bares de Copas.. Estoy aquí para encontrar Amistad

Esos contenidos estaran llenos de long tile y por tanto es muy valioso, NO olvides incluirlo.

Asi a ojo de pájaro esas son mis observaciones.

Pero la optimizacion, SEO de tu sitio requiere mucho planeamiento previo... un reto interesante.

;)

[popobcn]

jajajajajjaja rashid! :) Atipica total :p Con esa página he experimentado más que otra cosa...

Por la parte del texto "importante" a indexar, la verdad es que es por VAGANCIA. Dentro del selector de seccion / contenido a cargar via AJAX en el apartado de los perfiles de usuario de ese proyecto en concreto, podría haber montado sin esfuerzos lo que comentas, ya que es una información consultada en la cabecera.

La optimización realizada en ese apartado, fue realmente para conseguir más enlaces indexados por Google. Y de hecho, cuadriplique el nº de enlaces tras realizar este cambio. El tema de las metas, titulos, descripciones o contenido a leer por parte de los motores de busqueda para este "experimento" como que no me llamo especialmente la atención... por cuestiones de privacidad inicialmente (de cara a los usuarios no registrados) y por vagancia en una segunda instancia, ya que vi que se podría incorporar sin ningún tipo de problema y no suponia ningun reto en ese momento xD

Sobre CSS, Scripts y demás... hay mucho trabajo a nivel de optimización y muy pocas ganas de liarme xD ;) :P a duras penas si hago algún cambio en ese proyecto desde hace algun tiempo.

Saludos ;)

[rashid]

Sobre los enlaces... Olvide mencionar que debes cuidar que toda la navegación (enlaces) sean transparentes a los buscadores y veo que la mayoría son en javascript, eso afectara la indexacion.

Otro gran problema para la indexacion es que cada link que das te manda a una formula de registro... igual es a los robots... solo que ellos no las llenaran, deberias planificar bien y dejar que algunos contenidos ricos en términos claves sean accesados libremente por personas y robots.


;)

[popobcn]

Iniciado por rashid

Sobre los enlaces... Olvide mencionar que debes cuidar que toda la navegación (enlaces) sean transparentes a los buscadores y veo que la mayoría son en javascript, eso afectara la indexacion.

Otro gran problema para la indexacion es que cada link que das te manda a una formula de registro... igual es a los robots... solo que ellos no las llenaran, deberias planificar bien y dejar que algunos contenidos ricos en términos claves sean accesados libremente por personas y robots.
;)

Hay secciones que llevan directamente al registro y otras que no... Actualmente he realizado un cambio, con el fin de realizar una estadistica de registro de usuarios y calcular porcentaje de usuarios que completan su perfil siguiendo todos los pasos descritos en el registro... Vamos, un chorrada que para otro proyecto que tengo en el candelero me puede servir mucho ;) :)

El javascript al que te refieres, es el correpondiente al de las cargas de los contenidos via AJAX. Han de ser poco transparentes en el sentido de la optimización, de hecho planifique mentalmente realizar un cambio sobre la estructura de los menus laterales, con el fin de tubieran la salida externa (La planteada en el ejemplo de este post de cara a motores de busqueda) pero al final, opte por dejarlo tal cual esta, por no perder usabilidad .oO(Aunque pierda miles de impresiones... xD Cosas del directo chicos :P )

Pero este post no esta destinado a realizar un analisis SEO de este proyectito mio... xD Sino para ver como ganar algo de visibilidad de cara a los motores de busqueda con un proyecto basado en la carga de contenidos via AJAX xD ;)

Saludos

[lagardel]

Iniciado por popobcn

Lo tengo puesto en marcha en uno de mis proyectitos personales xD; implantado en el sistema de navegación por tabs (Como en el ejemplo aquí expuesto) de las opciones de los perfiles personales de mis usuarios.

Para muestras, un botón:

http://www.perfiles-msn.com/perfil/saryuki
http://www.perfiles-msn.com/perfil/saryuki/huellas/
http://www.perfiles-msn.com/perfil/saryuki/fotos/

Saludos :)

Me gusta mucho la idea, aunque en tu caso genera mucho contenido duplicado esta claro que es solo un ejemplo.

voy a ver si puedo pasarlo a jquery que me gusta mucho mas y lo probare en un dominio nuevo a ver que tal.

[popobcn]

Iniciado por lagardel

Me gusta mucho la idea, aunque en tu caso genera mucho contenido duplicado esta claro que es solo un ejemplo.

La verdad es que... no genera contenido duplicado, gracias a la falta de visibilidad del contenido cargado via AJAX.

La navegación una vez se ha llegado por un resultado de busqueda, de cara al usuario es completamente transparente mediante el sistema de tabs, para los motores de busqueda el resultado de busqueda es único por el titulo y el resto de metas asignadas de forma individual a cada una de las secciones :)

Saludos

[pulidomann]

Iniciado por lagardel

En tu caso necesitariamos tambien un archivo htaccess que le indique al servidor que si vienen a esa pagina desde el buscador se cargue la pagina principal con los datos que contiene ese archivo.

No?

El .htaccess (de lo poco que he trabajado con él) es delicado... por lo general es bueno manipularlo con la progarmación misma del sitio.

Como sea... en el caso del contenido ajax a lo que me refiero es algo más sencillo:

1. Tu sitio contiene links (a href) en los tabs, los cuales apuntan a páginas específicas
2. Evitas el comportamiento por default de esos links, y lo remplazas por un comportamiento personalizado, para cargar contenidos via XMLHttpRequest (ajax)

3. Si (como dice @popobcn) es muy complicado crear tantas páginas extras, entonces puedes usar el .htaccess con el mod-rewrite de la siguiente manera:

Por ejemplo, en spc-asesoria.com/calendario
los cursos son una pagina estatica en php, en el que varia el contenido depende el curso que se desee ver. Para evitar el cursos.php?c=4, escribí esta expresión regular en el .htaccess:

Código:

Options +FollowSymLinks
RewriteEngine on
RewriteRule cursos/(.*)/ cursos.php?c=$1
RewriteRule cursos/(.*) cursos.php?c=$1
RewriteRule facilitadores/(.*)/ facilitadores.php?id=$1

También es para la página de los facilitadores.

[popobcn]

Iniciado por pulidomann

El .htaccess (de lo poco que he trabajado con él) es delicado... por lo general es bueno manipularlo con la progarmación misma del sitio.

Como sea... en el caso del contenido ajax a lo que me refiero es algo más sencillo:

1. Tu sitio contiene links (a href) en los tabs, los cuales apuntan a páginas específicas
2. Evitas el comportamiento por default de esos links, y lo remplazas por un comportamiento personalizado, para cargar contenidos via XMLHttpRequest (ajax)

3. Si (como dice @popobcn) es muy complicado crear tantas páginas extras, entonces puedes usar el .htaccess con el mod-rewrite de la siguiente manera:

Por ejemplo, en spc-asesoria.com/calendario
los cursos son una pagina estatica en php, en el que varia el contenido depende el curso que se desee ver. Para evitar el cursos.php?c=4, escribí esta expresión regular en el .htaccess:

Código:

Options +FollowSymLinks
RewriteEngine on
RewriteRule cursos/(.*)/ cursos.php?c=$1
RewriteRule cursos/(.*) cursos.php?c=$1
RewriteRule facilitadores/(.*)/ facilitadores.php?id=$1

:

También es para la página de los facilitadores.

Mmmmmmmmmmmmmmm me parece .oO(Ojo! Que me parece!! xD) que con los cambios que comentas en el .HTACCESS duplicarias contenidos.

O sea, quizás a nivel de contenido NO, dado que contamos con la falta de transparencia / visibilidad de los contenidos cargados via AJAX, perooooo si que podemos sufrir el duplicado a nivel de las metas:

1. Titulo
2. Descripcion

Pero claro... son las 09:08 de la mañana y aun me faltan dos cafés en el cuerpo para estar del todo seguro xD ;)

Saludos

[pulidomann]

Jajaj.. sí... acá ya son las 723AM.. tengo que tomar una clase en un rato más ya he tomado 1 taza de café.... y contando.

Los meta son independientemente del .htaccess . el .htaccess lo único que hace es re-escribir el URL en el navegador para que se "vea bonito" .. si quieres métete a la página y chécalo.

No he trabajado mucho con el .htaccess, pero ese tip lo saqué de algún lugar en la red, y ha funcionado bien.

Los meta sí cambian depende de cada página. Lo hice de la manera que nos planteas en este foro precísamente. El contenido de los meta tags, el título de la página, y el contenido (también los títulos del URL) los estoy sacando de la base de datos en MySQL.

Saludos!

[popobcn]

Iniciado por pulidomann

Jajaj.. sí... acá ya son las 723AM.. tengo que tomar una clase en un rato más ya he tomado 1 taza de café.... y contando.

Los meta son independientemente del .htaccess . el .htaccess lo único que hace es re-escribir el URL en el navegador para que se "vea bonito" .. si quieres métete a la página y chécalo.

No he trabajado mucho con el .htaccess, pero ese tip lo saqué de algún lugar en la red, y ha funcionado bien.

Los meta sí cambian depende de cada página. Lo hice de la manera que nos planteas en este foro precísamente. El contenido de los meta tags, el título de la página, y el contenido (también los títulos del URL) los estoy sacando de la base de datos en MySQL.

Saludos!

Lo dicho... me faltaba otro café... xD

[hamming00]

Hola popobcn.
Ya se que este tema es un poco antiguo pero me interesa bastante ya que no encuentro algo parecido para hacer que mis tab sean indexadas por los buscadores.

He puesto en práctica tu ejemplo y no me funciona. Se queda la página en blanco. Lo he revisado pero no encuentro el error.
¿Has probado si funciona tu ejemplo o simplemente es teórico?

Tambíen te pediría si puedes poner los ejemplos del archivo .htaccess

Muchas gracias.
--------------------------------------------------------------------------------------


Ya encontré el error. Se trata de un error de sintaxis.
Al comienzo del php, al tomar la variable del GET, éste tiene que ir entre paréntesis, al menos para php 5 (en anteriores versiones no lo se).

Código:

switch ($_GET['seccion']){
// y no:
switch $_GET['seccion']{