Como implementar Schema.org en tus páginas de Photoshelter

Para poder hacer esto debes:

• Tener una cuenta Standard o Pro
• Personalizar tu plantilla
• Tener nociones básicas de HTML

Ya hace algún tiempo que implementé Schema.org = "Datos estructurados" en mis páginas de Photoshelter y funciona.

Antes que nada, deciros que los usuarios que se hayan pasado a Beam no podrán implementarlo de momento, ya que la posibilidad de editar código, solo es posible en la versión clásica de Photoshelter.

Para implementar Schema.org, es necesario insertar o complementar algunas metaetiquetas del código HTML de nuestra página.

¿Qué es Schema.org?

Schema.org es un estandard para estructurar los datos dentro de la web, de manera que sean reconocidos por cualquier motor de búsqueda.

Schema.org es fruto de un acuerdo entre los más importantes buscadores del mundo, Google, Bing y Yahoo, lo cual indica la importancia de cumplir esas normas de cara a la indexación de contenidos en Internet.

Schema ayuda a hacer realidad la anhelada web semántica que Tim Berners Lee imagino en los inicios de Internet.

Consulta más információn sobre Schema.org

¿Por que debería implementar Schema.org en mi web de fotografía?

Schema.org crea normativas de estructura de datos para cualquier tipo de persona, cosa, evento, etc. y por supuesto también para fotos.

Una vez estructurados los datos dentro de nuestras páginas, Google, Bing, Yahoo o cualquier otro metabuscador, indexador, agregador o comparador de contenidos, indexa esta información y la muestra de muy diferentes formas en función del contenido estructurado.

Google tiene su propio buscador de imágenes y no me cabe la menor duda de que hace uso de los datos estructurados para indexar las fotos. En mi caso, desde que implementé Schema.org en mis páginas, detecto un mejor posicionamiento de mis fotos en el buscador de Google.

Los diferentes tipos de datos que puedes estructurar con Schema.org
Estructura de datos para una foto con Schema.org

La prueba del algodón

Antes que nada, vamos a pasar la prueba del algodón para nuestra página de imagen y comprobemos que en realidad, Google no detecta ningún datos estructurado en nuestra página.

Entremos en las Herramientas para Webmaster de Google, en la página dedicada a testar los datos estructurados recogidos dentro de cualquier página.

Una vez dentro, en la casilla URL, completa la celda URL con la url de una de tus páginas de foto.

Google te presentará toda la información relativa a datos estructurados dentro de tu página.

Si no detecta una estructura parecida a esta e identificada como "Schema.org/ImageObject", entonces deberías seguir leyendo.

Ver este test de Schema.org dentro de Google en vivo.

Donde implementar el código necesario para estructurar los datos

Hay varias páginas en las que es interesante implemantar Schema.org, pero sin duda la más interesante es "Gallery Image Display" que es donde se representan nuestras fotos de forma individual y por tanto la página más indexada por los buscadores.

En mi caso yo di el paso de personalizar mi plantilla hace tiempo y por tanto ya soy responsable de lo que le pase a mi código, pero si das este paso por primera vez, sabes que siempre es posible retroceder a tu plantilla original o a otra.

Pasos

1.- Entra en Photoshelter en modo administrador, Website/Archive Page Settings.

2.- En la tabla inferior entra en Gallery Image Display opción edit

Ya os digo que yo tengo bastante modificado el código de mi página, así que intentaré guiaros de la mejor manera posible.

3.- Identificar el código que genera el paso a foto anterior o posterior. Algo así como:

<table class="f_right">
<tr>
<td width="100" align=center>[[page_previous text="Prev. photo<br>Foto anterior"]]</td>
<td class="pages" width="40" align="center">[[image_index]]/[[num_images]]</td>
<td width="100" align=center>[[page_next text="Next photo<br>Foto siguiente"]]</td>
</tr>
</table>

Tras este código, después de "</table>" intertar:

<div itemscope itemtype="http://Schema.org/ImageObject">

Recordar, por si se me olvida, que la metaetiqueta "div", como cualquier otra en HTML, ha de cerrarse en algún momento.

Con "itemscope", acabamos de decirle al buscador que escanea nuestra página que vamos a crear una estructura de datos de tipo "ImageObject" según la estructura de Schema.org.

4.- La primera propiedad que le proporciono es el nombre de la foto:

<div itemprop="name" class="carrot" style="background-image: none; font-weight: normal;">[[image_filename]]</div>
Cualquier propiedad que proporcionemos será anunciado con la variable "itemprop" y el correspondiente valor, en este caso "name"

5.- Las propiedades "image" y "ThumbnailUrl" las tuve que obtener de mi cosecha con el siguiente código:

<span itemprop="image" content="http://cdn.c.photoshelter.com/img-get/[[image_id]]/s/750/[[image_filename]]" />
<span itemprop="thumbnailUrl" content="http://cdn.c.photoshelter.com/img-get/[[image_id]]/s/150/[[image_filename]]" />


La metaetiqueta "span" también se cierra pero en este caso la he cerrado dentro de los corchetes finalizando la metaetiqueta con "/>"

6.- Ahora el turno de "description" y "dateCreated"

<span itemprop="description">[[gallery_image_caption]]</span>
<span itemprop="dateCreated">[[image_date_created]]</span>

7.- "keywords"

        <td itemprop="keywords">
              [[image_keywords]]
        </td>


8.- Por último el más importante "author" pero con una particularidad. El autor es una persona y por tanto tiene rango propio dentro de Schema.org, concretamente se trata de "schema.org/person", por tanto debemos crear un nuevo "itemscope" dentro de la propiedad "author" del "itemscope" ya creado "schema/ImageObject". Parece un poco lioso pero no es más que una forma de anidar datos estructurados.

<div itemprop="author" itemscope itemtype="http://Schema.org/Person">
Por / By <a itemprop="name" href="http://tipaginaweb.dom" target="_blank">TuNombredeAutor</a>
</div>
</div>
¿Por que cierro dos veces " <div> "? Por que debía cerrar el primero " <div itemscope="" itemtype="http://Schema.org/ImageObject"> " ¿Recordáis?

Guarda los cambios y no olvides hacer la prueba del algodón entrando en las Herramientas para Webmaster de Google, en la página dedicada a testar los datos estructurados recogidos dentro de cualquier página.


Si te ha sido útil este consejo puedes ayudarme beneficiándote tu:

• Ahorra dinero si no eres aún usuario de Photoshelter, dándote de alta en Photoshelter desde este enlace. A ti te supone un 30% de descuento y a mí me puede ayudar de la misma manera que yo he intentado ayudarte a ti. Gracias por usar mi referencia para crear tu cuenta de Photoshelter. 
• Si estás pensando en comprar o regalar material fotográfico o algún libro sobre fotografía, hazlo desde este enlace comprando en una empresa solvente y seria como Amazon.es (nacional, opera en España) y con precios muy competitivos. A ti no te supone ningún sobrecoste y a mi me puede ayudar con una pequeña comisión.

 Propón temas nuevos en los comentarios de este post.