Este no es un post en el sentido habitual del término, sino una pequeña guía de introducción al HTML orientada especialmente a redactores que precisan conocer cosas muy concretas y determinadas para editar texto en una website.

Los redactores freelance necesitamos, cada vez más, ampliar nuestros conocimientos franqueando los límites de los usos y normas de la buena escritura. Internet se ha convertido en el principal medio donde un redactor puede ejercer su actividad profesional y, por tanto, es necesario aprender de otras disciplinas como la informática o la programación web.

¿Por qué necesitas conocer HTML para ser redactor?

Recientemente decidí crear mi propia página web. Como tantos otros trabajadores freelance, he tenido que crear algunos de los recursos necesarios para ejercer mi actividad profesional con la mínima inversión y siguiendo la máxima del do it yourself (“háztelo tú mismo”). Así, hace unos meses decidí que además de mi blog, necesitaba una página web para ofrecer una imagen de seriedad a mis clientes potenciales.

Me descargué una de esas plantillas gratuitas para hacer páginas web que ofrecen empresas de programación o de hosting, para promocionarse o captar clientes. Ya había toqueteado un poco el código HTML de alguno de los blogs que tenía en Blogger, y empecé a editar el contenido de mi página web. Tras una pequeña labor de documentación, numerosas pruebas ensayo/error y alguna que otra consultas a un par de amiguetes con conocimientos en programación, ya tenía mi propia página web, lista para subirla a un servidor.

Si eres redactor freelance y no dispones de dinero para invertir en diseño web puedes crear tu propia página a partir de una plantilla gratuita y con unos conocimientos muy básicos de HTML que no te será difícil adquirir. Pero no es la única razón por la cual un redactor freelance necesita saber acerca de estas cuestiones:

  • Si trabajas a través de plataformas crowdsourcing para redactores probablemente tengas que operar con gestores de contenido donde tendrás que introducir algunas etiquetas HTML. Muchos de estos gestores de contenido implementan botones donde puedes editar del mismo modo que en procesadores de texto como el de Word u OppenOffice. Sin embargo, es preferible que sepas interpretar las etiquetas HTML que aparecen en el texto para ser capaz de solventar algunos problemas.
  • Si trabajas con empresas de diseño web o marketing online, o simplemente con clientes que te piden que introduzcas el contenido directamente en sus páginas web es imprescindible conocer algo de HTML básico.
  • Si te especializas en servicios de SEO para contenido necesitas saber optimizar determinadas etiquetas HTML.

Veamos a continuación las etiquetas HTML más estrechamente relacionadas con la edición del contenido web.

Title, meta etiquetas y encabezados h1,… h6, muy importantes para el SEO

1. Title

Es la etiqueta que se emplea para el título de cada una de las páginas de un dominio. Todo aquello que introducimos en esta etiqueta aparece como titular en los resultados de búsqueda. Desde el punto de vista de la optimización SEO, las keywords o palabras clave por las que queremos que los usuarios encuentren dicha página deben estar presentes en la etiqueta title, y a ser posible, colocadas lo más a la izquierda posible. El contenido de la etiqueta debe estar relacionado con el del resto de la página. El title debe introducirse en la cabecera, o dicho de otro modo, entre la las etiquetas <head>, de apertura, y </head>, de cierre. El texto de la etiqueta title no debe tener más de 70 caracteres, o aparecerá cortado y con puntos suspensivos en los buscadores, algo que queda un poco feo para el usuario que realiza la búsqueda.

Veamos un ejemplo para una página titulada “redactor freelance para páginas web”:

<title> Redactor freelance para páginas web </title>

2. Meta etiquetas

Las meta etiquetas o etiquetas meta, como más nos guste, también se incluyen dentro del espacio comprendido en la cabecera del documento en HTML. Son las siguientes:

a) Description

La etiqueta description, como indica su significado en inglés, es una “descripción” del contenido de la página. En ella deben aparecer también las keywords por las que queremos posicionar la página, pero no debe ser tanto una enumeración de palabras como una explicación sucinta de lo que el usuario encontrará en ella. De hecho, la escueta descripción que aparece en los resultados de búsqueda se corresponde con el texto que coloquemos en esta etiqueta. La descripción no debe superar los 150 caracteres, o también podría aparecer cortada.

