Sí, soy periodista. Pero también soy desarrollador Web. Y si tú, periodista,
quieres trabajar en la línea del periodismo online o digital, ya es tiempo que aprendas también algunos estándares básicos de desarrollo y programación.
Porque
un sitio Web que cumple los estándares de diseño, posiciona mejor.
Un poco de HTML
El lenguaje HTML surgió en los años 90 (finales del siglo XX) y es fácil, de verdad es muy fácil. Solo necesitas un abrir el Notepad, guardar tu documento con extensión
.html y ya estás creando una página Web. La cantidad de códigos que es necesario conocer para armar una página básica, una noticia, con título, bajada, negritas y cursivas, imagen y link, no son más de 13.
Por ejemplo:
<html>
<head><title>El título de la ventana (que es el mismo título de la noticia)</title>
</head>
<body>
<p>13 de abril de 2012</p>
<h1>El título de la noticia</h1>
<ul>
<li>Aquí va la bajada .</li>
</ul>
<p>Esto es un párrafo de texto. Y <strong>esta frase</strong> está en negrita.</p>
<p>Esto es otro párrafo de texto. Y <em>esta frase</em> está en cursiva.</p>
<p><img src="/ruta/a/la/imagen/" alt="descripción de la imagen" /><br/>
Inserté una imágen y un salto de línea, para agregar este trozo de texto debajo de ella.</p>
<p>Esto es un párrafo de texo. Y <a href="/ruta/del/enlace/">esta frase</a> es un enlace.</p>
</body>
</html>
Para hacer una página Web simple, eso es todo lo que necesitas saber.
Hacer SEO en el código HTML
Hay pocos códigos HTML que son realmente necesarios para que una página pueda posicionarse en buscadores.
Lo que importa es tu contenido y que los códigos HTML básicos estén usados correctamente. Los buscadores indexarán esos contenidos y si no encuentran ninguna falla semántica (en los códigos), pues tu página tiene mejores probabilidades de ser indexada en los buscadores.
Pero hay algo que debes saber antes de continuar: si tus contenidos son originales y tu sitio Web está indexado en los buscadores, tu página
puede aparecer en los resultados de búsqueda. No es seguro que aparezca en la primera página, porque para que eso ocurra
tu sitio Web completo tiene que ser competitivo y tener buena autoridad. Ya hablaremos de eso en algún post futuro.
Ahora, no está de más ayudar un poco al buscador para que catalogue mejor tu sitio web. Con un par de códigos HTML extra dentro entre las etiquetas HEAD, justo debajo de TITLE, las probabilidades de posicionar mejoran:
<meta name="description" value="Aquí agregas una descripción relevante del contenido de tu página. Cuando es una noticia, lo usual es que escribas aquí la bajada ." />
Hay quienes aseguran que este código descriptivo es innecesario y que, en su ausencia,
la descripción es todo el contenido de tu página. Lo dejo a tu criterio, porque no he visto que el posicionamiento mejore o empeore por tenerlo.
<meta name="robots" value="noodp" />
Este último le dice al buscador que no use la descripción de una base de datos abierta (DMOZ), que usualmente no coincide con el contenido de la página, sino que use tu propia descripción.
HTML evoluciona a HTML5
La principal diferencia entre HTML y HTML5, es que este último agrega una lista de etiquetas semánticas para organizar y catalogar el contenido de manera más clara. Con o sin estas etiquetas, el contenido se ve igual en los navegadores, no hay un gran cambio. Pero a la hora de indexar esos contenidos y optar por una mejor posición, HTML5 mejora las posibilidades.
Por ejemplo:
<!DOCTYPE html>
<html dir="ltr" lang="es-CL">
<head>
<meta charset="utf-8" />
<title>El título de la ventana (que es el mismo título de la noticia)</title>
</head>
<body>
<article>
<header>
<p><time>13 de abril de 2012</time></p>
<h1>El título de la noticia</h1>
<ul>
<li>Aquí va la bajada.</li>
</ul>
</header>
<section>
<p>Esto es un párrafo de texto. Y <strong>esta frase</strong> está en negrita.</p>
<p>Esto es otro párrafo de texto. Y <em>esta frase</em> está en cursiva.</p>
<p><figure><img src="/ruta/a/la/imagen/" alt="descripción de la imagen" /></figure><br/>
Inserté una imagen y un salto de línea, para agregar este trozo de texto debajo de ella.</p>
<p>Esto es un párrafo de texto. Y <a href="/ruta/del/enlace/">esta frase</a> es un enlace.</p>
</section>
</article>
</body>
</html>
Otras etiquetas cumplen funciones específicas, como definir cuáles son los link de navegación (
<nav> … </nav>) y cuáles son los contenidos que van a un costado y que son importantes, pero no son el principal foco de la página (
<aside> … </aside>).
Los microformatos…
Son un conjunto de variables que se agregan a las etiquetas HTML existentes, y que entregan información detallada acerca de las características del contenido que contienen. Por ejemplo, diciendo a los buscadores y navegadores que esta página es un artículo de noticias, que el H1 es el título, que la bajada está en una viñeta y dónde está el contenido de la noticia.
En HTML (en general) las etiquetas expresan que lo que está dentro de ellas cumple con una característica específica (<aquí comienza> y </aquí termina>). Y los textos contenidos en las etiquetas microformateadas están sujetos a la misma regla.
Hay al menos dos tipos de microformatos:
Schema.org y
Microformats.org. Para este ejemplo usaré el Schema.org, porque el otro requiere el uso de palabras específicas en los estilos CSS y para los efectos de este blog, no me inmiscuiré en el ámbito de los diseñadores (todavía).
Por ejemplo:
<!DOCTYPE html>
<html dir="ltr" lang="es-CL">
<head>
<meta charset="utf-8" />
<title>El título de la ventana (que es el mismo título de la noticia)</title>
</head>
<body itemscope itemtype="http://schema.org/NewsArticle">
<article>
<header>
<p><time itemprop="datePublished" datetime="2012-04-13">13 de abril de 2012</time></p>
<h1 itemprop="headline name">El título de la noticia</h1>
<ul>
<li itemprop="description about">Aquí va la bajada.</li>
</ul>
</header>
<section itemprop="articleBody">
<p>Esto es un párrafo de texto. Y <strong>esta frase</strong> está en negrita.</p>
<p>Esto es otro párrafo de texto. Y <em>esta frase</em> está en cursiva.</p>
<p><figure><img src="/ruta/a/la/imagen/" alt="descripción de la imagen" /></figure><br/>
Inserté una imagen y un salto de línea, para agregar este trozo de texto debajo de ella.</p>
<p>Esto es un párrafo de texto. Y <a href="/ruta/del/enlace/">esta frase</a> es un enlace.</p>
</section>
</article>
</body>
</html>
Para finalizar
En los sitios Web que utilizan
CMS (como Wordpress), el HTML5 y los microformatos están embebidos en el código del tema o template del sitio, y no es necesario que el periodista se preocupe de manipularlos.
Pero de todas maneras es importante saber qué son y para qué sirven, y si nuestro sitio Web de noticias no cumple estos estándares y sigue usando tablas para organizar los contenidos, pues ya es tiempo de contratar a un nuevo desarrollador.
