En este tutorial veremos cómo agregar significado a su contenido con gráficos abiertos, tarjetas de Twitter y microdatos. Al hacerlo, su contenido será más atractivo, más relevante y más visible para los usuarios potenciales..
Google, Facebook, Twitter y las otras plataformas que usted y yo usamos para compartir y descubrir contenido aún no pueden leer nuestras mentes. Las máquinas que impulsan la nube dependen de usted y yo, diseñadores y desarrolladores, para enseñarles el significado contenido en nuestro contenido y cómo se relaciona con nuestro público objetivo. Al enseñar estas plataformas sobre la abstracción y el significado, les permitimos mostrar contenido más relevante, provocativo y visible..
¿Qué es la descubribilidad??
La capacidad de descubrimiento es la facilidad con la que una máquina o persona puede encontrar un poco de información relevante en línea..
¿Cuál de estas publicaciones de Facebook recibe más atención??
¿Cuál de estos tweets es el más provocativo??
Y cuál de estos resultados de búsqueda de Google parece más relevante para sus intereses?
Las diferencias anteriores son claras. Si no está implementando el Open Graph Protocol de Facebook, el sistema de tarjetas de Twitter y Microdata para motores de búsqueda, es probable que su contenido sea ignorado en favor del contenido más relevante que se muestra en la competencia. En este artículo, le mostraré la importancia de comprender a su público objetivo al implementar estos sistemas en su marcado semántico.
Margen
En primer lugar, qué es exactamente margen?
“Un lenguaje de marcado de documentos es un sistema moderno para anotar un documento de manera que se distinga sintácticamente del texto. - Wikipedia
En términos más simples, es una forma de marcar, anotar o diseñar un documento con bolígrafos, lápices o computadoras de una manera que se vea simbólicamente diferente al texto que está usando. marcando. El término proviene de correctores que margen manuscritos para ediciones.
Del manual de estilo de Chicago
Las marcas de los revisores son una forma de marcado. ¡Recuerda esto de la clase de inglés de la escuela intermedia (o estabas demasiado ocupado jugando con tu elegante Walkman para prestar atención?)
Aquí hay tres formas en que puede marcar un documento digital para indicar un encabezado:
HTML:
Soy el mejor título
Reducción
## No, yo soy el mejor título
Látex
\ section I'm LaTeX
Ahora que tiene una comprensión más clara de lo que LaTeX ... err, margen Es decir, crearemos un documento HTML5 básico con una sola pieza de contenido. Lo usaremos para ilustrar las diferentes maneras en que podemos crear un significado en ese contenido, lo que lleva a un aumento en su capacidad de descubrimiento..
HTML
Primero, cree el documento HTML inicial en el editor de texto de su elección.
Eso es mucho más simple de lo que solía ser. Ahora vamos a añadir algo de contenido.!
Contenido
Aquí está nuestra única pieza de contenido, una imagen de un gato muy infeliz, en una sección dentro de nuestro cuerpo de documento.
Anímate compañero ...
Título
Ahora que sabemos con qué contenido estamos trabajando, podemos agregar el primer bit de contexto a nuestra pagina Nuestro viejo amigo, </code> etiqueta en el documento <code><head></code>. </p><pre><head> <title> Desolado felino
Pasemos a algo un poco más desafiante (aunque aún simple) con el protocolo Open Graph de Facebook!
Protocolo de gráfico abierto de Facebook
El protocolo Open Graph permite que cualquier página web se convierta en un objeto rico en el gráfico social de Facebook. Permite que cualquier página web tenga una funcionalidad similar a un objeto en Facebook.
El gráfico abierto de Facebook (así como el sistema de tarjetas de Twitter, que veremos a continuación) funciona con metadatos que agrega dentro de sus páginas web . El mismo lugar donde acabamos de poner nuestro </code>. En el caso del protocolo de gráfico abierto de Facebook hay <em>cuatro propiedades</em> que se requieren.</p><h3>Marcado de gráfico abierto requerido</h3><p>Las cuatro propiedades de gráfico abierto requeridas que requiere Facebook son: </p><ol> <li>Título</li> <li>Tipo</li> <li>Imagen</li> <li>URL</li> </ol><h4>Título</h4><p>La primera de ellas es la etiqueta del título, que es el título de su objeto tal como debería aparecer en Facebook.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_5.png"><p>Aquí es cómo se titulará mi ejemplo cuando el documento HTML se comparta en Facebook.</p><pre><meta property="og:title" content="Forlorn Feline" ></pre><p><strong>Nota</strong>: Si crea un título que es diferente al título original, Facebook le dará un error al depurar su página. Facebook permite la diferencia pero no valida el 100%. No sé por qué Facebook frunce el ceño en esto, si tienes alguna idea por qué házmelo saber!</p><h4>Tipo</h4><p>La segunda propiedad que requiere Facebook es el tipo de objeto que mostrará a los usuarios en su plataforma..</p><p>Nuestro contenido no representa música o video. Tampoco es un artículo, libro o perfil. Todo lo que nos queda es el hecho de que nuestro contenido se encuentra dentro de un documento HTML, que cuando se carga en un servidor web, se convierte en un sitio web..</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_6.png"><pre><meta property="og:type" content="website" ></pre><h4>Imagen</h4><p>La tercera propiedad que requiere Facebook es una imagen que representa nuestro objeto. Este es bastante simple!</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_7.png"><pre><meta property="og:image" content="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" ></pre><h4>URL</h4><p>La cuarta y última propiedad que requiere Facebook es la URL que los usuarios experimentarán cuando interactúen con el objeto..</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_8.png"><p>Al igual que la propiedad de la imagen, esta es bastante sencilla..</p><pre><meta property="og:url" content="http://ryanallen.com/forlorn-feline.html" > </pre><p>Eso lo hace por todo lo que se requiere. Es hora de ser más abstracto con el <em>sentido</em> estamos inyectando en nuestro contenido, y para eso necesitamos identificar a nuestro público objetivo.</p><h3>Público objetivo</h3><p>El objetivo de este artículo no es enseñarle cómo identificar a su público objetivo. Sin embargo, quiero impresionarte sobre la importancia de saber quién es. Cuando está construyendo contexto en su contenido, necesita saber quién quiere descubrir su contenido y qué deben aprender sobre ese contenido..</p><p>Para el contenido de este artículo, la imagen del gato de aspecto infeliz, el público objetivo es un diseñador web que busca aprender más sobre la capacidad de descubrimiento (usted). Veamos qué aspecto tiene a continuación en el marcado opcional que entiende Facebook..</p><h4>Resumen opcional marcado</h4><p>Podemos agregar un marcado adicional como una descripción que, aunque no es obligatorio, lo hace mucho más interesante para cualquiera que se encuentre con nuestro contenido..</p><p>Entonces, ¿cuál debería ser nuestra descripción? Debe ser relativo al público objetivo..</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_9.png"><pre><meta property="og:description" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness." ></pre><p>¡Genial! ¿Recuerdas cómo te dije que Twitter funciona de manera similar al protocolo Open Graph de Facebook? Echemos un vistazo a continuación.!</p><h2>Gorjeo</h2><p>Twitter requiere diferentes propiedades dependiendo del tipo de tarjeta que estés usando. Para este ejemplo, usaremos la Tarjeta de resumen predeterminada que requiere estas cuatro propiedades:</p><ol> <li>Tipo de tarjeta</li> <li>Atribución</li> <li>Título</li> <li>Descripción</li> </ol><p>La mayoría de estas propiedades no requieren que realicemos ningún trabajo adicional. Porqué es eso?</p><blockquote>“Cuando el procesador de la tarjeta de Twitter busca etiquetas en su página, primero verifica la propiedad de Twitter y, si no está presente, vuelve a la propiedad de Open Graph admitida. Esto permite que ambos se definan en la página de forma independiente y minimiza la cantidad de marcado duplicado requerido para describir su contenido y experiencia. - Twitter </blockquote><h3>Minimizar el marcado duplicado</h3><p>¡Eso es genial! Las etiquetas que no necesitamos duplicar (aunque usted podría si tuviera una razón para hacerlo) son: </p><ol> <li><code>og: titulo</code></li> <li><code>og: descripción</code></li> <li><code>og: imagen</code></li> </ol><p>Tres abajo, dos para ir!</p><h3>Tipo de tarjeta</h3><p>Primero digamos a Twitter el tipo de contenido que estamos compartiendo. Estableceremos esta tarjeta en la Tarjeta de resumen predeterminada cuando el documento HTML se comparta en Twitter.</p><pre><meta name="twitter:card" content="summary" ></pre><p>Eso fue simple, ¿qué sigue? Espero que sea algo genial!</p><h3>Atribución</h3><p>Twitter requiere que una cuenta se atribuya a una cuenta de Twitter que pertenezca al creador del contenido y / o al propietario del contenido. Si el contenido es propiedad de una página de la compañía o de un departamento de la compañía (o existe en el sitio de la compañía pero no es propiedad de la compañía), puede usar una atribución de estilo del sitio..</p><p>Aquí es cómo se verá si está alojado en mi sitio personal:</p><pre><meta name="twitter:creator" content="@ryanallen_com" ></pre><p>Aquí es cómo se vería si Tuts + Web Design alojara el HTML:</p><pre><meta name="twitter:creator" content="@ryanallen_com" > <meta name="twitter:site" content="@wdtuts" ></pre><p>Twitter deberá autenticar y poner en una lista blanca el dominio para cada tipo de tarjeta de Twitter. Esto es simple y automatizado, aunque no sé lo que implica si usted está en la lista negra. Si alguien tiene experiencia con esto, disfrutaría aprendiendo más..</p><p>Eso es todo para Twitter! Lo bueno es que primero hicimos Open Graph, Twitter ahorra mucho tiempo al trabajar con otras plataformas de la mejor manera posible. Gracias Twitter!</p><p>Es hora de volver a visitar los motores de búsqueda para encontrar nuevas formas contextuales y emocionantes de optimizar su contenido..</p><h2>Microdatos y optimización de motores de búsqueda</h2><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_10.png"><p>Primero, una palabra rápida de Microsoft:</p><blockquote>“El 2 de junio [2011], nosotros [Microsoft] anunciamos una colaboración entre Bing, Google y Yahoo para crear y admitir un conjunto estándar de esquemas para el marcado de datos estructurados en páginas web. Aunque nuestras empresas compiten de muchas maneras, nos resultó evidente que la colaboración en este espacio sería buena para cada motor de búsqueda individualmente y para la industria en general. - Michael O'Connor </blockquote><p>Los microdatos son diferentes del otro marcado que ya hemos estructurado en que no se encuentra en el encabezado del documento..</p><p>Usaremos microdatos para infundir contexto en nuestro contenido en el cuerpo de nuestro documento HTML. Los motores de búsqueda utilizarán nuestros datos para mejorar el descubrimiento de nuestro contenido para sus usuarios.</p><p>Las máquinas creen lo que les decimos. Por ahora al menos… </p><h3>Marcado de Microdatos Requerido </h3><p>Las siguientes etiquetas son necesarias para cada elemento en el que desea crear significado. </p><ol> <li>Alcance del artículo</li> <li>Tipo de artículo</li> </ol><p>Primero necesitamos identificar el <em>cosa</em> estamos describiendo Divirtámonos un poco con semántica y construyamos un contexto o significado en nuestro contenido dirigido a nuestro público objetivo.</p><p>Recuerda que solo tenemos una pieza singular de contenido. ¿Qué es un fragmento obvio de significado contenido en nuestra imagen??</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup.gif"><p>Bueno, seguro que parece un gato. Eso es genial ya que internet ama a los gatos! Qué <em>cosa</em> Mejor representa a un gato en el marcado de esquemas disponible para nosotros.?</p><p>El significado contenido en esta imagen probablemente no sea una acción, un servicio de transmisión, una entidad médica de evento o un lugar. Definitivamente es un trabajo creativo, más específicamente es un ejemplo de una Obra Visual, aunque Google está realizando algunos cambios que podrían afectar el uso de este marcado en el corto plazo:</p><p><br></p><blockquote contenteditable="false"> <p>@ryanallen_com @googledevs @google no, en lugar de eso, tenemos algunos retrasos (esperemos que uno fuera de él) para integrar las adiciones de febrero, es decir, http://t.co/09JUDuUIwW</p>- Dan Brickley (@danbri) 2 de marzo de 2015 </blockquote> <p>Vamos a declarar el <code>tipo de artículo</code> dentro de la etiqueta de la sección:</p><pre><section itemscope itemtype="https://schema.org/CreativeWork" > <img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </section></pre><p>Es un buen comienzo, aunque nuestro contenido aún no tiene sentido. Google, Bing, Yahoo y Yandex ahora están 100% seguros de que nuestro contenido es un trabajo creativo, pero nada más. Agreguemos un contexto más significativo dirigido a nuestro mercado objetivo: los diseñadores web.<br></p><h3>Propiedades de microdatos opcionales</h3><p>No es necesario que enumere todas las propiedades que puede usar con el tipo de elemento Trabajo creativo, aquí hay algunas relacionadas con los diseñadores web, a quienes identificamos como nuestro público objetivo..</p><p>Comencemos por declarar todas las cosas sobre este contenido que no son abstractas sino que son concretas, firmes e invariables en su significado.. </p><h4>Imagen</h4><p>Primero, esta es una imagen con una ubicación de origen (<code>src</code>) En la red.</p><pre><img itemprop="image" src="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </pre><h4>Autor</h4><p>Soy el autor, o creador, de la ilustración digital..</p><pre><meta itemprop="author" content="Ryan Allen" ></pre><h4>Audiencia</h4><p>¡Luciendo bien! Añadamos ahora a nuestro público objetivo..</p><pre><meta itemprop="audience" content="web designers" ></pre><h4>Uso educativo</h4><p>Ahora vamos a establecer el tipo de uso educativo que pretendemos para esta imagen, que es un <em>ejemplo</em> en este caso.</p><pre><meta itemprop="educationalUse" content="example" ></pre><h4>Para toda la familia</h4><p>Nada de esto es NSFW, así que asegurémonos de que esté claro.</p><pre><meta itemprop="isFamilyFriendly" content="true" ></pre><h4>Personaje</h4><p>¿Cómo nombramos a nuestro personaje de gato??</p><pre><meta itemprop="character" content="Vincenzo" ></pre><p>Oh si. Ese es un nombre bastante impresionante, aunque se está moviendo hacia un reino más abstracto. Las cosas están a punto de obtener todo abstracto ahora. </p><h4>Acerca de</h4><p>Agreguemos un poco más de contexto sobre la situación en nuestra imagen relacionada con nuestro público objetivo.</p><pre><meta itemprop="about" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness." ><br></pre><p>Terminemos esto con una lista de palabras clave delimitadas por comas, orientadas y relativas para aumentar el factor de descubrimiento de nuestro contenido por encima de 9000.</p><pre><meta itemprop="keywords" content="designer, design, web design, seo, discoverability, open graph, twitter cards, microdata, google, bing, microsoft, yahoo, yandex, content, context, semantics, meaning, sad, cat, animation, gif, cute, illustration, tutsplus" > </pre><h4>Validar</h4><p>Todo lo que queda por hacer es validar su código con Google, luego con Facebook y finalmente con Twitter. Esto es lo que parece en:</p><h4>Facebook</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_11.png"><h4>Gorjeo</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_12.png"><h4>Google</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_13.png"><h2>Resumen</h2><p>Entonces, ¿cómo se ve todo junto??</p><pre><!DOCTYPE html> <html> <head> <title> Desolado felino
Share
Del manual de estilo de Chicago
Anímate compañero ... 
Accentsconagua