Si seguimos con el ejemplo de la página de un redactor freelance, la etiqueta description podría quedar así:

<meta name="description" content="Redactor freelance ofrece servicios de redacción de artículos, actualización de blogs, contenido web, community management y corrección de textos en Madrid"/>.

Aunque hay una enumeración de elementos, es pertinente siempre y cuando estas palabras aparezcan en el contenido de la página. Esta podría ser la descripción de la página de inicio o la de servicios de un redactor freelance que desempeñara todas estas funciones.

 b) Keywords

La meta etiqueta keywords es aquella que refiere a las palabras clave por las que queremos posicionarnos en Internet. En el pasado era muy importante para lograr un buen posicionamiento en buscadores. En la actualidad no juega ningún papel en cuanto al posicionamiento. Algunos programadores y expertos en SEO aconsejan introducirla por si sirve de ayuda para que los motores de búsqueda indexen con mayor facilidad la página. Otros, sin embargo, recomiendan omitirla directamente. Esta etiqueta sí consiste en una enumeración de palabras. Es aconsejable introducir unas 10 o 12 (nunca más de 20).

Seguimos con el ejemplo de la página del redactor freelance para mostrar el uso de este etiqueta:

<meta name="keywords" content="redactor, redactor freelance, redactor web, redactor seo, escritor de artículos, copywriter, community manager, corrector, corrector web, corrector de textos"/>.

3. Etiquetas h1,… h6

Las etiquetas h1, h2, h3, h4, h5, h6 sirven para editar los títulos y subtítulos de un texto, estableciendo un orden de prioridad que informará a los lectores y los buscadores de la jerarquía de importancia de los distintos apartados y distinguirá tipográficamente con un tamaño de letra decreciente según la relevancia. Desde el punto de vista del SEO, es importante introducir keywords o palabras clave, al menos en las etiquetas h1 y h2.

Para poner un ejemplo sencillo, veamos cómo han sido utilizadas las etiquetas h en este post hasta el momento:

<h1>HTML básico para redactores</h1>
<h2>Por qué necesitas conocer HTML para ser redactor</h2>
<h3>1. Title</h3>
<h3>2. Meta datos</h3>
<h4>a) Description</h4>
<h4>b) Content</h4>
<h4>c) Keywords</h4>
<h3>Etiquetas h1,... h6</h3>

Como comprobarás, el tamaño de la letra va descendiendo según bajamos en la escala de prioridad, desde h1 hasta h6.

Todo cuanto hemos visto hasta ahora se introducía entre las etiquetas head de apertura y cierre. Las etiquetas h, sin embargo, deben ir junto con el contenido al que pertenecen, entre las etiquetas <body> y </body>, que es donde aparecerá casi todo el contenido visible de la página web.

Con HTML5 han surgido nuevas etiquetas para jerarquizar el contenido de una página web, como <section></section> y <article></article>. Sin embargo, he decidido no incluirlas para no complicar la exposición más de lo necesario, y porque creo que para empezar, un redactor se manejará bastante bien con las etiquetas h, que son las directamente relacionadas con la edición de bloques de texto, artículos, posts, etc. Para más información sobre este tema puedes consultar este enlace.

Párrafos y saltos de línea en HTML

La forma en la que estructuramos el cuerpo de un texto es muy importante. Siempre es conveniente construir los textos mediante varios párrafos en los cuales se desarrolle una idea con cierta independencia respecto al corpus del texto en su conjunto. Además, esta práctica ayuda al lector a no perder el hilo de la exposición y descansar la vista. Por todas estas razones, las siguientes etiquetas pueden ser muy útiles:

1. Párrafo

En HTML, los párrafos deben circunscribirse dentro de las etiquetas <p> y </p>. Un ejemplo de su uso:

<p>El redactor freelance es un profesional independiente que escribe textos por encargo. Algunos redactores, sin embargo, no ejercen como freelance, sino que trabajan en plantilla para alguna empresa, en condiciones de contratación similares a...</p>

2. Salto de línea

