Optimizando On-Page

Totemizado · 4 Nov 2013

Hola!

Quería que me ayudaráis con la organización de mi sitio de cara a hacerla lo más legible posible ante Google. Adjunto una imagen para que se ve fácilmente.

Como se ve tengo 5 secciones (una de ellas es "Contacto" que es una simple página con el formulario de contacto).

Y en las otras cuatro hay un poco de todo. Por ejemplo, en la sección "Artículos", cuando pinchas te lleva a una página estática con una descripción de la sección, que al final tiene los links a las subsecciones que se ven en la imagen. En cuanto a la categorización, "Artículos" en sí mismo, no tiene una categoría donde dentro tiene las diferentes subcategorías, sino que directamente, las diferentes subsecciones son categorías. No sé si me explico. "PPP" es una categoría, no una subcategoría de "Artículos", porque la categoría "Artículos", no existe.

Ocurre lo contrario en "Fotos" y "Vídeos", donde, a parte de páginas estáticas con sus links a las subsecciones, son categorías, y dentro de esa categoría, se encuentran subcategorías que responden a sus respectivas subsecciones.

¿Qué es mejor?

En cuanto a Razas, existe una categoría llamada "Razas de Perros", y una página estática, también. Cuando pinchas en "Razas", en el menú, te lleva a la página estática, y ésta tiene un plugin que, mediante tags, permite organizar los diferentes posts según cuatro criterios diferentes. Así que no hay subsecciones, sino que desde la página, te lleva a una organización por tags (lo que he leído que no es recomendable, pero es la mejor -única, en realidad- forma que he encontrado para hacer lo que quería).

¿Qué recomendaciones podéis darme?

lobogris · 4 Nov 2013

Te voy a poner un pequeño ejemplo a seguir, si lo optimizas más Google amará tu página:

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
//demás metaetiquetas...
</head>

<body itemscope itemtype="http://schema.org/WebPage">
<header itemscope itemtype="http://schema.org/WPHeader">
<nav class="navegacion" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li itemprop="url"><a href="">Principal</a></li>
<li itemprop="url"><a href="">Perros</a></li>
<!-- demás li's de navegación -->
</ul>
</nav>
</header>
 
<main itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
 
<article itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">

<header>
<h1 itemprop="headline"><a href="">Blog Post</a></h1>
<p><time itemprop="datePublished" datetime="aquí iría la fecha en formato gregoriano">aquí como la quieras</time> por
<span itemprop="author" itemscope itemtype="http://schema.org/Person">Totemizado</span>
</p>
</header>

<div itemprop="text">
<p>Aquí el contenido de la entrada</p>
</div>

<footer>
<!-- lo que vaya en el footer por ejemplo tags o lo que sea-->
</footer>

</article>
 <!-- aquí comentarios o lo que siga... -->
</main>
 
<aside itemscope itemtype="http://schema.org/WPSideBar">
<!-- contenido del sidebar -->
</aside>
 
<footer itemscope itemtype="http://schema.org/WPFooter">
<!-- contenido del footer -->
</footer>
 
</body>
</html>

El ejemplo es de una entrada cualquiera optimizada según los parámetros de schema.org, pero se puede mejorar muchísimo más y adaptar al contenido de tu blog para indicar sobre que contenido trata exactamente, además schema no sólo vale para Google, sino para Yahoo, Bing y no sé si alguno más.

Por ejemplo si tienes una web sobre películas y los posts describen o venden una película, por mucho que pongas las palabras vender, películas o lo que sea Google no va a entender exactamente que contenido tienes aunque posicione más tu web por esas keywords, pero si defines en las etiquetas HTML lo que es según los parámetros de schema Full Hierarchy - schema.org Google entenderá mucho mejor sobre que trata tu web y te posicionará mejor

Totemizado · 4 Nov 2013

Yo no sé cambiar eso. De todas formas, en este hilo solo pregunto cómo mejorar la estructura y organización del sitio.

Igualmente, gracias, supongo que me será necesario en el futuro.

lobogris · 4 Nov 2013

Totemizado dijo:
Yo no sé cambiar eso. De todas formas, en este hilo solo pregunto cómo mejorar la estructura y organización del sitio.

Igualmente, gracias, supongo que me será necesario en el futuro.

Sí es lo que pedías si la idea era mejorar la estructura ante Google, otra cosa es que no tengas claro como una araña procesa la estructura de una web, esto es mejorar la estructura del sitio, a una araña le da igual tu diseño, simplemente porque no lo lee ni lee los scripts, sólo lee el árbol de etiquetas y esa es una buena organización.

