Si fuera el caso de un blog, podríamos agregar toda esta información: {\n \"@context\":\"http://schema.org\",\n \"@type\":\"NewsArticle\",\n \"image\":{\n \"@type\":\"ImageObject\",\n \"width\":822,\n \"height\":462,\n \"url\":\"https://cdn-images-1.medium.com/max/822/1*B1uroAz5L_4GjZQlySW9vg.jpeg\"\n },\n \"datePublished\":\"2017-01-27T03:26:40.390Z\",\n \"dateModified\":\"2018-03-24T20:23:39.826Z\",\n \"headline\":\"Programación que divierte\",\n \"name\":\"Programación que divierte\",\n \"keywords\":[\n \"Programación\",\n \"Web Development\",\n \"Web\",\n \"Desarrollo\"\n ],\n \"author\":{\n \"@type\":\"Person\",\n \"name\":\"Enmanuel Jarquín\",\n \"url\":\"https://medium.com/@TheEnmanuel23\"\n },\n \"creator\":[\n \"Enmanuel Jarquín\"\n ],\n \"publisher\":{\n \"@type\":\"Organization\",\n \"name\":\"FunDev\",\n \"url\":\"https://medium.com/funnydev\",\n \"logo\":{\n \"@type\":\"ImageObject\",\n \"width\":65,\n \"height\":60,\n \"url\":\"https://cdn-images-1.medium.com/max/65/1*hI_i9JiPrQsWUj0wX5vNXQ.jpeg\"\n }\n },\n \"mainEntityOfPage\":\"https://medium.com/funnydev/funnydev-4ba0dccd62a\"\n} Este uso es muy común en sistemas de blogs muy populares como medium.\nUn punto importante a destacar es el uso de los keywords, a como mencioné en mi anterior post el uso de las keywords es relevante, estas puedes ser los tags de nuestro post en el caso de un blog. Más información sobre su uso: \n- Documentación oficial en google - Librerías para cada tecnología Search Gallery, siempre haciendo uso de datos estructurados podemos mejorar la apariencia de como apareceríamos en los resultados de google, por ejemplo: Más información Conclusión El SEO es un tema muy grande para abarcarlo en dos tutoriales, lo que se trato es brindar una lista de los elementos básicos que como desarrolladores debemos manejar sobre el SEO.", "publisher": { "@context": "http://schema.org", "@type": "Organization", "name": "Stacksavings", "url": "https://stacksavings.com", "logo": { "@context": "http://schema.org", "@type": "ImageObject", "url": "https://user-images.githubusercontent.com/34352184/38598664-5363720c-3d2b-11e8-9838-b67ef3f63cf6.png" } } }

Consideraciones del SEO para programadores - Parte 2