Algunas veces puede ser necesario o recomendable introducir un salto de línea (es decir, que una porción de texto aparezca en la línea siguiente) sin recurrir a la etiqueta </p>, o sea, sin pasar a otro párrafo nuevo. Esta necesidad surge, por ejemplo, cuando queremos ofrecer al lector una lista de enlaces en diferentes líneas sucesivas, o simplemente cuando por razones estéticas queremos que el texto aparezca en líneas distintas. En casos como estos puedes utilizar la etiqueta <br />, dejando siempre un espacio entre “br” y “/”.

<p>Cinco ventajas del marketing de contenidos<br />
que seguramente no conocías</p>

Sirva el ejemplo, a pesar del sensacionalismo del titular. Como habrás observado, la etiqueta <br /> carece de otra etiqueta para el cierre.

Negritas y cursivas en HTML

Como probablemente sabrás, el uso de negritas y cursivas es importante para los motores de búsqueda, con lo cual, este es otro aspecto a tener en cuenta para que el redactor pueda escribir un texto con optimización SEO para posicionamiento en buscadores. Las negritas y las cursivas indican a los buscadores qué palabras son las más relevantes dentro del texto. Sin embargo, no es aconsejable abusar de estos recursos, que al fin y al cabo pueden entorpecer la lectura, y los search engines también podrían interpretarlo como una mala práctica SEO.

1. Negritas

Para que un texto aparezca en negrita es tan sencillo como situarlo entre las etiquetas <strong> y </strong>. También se puede utilizar las etiquetas de apertura y cierre <b>, </b> con idéntico resultado.

A modo de ejemplo, utilizaremos en resaltado en negrita en “marketing de contenidos” dentro de la siguiente frase: “El marketing de contenidos es la apuesta del futuro. Su forma en HTML sería la siguiente:

El <strong>marketing de contenidos</strong> es la apuesta del futuro.

2. Cursivas

Para resaltar una palabra o expresión con cursivas, se pueden utilizar las etiquetas <i></i> o también <em></em>.

Supongamos que queremos poner en cursiva “online marketing”, por tratarse de una expresión en inglés, en la frase “Resulta sorprendente que el online marketing no se estudie en la universidad”. Quedaría como sigue:

Resulta sorprendente que el <i>online marketing</i> no se estudie en la universidad.

Etiquetas HTML para introducir listas

En un post anterior ya traté el tema de las listas y su papel en cuanto a la usabilidad de un texto. Las listas permiten categorizar o jerarquizar la información, presentando las ideas de una forma ordenada. También ofrecen la posibilidad de romper la monotonía del texto. Insertar listas es algo muy útil en posts para blogs de tipo comercial o publicitario. Para introducir listas puedes utilizar las siguientes etiquetas:

1. Listas desordenadas

La etiqueta <ul> se utiliza para insertar listas no numeradas o sin un orden específico. Considera el siguiente ejemplo de uso de la etiqueta <ul> para insertar listas en un texto. Imaginaremos que estamos enumerando los servicios de un redactor freelance:

<h2>Servicios de redacción y creación de contenidos</h2>

<ul>
<li>Redacción de artículos</li>
<li>Creación de contenido web</li>
<li>Posts para blogs corporativos</li>
<li>Redacción de e-books</li>

</ul>

De este modo aparecerá un listado separado por puntos con algunos de los servicios que ofrece un redactor freelance, según el ejemplo escogido. En este caso puede ser útil comprobar cómo aparecería la lista en una web:

Servicios de redacción y creación de contenidos

  • Redacción de artículos
  • Creación de contenido web
  • Posts para blogs corporativos
  • Redacción de e-books

2. Listas ordenadas

<ol> es la etiqueta HTML para las listas ordenadas. La mejor forma de explicar su funcionamiento es pasando directamente a considerar un ejemplo. Pongamos por caso que eres un redactor especializado en SEO y quieres ofrecer a tus clientes potenciales una lista con los servicios relacionados con la optimización SEO para contenido. Veamos cómo quedaría la lista de servicios con la etiqueta <ol>:

<h2>Servicios de optimización SEO para contenido</h2>
<ol>
<li>Optimización SEO para contenidos en la red</li>
<li>Elaboración de listas de palabras clave relevantes</li>
<li>Redacción optimizada para los buscadores</li>
<li>Solución de problemas derivados del <i>keyword stuffing<i></li>
</ol>