Yo considero 'básico', en HTML5, estructurar el sitio con las etiquetas header, main y footer, lo que es equivalente a cabecera en la cual situar logo, navegación etc, contenido principal en el cual situar pues esto mismo y tal vez un sidebar dentro de las etiquetas aside y a continuación el footer con enlaces como privacidad y esas cosas, y otro o el único aside aquí dentro. Con indicar en las etiquetas header, main y footer lo que es cada una mediante itemtype de Schema le estarás dando una visión más clara a la araña, y si especificas que tipo de contenido engloba tu web pues mejor que mejor, por que ya 'sabrá' de que trata.

No estoy hablando como un experto, ni de lejos, ni si quiera tengo idea de hacer SEO, pero sobre Schema he leído mucho y te puedo decir que estoy en lo correcto, que seguir los parámetros de los microdata es la única manera de hacer tu web amigable y más entendible a una araña.

Además algunas cosas más, como añadir la url canonica en el header, pero eso WP ya lo trae por defecto, una de las cosas que lo hace una buena plataforma para posicionar. Claro que también depende de la plantilla prácticamente al 100%.

Y como nota lo primero que cambiaría de tu plantilla son las cabeceras de cada entrada, las tienes en un h2, pon h1

Totemizado · 4 Nov 2013

No es lo mismo estructura de las páginas, es decir, como está codificado, que es a lo que tú te refieres. Y otra, que es a lo que yo me refiero, es a la estructura del sitio. La forma de diseñar el árbol de la web para que la araña tenga acceso a todas las páginas que la forman. ¿O es lo mismo? Tenía entendido que no. Yo pregunto por la organización del sitio, no por la correcta codificación de las páginas, que también tengo que trabajarlo, pero una cosa después de otra.

Sobre lo de los h1 y h2, tenía entendido que el h1 iba en el title de la página, que suele ser la cabecera (entendí que debía ser lo mismo que la etiqueta <title> y que, incluso, en muchos casos estaba junto, sin necesidad de señalar el h1 explícitamente). ¿No es así? Esta web, por ejemplo, lo tiene igual que yo Los encabezamientos H1, H2, H3, H4, H5 y H6 en el SEO | Consultor SEO freelance | Experto posicionamiento web y más de una que vi por ahí (ojo, no trato de desmentir lo que dices, ni en esto ni en lo anterior, lo pregunto porque tenía entendido que era como lo planteo).

hvazquez07 · 5 Nov 2013

Hola amigo!

Además de Schema.org (que es mucho, muy importante ahora!), debes saber algunos pasos sencillos para mejorar la optimización On Site.

El primero: la estructura de tu sitio. En mi post sobre silos hablo de cómo se debe linkear un sitio web para aprovechar al máximo los enlaces.

El segundo: la optimización on site (y semántica, como dice nuestro amigo @lobogris). Que casualmente, hace poco, también he dejado un post en mi blog.

Y otra recomendación, puramente estética más que funcional: por favor cámbiale la plantilla a tu web! Busca algo sencillo, barato pero que te posicione como autoridad en tu nicho.

Totemizado · 5 Nov 2013

¡Qué perra tenéis todos con el theme del sitio!

lobogris · 5 Nov 2013

Totemizado dijo:
No es lo mismo estructura de las páginas, es decir, como está codificado, que es a lo que tú te refieres. Y otra, que es a lo que yo me refiero, es a la estructura del sitio. La forma de diseñar el árbol de la web para que la araña tenga acceso a todas las páginas que la forman. ¿O es lo mismo? Tenía entendido que no. Yo pregunto por la organización del sitio, no por la correcta codificación de las páginas, que también tengo que trabajarlo, pero una cosa después de otra.

Sobre lo de los h1 y h2, tenía entendido que el h1 iba en el title de la página, que suele ser la cabecera (entendí que debía ser lo mismo que la etiqueta <title> y que, incluso, en muchos casos estaba junto, sin necesidad de señalar el h1 explícitamente). ¿No es así? Esta web, por ejemplo, lo tiene igual que yo Los encabezamientos H1, H2, H3, H4, H5 y H6 en el SEO | Consultor SEO freelance | Experto posicionamiento web y más de una que vi por ahí (ojo, no trato de desmentir lo que dices, ni en esto ni en lo anterior, lo pregunto porque tenía entendido que era como lo planteo).

Vamos a ver has dicho lo más legible ante Google lo primero, yo te he respondido para eso, te repito que a Google prácticamente le da igual si tu enlace está a la derecha a la izquierda, el prefiere que indiques si debe seguir ese enlace y que contiene ese enlace.