En el anterior post Consideraciones del SEO para programadores - Parte 1 , lo que abordamos fueron cambios básicos en nuestro html, la estructura de una url y los keywords. Índice Introducción Introducción En esta ocasión veremos unos cambios un poco mas avanzados en comparación con los anteriores y de mucha relevancia. Para facilitar la indexación de un sitio web el administrador del sitio debe utilizar lo que se conoce como fichero “robots.txt” . Este fichero sirve para dar instrucciones a los robots sobre qué contenidos deben rastrear y cuáles no y cómo deberían hacerlo., Así ahorraremos presupuesto de rastreo, el famoso crawl budget, para que se dedique a otras URLs más importante. Este archivo debe de estar ubicado en la raíz del sitio web. Ejemplo de un archivo robots.txt: User-agent: * Disallow: /folder/ Disallow: /file.html Disallow: /image.png Sitemap: http://www.example.com/sitemap.xml Una página que comúnmente se agrega es la de Términos y Condiciones ya que no nos interesa que sea indexable. Más información sobre robots.txt Agregar la meta etiqueta robots, esta es una etiqueta html que al igual que el archivo robots.txt se puede utilizar para impedir el rastreo e indexación de una página web, pero hay una diferencia, el archivo robots.txt no permite el rastreo y la indexación mientras que el la meta etiqueta robots permite el rastreo pero no almacenarla en sus índices. El archivo robots.txt afecta el PageRank no permitiendo que este fluya. Ejemplo: En caso contrario que deseemos que una página podemos agregar a la meta etiqueta en su contenido las propiedades index y follow: Tanto robots.txt como la meta etiqueta robots son útiles dependiendo del caso de uso, con el archivo robots.txt podemos bloquear directorios enteros, además de decirle a los bots de google en donde está nuestro archivo sitemap.xml. Más información. Agregar un sitemap, el cual es un archivo .xml, en este archivo le decimos a los motores de búsqueda cuales son la listas de urls que puede encontrar y rastrear en nuestro sitio web. Para mejorar el SEO en este archivo debemos de agregar las rutas que nos interesen que sean rastreadas, así como las rutas de imágenes, en algunos casos las rutas de los videos. Más información Agregar la etiqueta canonical, elegir una URL canónica adecuada para cada conjunto de URL similares mejora el SEO de su sitio. Debido a que el motor de búsqueda sabe qué versión es canónica, puede contar todos los enlaces hacia todas las versiones diferentes, como enlaces a esa versión única. Sirve para decirles a los motores cual es la versión original, ejemplo: si tenemos un blog con contenido muy similar podemos decirles a los motores con cual página con la que nos queremos posicionar, a simple vista podemos decir que no tenemos contenido duplicada en varias urls, imaginemos el caso en que tenemos un filtro:

  • http://mysite.com/blog >>> este es el sitio canónico, en el que se mostrarán todos los post de nuestro blog. Al agregar una url para filtrar, quedaría algo así:
  • http://mysite.com/blog?tag=javascript En este punto google nos puede decir que hay 2 url que tienen el mismo contenido, ya que probablemente en ambas urls se muestren los mismos resultados, la etiqueta canónical nos sería muy útil, cabe mencionar que a todas las demás páginas les tenemos que indicar cual es la canónica. Agregar la etiqueta alternate, esta nos es útil para indicarle al robot que la página en la que se encuentra (que por ejemplo, podría estar en francés) tiene una equivalente en español. Debe agregarse la misma etiqueta en la página en español, indicando que tiene una versión alternativa en francés. <link rel=”alternate” hreflang=”es” href=”su dominio en español” /> Open graph , nos es útil para mejorar la apariencia de nuestros sitios al compartirlos en una red social, es un protocolo de comunicación de datos digitales que permite que tus publicaciones se conviertan en objetos enriquecidos dentro del gráfico social. Ejemplo: Las etiquetas mas importantes son:
    Datos estructurados y JSON-LD, este quizás sea uno de los más relevantes que mencionaré, son cada día mas necesarios, ayudan a los buscadores a entender tus contenidos y refinar sus resultados. Cuando los combinas con Schema.org, realzan tus páginas con fragmentos enriquecidos, disparando las posibilidades de recibir clics. consisten en una serie de etiquetas o anotaciones que describen el contenido de tus páginas web. Los usuarios no pueden verlas, pero sí los los robots, que las usan para entender lo que van a indexar. Schema.org es un diccionario universal para el marcado semántico de datos web. Dicho de otro modo, es una colección de palabras que cualquiera puede usar para describir sus contenidos. Hay dos formas de llevarlo a cabo: 1. Intercalando descripciones en el contenido (Microdatos y RDFa)
  1. Añadiendo un bloque de código con todas las descripciones (JSON-LD) Nos vamos a enfocar en la segunda opción ya que es la recomendada por google. Más información sobre como trabajan los microdatos. JSON-LD: Para nosotros los programadores en simplemente un objeto javascript envuelto en una etiqueta script, esta puede ir en el head de la página. Los datos estructurados son un formato estandarizado para proporcionar información sobre una página y clasificar el contenido de la página; por ejemplo, en una página de recetas, cuáles son los ingredientes, el tiempo y la temperatura de cocción, las calorías, etc. Si fuera el caso de un blog, podríamos agregar toda esta información: { "@context":"http://schema.org", "@type":"NewsArticle", "image":{ "@type":"ImageObject", "width":822, "height":462, "url":"https://cdn-images-1.medium.com/max/822/1*B1uroAz5L_4GjZQlySW9vg.jpeg" }, "datePublished":"2017-01-27T03:26:40.390Z", "dateModified":"2018-03-24T20:23:39.826Z", "headline":"Programación que divierte", "name":"Programación que divierte", "keywords": "Programación", "Web Development", "Web", "Desarrollo" , "author":{ "@type":"Person", "name":"Enmanuel Jarquín", "url":"https://medium.com/@TheEnmanuel23" }, "creator": "Enmanuel Jarquín" , "publisher":{ "@type":"Organization", "name":"FunDev", "url":"https://medium.com/funnydev", "logo":{ "@type":"ImageObject", "width":65, "height":60, "url":"https://cdn-images-1.medium.com/max/65/1*hI_i9JiPrQsWUj0wX5vNXQ.jpeg" } }, "mainEntityOfPage":"https://medium.com/funnydev/funnydev-4ba0dccd62a" } Este uso es muy común en sistemas de blogs muy populares como medium. Un punto importante a destacar es el uso de los keywords, a como mencioné en mi anterior post el uso de las keywords es relevante, estas puedes ser los tags de nuestro post en el caso de un blog. Más información sobre su uso:
  • Documentación oficial en google - Librerías para cada tecnología Search Gallery, siempre haciendo uso de datos estructurados podemos mejorar la apariencia de como apareceríamos en los resultados de google, por ejemplo: Más información Conclusión El SEO es un tema muy grande para abarcarlo en dos tutoriales, lo que se trato es brindar una lista de los elementos básicos que como desarrolladores debemos manejar sobre el SEO.