Sin utilizar atributos adicionales, la lista aparecería numerada por defecto:

Servicios de optimización SEO para contenido

  1. Optimización SEO para contenidos en la red
  2. Elaboración de listas de palabras clave relevantes
  3. Redacción optimizada para los buscadores
  4. Solución de problemas derivados del keyword stuffing

Si además utilizamos el atributo start=”…” en el primer elemento de la lista, podemos seleccionar el número a partir del cual empieza la enumeración:

<ol start="10">
<li>
<li>
...
</ol>

De este modo, los servicios de la lista que utilizábamos como ejemplo irían numerados del número 10 al 14.

Insertar imágenes y enlaces en HTML

Además de los contenidos en texto, a un redactor se le puede pedir que introduzca imágenes en un post, enlaces hacia otros contenidos de la misma página web o de otras (muy importante en SEO). También puede ser necesario introducir direcciones de correo electrónico, especialmente si se te pide que redactes páginas web de empresas o profesionales.

1. Insertar imágenes

Normalmente, para introducir una imagen en tu página web debes subirla al servidor como el resto de archivos que aparecerán en tu site. Una vez hecho esto, la imagen debe ser introducida con la siguiente línea de código con la etiqueta <img:

<img src_"ruta o nombre del archivo de imagen" width="220 px" height="110 px" alt="texto alternativo">

Las etiquetas width y height indican la anchura y altura de la imagen en píxeles. En la etiqueta alt debes escribir el texto que aparecerá cuando el usuario sitúe el puntero del ratón sobre la imagen. ¡Ojo!, optimizar esta etiqueta es muy importante en lo que concierne a la optimización SEO. Lo más aconsejable es introducir alguna keyword en el texto alternativo para atraer a visitantes interesados en el contenido de la web. Si no sabes qué debes poner en lo que he definido como “ruta o nombre del archivo de imagen” te sugiero que consultes la siguiente guía.

2. Introducir enlaces

Como sabrás, un redactor web debe introducir enlaces de forma estratégica. Los enlaces internos, es decir, aquellos que conectan unas páginas entre otras dentro de un mismo dominio, ayudarán a las arañas como GoogleBot a leer la página web o el blog en cuestión. Los enlaces externos, aquellos que apuntan hacia otras páginas web distintas, ayudarán a la hora de obtener un buen posicionamiento web en los buscadores, siempre y cuando estén relacionados con la temática que tratas en tu site y sean relevantes.

Introducir un enlace es muy sencillo, y la mejor forma de mostrarlo puede ser la de poner un ejemplo. Voy a mostrar cómo quedaría un enlace hacia mi propia página web colocada en cualquier otro site:

<a href="http://www.redactorycorrector.es" target="_blank">Redactor web</a>

Podéis ver en qué lugar habría que situar la url de la página a la que apunta el enlace, en este caso, mi propia website. Si el enlace lo realizara desde una página a otra de mi dominio, el enlace acabaría en .html, y no en .es, .com, .org, etc.

Con target=”_blank” conseguiremos que al abrir el enlace, la página hacia la que nos envía se abra en otra página en blanco del navegador. Esto es muy útil si no queremos que nuestros visitantes abandonen la web al pinchar en el primer enlace. Si el enlace dirige hacia otra página interna, dentro de nuestro dominio, podemos omitir el atributo target.

“Redactor web”, en el ejemplo, sería lo que se ha dado en llamar anchor text o texto ancla, que no es otra cosa que la fracción de texto que contendrá el enlace, y aparecerá coloreada como un enlace cualquiera. Quedaría exactamente así:

Redactor web