No pongas h1 como título de la web, el h1 debería contener un título que sea la descripción corta importante de lo que se está viendo, como bien dices como el title, por ejemplo un post sobre la agresividad del Dogo Argentino.

Código:

<h1>La agresividad del Dogo Argentino</h1>

no

Código:

<h1>TuPerro.org</h1>
<h2>La agresividad del Dogo Argentino</h2>

Si bien, no entiendo por qué y tal vez en esto de los h1 esté confundido, pero no lo creo porque por lo que he leído he sacado esta conclusión, y por ello lo hago así, el theme TwentyThirteen de Wordpress contiene un h1 por entrada, es decir que en la página donde listas los posts cada uno lleva un h1, no entiendo de que manera se trata eso y por que, pero se suponía que WP es tratado por profesionales, lo cual me hace creer que no es incorrecto.

Totemizado · 5 Nov 2013

lobogris dijo:
Vamos a ver has dicho lo más legible ante Google lo primero, yo te he respondido para eso, te repito que a Google prácticamente le da igual si tu enlace está a la derecha a la izquierda, el prefiere que indiques si debe seguir ese enlace y que contiene ese enlace.

Quizá la palabra "legible" no fue la más apropiada, quizá "rastreable" o algo así fuese más ajustada. Trataba de referirme a los sistemas tipo SILO y demás, que están orientados a que los robots encuentren todas las páginas con facilidad.

En cuanto a los h1, creo recordar que ya lo intenté (tenía que poner las etiquetas en el title), y lo que sucedía es que en "últimas entradas", también cambiaba, como tu dices, lo cual no es nada bueno, tengo entendido, porque solo debe haber un h1. En cualquier caso, probaré de nuevo, a ver si era cosa del Theme.

lobogris · 5 Nov 2013

Totemizado dijo:
Quizá la palabra "legible" no fue la más apropiada, quizá "rastreable" o algo así fuese más ajustada. Trataba de referirme a los sistemas tipo SILO y demás, que están orientados a que los robots encuentren todas las páginas con facilidad.

En cuanto a los h1, creo recordar que ya lo intenté (tenía que poner las etiquetas en el title), y lo que sucedía es que en "últimas entradas", también cambiaba, como tu dices, lo cual no es nada bueno, tengo entendido, porque solo debe haber un h1. En cualquier caso, probaré de nuevo, a ver si era cosa del Theme.

De eso ya no te puedo aconsejar, ya es estructuración externa, supongo que para eso está el sitemap... auqnue se pueda mejorar con estructuración SILO.

No entiendo lo que me dices, lo que debes hacer es ir a tu archivos single y page y donde esté el loop verás un h2 o llamará a un template donde estará el h2, simplemente cámbialo por un h1

Totemizado · 5 Nov 2013

Sí, se cambia. El asunto es que, no sé por qué, cambia la fuente. Supongo que habrá que tocarle algo en el CSS.

lobogris · 5 Nov 2013

Totemizado dijo:
Sí, se cambia. El asunto es que, no sé por qué, cambia la fuente. Supongo que habrá que tocarle algo en el CSS.

Por que el h1 suele estar definido con mayor fuente, busca en el css las cabeceras y cámbiales el tamaño

Totemizado · 5 Nov 2013

Definitivamente, tengo que aprender programación.

lobogris · 5 Nov 2013

Totemizado dijo:
Definitivamente, tengo que aprender programación.

jaja CSS no es un lenguaje de programación es un 'complemento' de HTML, ni HTML tampoco lo es, HTML5 se podría considerar en parte como ello porque incluye Javascript. Es algo que todavía no me ha quedado del todo claro, si tratarlos en el conjunto o HTML/Javascript/CSS, es decir HTML5 como lenguaje de programación o HTML como lenguaje de marcado, CSS como complemento de HTML lenguaje de estilo y Javascript como lenguaje de programación, dentro del concepto de HTML5 me refiero.

Bueno que me enrrollo, te iba a decir dos cosas:

https://developer.mozilla.org/es/ y W3Schools Online Web Tutorials en la primera mejor, pero la segunda es buena porque muestra ejemplos de todo

Totemizado · 7 Nov 2013

Lo logré

Viendo un videotutorial de CSS comentaban una extensión para Firefox llamada "Firebug", que te permite ver el código de aquello que señalas en una página. Por otro lado, en el foro de soporte del Theme, comentaban que para cambiar atributos de los headers había que añadirlo directamente (no había nada que "cambiar").

Al final solo había que añadir al final:

Código:

#main h1 {
    color: #333333;
    font-weight: normal;
    font-family: "Marck Script",Arial,Helvetica,sans-serif !important;

Optimizando On-Page

Comparte esta página