El anchor text es otro aspecto a cuidar cuando llevamos a cabo una optimización SEO. Hasta la irrupción de Google Panda (una actualización del algoritmo de Google destinada a perseguir el Black Hat SEO), era conveniente que el anchor text de los enlaces que apuntaban hacia nuestra página contuvieran palabras clave relevantes y relacionadas con la temática de nuestra website. Sin embargo, esto llevó a los SEO expertos en link building a abusar de esta práctica, pagando a otros webmasters o bloggers por introducir enlaces en sus páginas web apuntando al site que deseaban posicionar en los buscadores, indicando siempre el anchor text con las keywords adecuadas. Puesto que Google quiere que los enlaces hacia nuestra página sean naturales (es decir, que nuestros contenidos hayan sido enlazados porque son relevantes y de calidad, y no porque tengamos mucho dinero para invertir en link building), el hecho de que el anchor text de los enlaces entrantes coincida siempre con palabras clave puede ser motivo de sanción.

De modo que si convences a determinado número de personas (pagando, proponiendo intercambios de enlaces o con otros métodos de persuasión, no voy a formular juicios éticos al respecto…) para que enlace tu web o blog, a menudo será más conveniente que el texto ancla sea un simple “aquí” o “siguiente enlace”. De este modo es más probable que Google lo considere un enlace natural.

Tildes y eñes en HTML

A veces las palabras con tildes o acento gráfico, diéresis, ñ, etc., aparecen mal escritas, y en lugar de la letra acentuada hallamos  una procesión de signos incomprensibles. Esto se debe a que los navegadores no leen del mismo modo las páginas en HTML escritas en uno u otro idioma, y por desgracia, estas particularidades ortográficas del español les suelen resultar extrañas.

Para que el contenido pueda leerse bien con estos signos es preciso codificarlas en su equivalente en HTML. Para ello existe un grupo de entidades o símbolos que te puede ser muy útiles para escribir letras con tilde, diéresis, eñe, etc.:

  • á: &aacute;
  • é: &eacute;
  • í: &iacute;
  • ó: &oacute;
  • ú: &uacute;
  • Á: &Aacute;
  • É: &Eacute;
  • Í: &Iacute;
  • Ó: &Oacute;
  • Ú: &Uacute;
  • ñ: &ntilde;
  • Ñ: &Ntilde;
  • ü: &uuml;
  • Ü: &Uuml;

Pongamos un ejemplo con las palabras Sócrates, cañón y pingüino (utilizo el resaltado en negrita para facilitar la lectura, no porque haya que introducirlo en el documento en HTML):

  1. S&oacute;crates
  2. ca&ntilde;&oacute;n
  3. ping&uuml;ino

¿Difícil? En absoluto. Si te fijas, para todos los casos de acento gráfico, la letra se sustituye por el símbolo “&” seguido de la vocal que se quiera acentuar en mayúscula o minúscula, según el caso, a continuación se añade “acute” y por último se coloca un punto y coma (;). El caso de la ñ y la diéresis tampoco reviste mayor complejidad.

Una forma de evitar el hecho de tener que utilizar estos símbolos extraños es colocar la siguiente línea de código en el encabezado, es decir, dentro de la etiqueta head de apertura y de cierre:

<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>

De este modo todo resulta mucho más sencillo, pero tampoco está mal conocer cuál es la forma de escribir estos símbolos en HTML.

Tu aportación a la pequeña guía de HTML para redactores…

Esta introducción a los aspectos que un redactor debería conocer sobre HTML no pretende otra cosa que plasmar aquello que me hubiera gustado encontrar cuando empecé a trabajar como redactor freelance. Toda la información aquí reflejada he tenido que aprenderla de forma autodidacta, consultando blogs que a menudo ofrecían una información ininteligible para personas no iniciadas en la informática o el desarrollo web. Fue entonces cuando empecé a plantearme la posibilidad de escribir una guía para redactores, escrita por alguien (el que suscribe) que todavía está aprendiendo sobre todos estos temas, y por tanto, conoce las necesidad de adaptar el contenido y hacerlo lo más sencillo y ameno posible para neófitos y recién iniciados.

Puesto que, vuelvo a insistir, no soy un experto en la materia, si detectas alguna imprecisión o echas en falta cuestiones relevantes sobre este tema no dudes en hacérnoslo saber, a mí y a los lectores, a través de los comentarios.

Si, por otra parte, te ha gustado esta guía o te ha sacado de algún aprieto, te agradecería que me ayudes a difundirla a través de las redes sociales. Después de todo “Es de bien nacidos ser agradecido” 😉

A %d blogueros les gusta esto: