View
219
Download
0
Category
Preview:
DESCRIPTION
Libro de diseño de blog, con consejos prácticos, paso a paso, de diseño gràfico
Citation preview
1
Creo que a estas alturas, si ya me conoces un poco, sabes de mi obsesión por
la estética del blog. Uno de los puntos fundamentales es la claridad y
sencillez. Hay millones de blogs y aún más lectores por internet, por lo que la
demanda es muy superior a la oferta... Por eso, si uno de esos lectores cae por
casualidad en tu blog y su apariencia le incomoda, no se lo pensará dos veces
antes de abandonar la página.
En esta serie de artículos que he preparado, voy a centrarme en la apariencia
de nuestras entradas de cara al lector. Recuerda que son solo consejos
basados en mi experiencia y opinión personal, que puede no ser la tuya. No
tienes por qué aplicarlos si ves que no van con la idea que tienes de tu blog.
2
Como elegir el título adecuado para tus entradas
El título es el resumen de tu entrada. Si tu visita no se siente atraído por él, a
no ser que sea un lector habitual, no se detendrá a leerte. Internet está lleno
de información y los internautas van de un blog a otro con una facilidad
asombrosa. Quieren la información que buscan y la quieren ya.
No hay que descuidar este paso ya que es de vital importancia. Un título debe
ser llamativo, captar su atención, despertar su curiosidad y animarle a
leer.
♥ Ahora están muy de moda las listas. Por ejemplo: los 7 aspectos claves para
entender Twitter, haz tu propia tarta de manzana en 5 sencillos pasos, los 7
motivos por los que tu marca personal no es conocida... Y está comprobado
que las listas con números impares despiertan más interés que las de
números pares. Tal vez sea por el tema de la psicología, a tanto no llego.
♥ Otra táctica muy usada es comenzar nuestro título con: Cómo hacer tu
propio... , La mejor forma de...Cuando hacemos una búsqueda en internet,
generalmente buscamos la manera más rápida, sencilla y clara de hacer
las cosas ¿no? Pues es otro punto a tener muy en cuenta al seleccionar el título
apropiado para nuestra entrada.
♥ Sin olvidar las comparaciones de productos: Las ventajas de X frente a
Y, motivos para comprar X en vez de Y, por qué prefiero X y no Y...
Una combinación de éstas puede ser realmente impactante:
* Ejemplo:
7 motivos por los que es mejor hacer una tarta con X harina en vez de con la marca
Y
Mis 5 respuestas a por qué es mejor Blogger que Wordpress
3
♥ No mentir. Esto es palabra de Dios. Ya hemos hablado de la importancia
del porcentaje de rebote para Google. El porcentaje de rebote no es otra cosa
que el número de visitas que encuentran alguna de nuestras entradas a través
del buscador, empiezan a leer, se dan cuenta de que no es lo que buscaban y
se marchan sin terminar de leer la entrada. Pues eso Google lo tiene muy en
cuenta. Como hemos visto en el Curso de Herramientas SEO para Blogger, es
muy sencillo saber nuestro porcentaje de rebote con las herramientas que el
mismo Google nos ofrece.
♥ Google tiene en cuenta los primeros 70 caracteres de nuestro título para
mostrarlo en sus búsquedas, si nos excedemos, aparecerá cortado. Y eso no es
lo que queremos ¿verdad? Así que hay que dedicar el tiempo que sea
necesario a optimizar nuestro título para que quede tal y como queremos que
sea visto a través del buscador.
♥ Keywords. Ya sabes lo que es si has seguido alguno de mis tutoriales gratis
de SEO. Palabras clave. Si ya tienes tu blog un tiempo, seguro que ya has
elegido tus palabras clave, aquellas por la que quieres posicionarte en las
búsquedas. Intenta incluir al menos una de ellas en tu título, si no puede
ser una genérica porque quede demasiado forzada (recuerda escribir para
personas, no para robots), intenta buscar algún sinónimo o grupo de palabras
que signifiquen algo parecido.
♥ Tipo de letra. Utiliza un tipo de letra clara y legible. Las letras con
florituras pueden quedar muy monas para nosotros pero ¿facilitan la lectura?
¿animan a la nueva visita a quedarse y seguir leyendo? Utilizar un tipo de letra
en mayúsculas, clara, que sea sencilla de leer, afecta positivamente al resto de
nuestra entrada. Puedes ver cómo cambiar el tipo de letra de tus títulos para
darle un toque más original en esta entrada sobre como instalar fuentes de
google fonts en blogger.
♥ Adornos al principio y al final. Seguro que has visto varios blogs donde sus
entradas tienen al inicio un corazoncito, hoja de trébol, diamante... Es algo
original y estéticamente no molesta ni incomoda al lector. Puedes usarlo
cuando estés escribiendo el título de tu entrada en el editor, solo tienes que
usar la combinación de teclas adecuada para poner el símbolo que prefieras
en la parte del título elegida. Puedes ver algunos de los símbolos con su
correspondiente combinación de teclas en la entrada como personalizar el
mensaje del formulario de comentarios en blogger.
4
♥ Series de artículos. A veces, un tema da para mucho, por lo que es
aconsejable dividir la entrada en varios artículos más pequeños. Recuerda que
los internautas disponen de poco tiempo y mucha información, por lo que
muchas veces es más positivo centrarse en un solo tema y anunciar el
siguiente para otra entrada. Es aconsejable utilizar el mismo título para
todas las entradas de la serie pero ¿cómo evitar los títulos duplicados?
Usa números romanos, como he hecho yo en la serie de artículos sobre Cosas
que deberías saber antes de empezar tu Blog y en ésta. Google lo reconocerá
como títulos independientes de artículos relacionados y tu lector también.
♥ Ortografía. De vital importancia. Si iniciamos nuestra entrada con una falta
de ortografía en el título, afectará negativamente al resto del artículo. Pasa el
corrector, en Blogger puedes encontrarlo en la pantalla de edición de tu
entrada, a la izquierda, la uve verde con las letras ABC. Se marcarán en
amarillo las posibles faltas de ortografía. Sí, tendrás que invertir unos
minutos más y escribir tu título dentro del cuerpo de la entrada para que el
corrector lo reconozca (luego puedes borrarlo y devolverlo a su lugar original),
pero merece la pena. .
♥ Estilo. Si en tu entrada usas un tono desenfadado y cercano, de amigos, el
título debe ir acorde. Ten en cuenta que el título y la entrada son un conjunto,
se deben complementar entre sí. Usa la misma forma verbal y el mismo
estilo para mantener la uniformidad.
EXTRA: A través de esta página puedes optimizar los caracteres de tu título,
para asegurarte de que son los correctos y está optimizado para ser indexado
por Google.
Estos son mis pilares básicos a la hora de elegir un buen título, por
supuesto, como siempre, hay muchísimos más. Puede que algunos de los que
yo uso no puedas aplicarlos a tu blog, es cuestión de probar y crear tu propia
lista de puntos principales.
5
redacción, estilo y ortografía
♥ Párrafos cortos. Muy importante. Escribe tu entrada de un tirón, tal y como
te venga a la cabeza. Deja que tu creatividad fluya libremente y expláyate con
cada detalle. Deja reposar el escrito o la entrada... y vuelve a ella. Léela las
veces que haga falta y divídela en párrafos cortos, de tres a cinco líneas, sin
que pierda sentido. Es mucho más sencillo de leer y tu lector te agradecerá el
tiempo que inviertas en esta tarea.
♥ Separa el grano de la paja. En pocas palabras, elimina todo el contenido
adicional que hayas añadido cuando estabas inspirado. Pule tu entrada hasta
que trate sobre el tema central que has escogido. Si crees que alguno de los
temas secundarios que has retirado es lo suficientemente importante y guarda
relación con la entrada actual, menciónalo de pasada y programa otra entrada
para tratar ese tema. Además de perfeccionar tu entrada del día, tendrás tema
para la siguiente.
♥ Elige el tono que vas a usar y hazlo durante toda la entrada. Formal,
informal, cercano, desenfadado, analítico... Todo sirve. Pero es aconsejable ser
coherente para no despistar al lector. Recuerda que no son tus amigos de toda
la vida, esos que pillan tus indirectas a la primera y saben por dónde vas.
♥ Haz listas originales como éstas para amenizar la lectura. Esto ya lo hemos
hablado en otras entradas. Es importante dejar respirar al lector. No
amontones palabras en párrafos kilométricos. Usa tablas como las que vimos
en esta entrada para dar color y dinamismo a la lectura, utiliza negritas,
cursivas, colores, intercala imágenes. Y, sobre todo, no olvides dejar párrafos
en blanco. Sobre todo si tus entradas tienen más texto que fotos, como ésta
que estás leyendo.
♥ Cuida la ortografía. Recuerda que tus lectores no te oyen, te leen. ¡No les
dejes ciegos! Lo tienes muy fácil, puedes usar el corrector de Blogger como
ya hemos visto. Una ortografía cuidada transmite seriedad y atención en lo
que se hace. A veces, cuando escribimos con el móvil (yo me incluyo) nos
comemos las tildes y acortamos palabras... pero en el teclado del ordenador
no tenemos excusa.
6
En resumen, dedícale tiempo a la redacción de tus entradas, cuídalas y léelas
las veces que haga falta antes de darle a Publicar. Si eso conlleva que
publiques una vez a la semana, en vez de tres, no te agobies por ello, recuerda
la máxima más importante en el mundo blogger (yo, al menos, la defiendo a
capa y espada):
Calidad sobre Cantidad
7
VIDEOS E IMÁGENES Estoy segura de que si te preocupa el tema del diseño de entradas para
fidelizar a tus visitas y hacerles sentir cómodas en tu bitácora, habrás leído mil
veces la típica frase:
"Las entradas no se escriben, se diseñan"
Pues hemos llegado a un punto clave para el diseño de entradas. Las
fotografías y los vídeos.
Si hemos trabajado bien seleccionando un título adecuado, sugerente, que
llame la atención y hemos cuidado cada detalle del texto de nuestra entrada...
¡no podemos descuidar la estética de nuestros elementos multimedia por nada
del mundo!
Hay millones de blogs en internet por lo que no es raro que muchos de ellos
ofrezcan un contenido similar al nuestro. Teniendo ésto asumido... ¿por qué
iban a leernos a nosotros y no a los demás?
El valor añadido que ofrezcamos en nuestros artículos juega un papel muy
importante que no debemos olvidar.
Consejos para que nuestras fotos llamen la atención
Nítidas y de calidad. No podemos estropear una entrada perfecta con
una fotografía pixelada descargada de Google Imágenes. Una imagen grande,
clara, brillante, llamativa...despertará el interés de nuestras nuevas
visitas.
Nuestros lectores de siempre, aquellos con los que mantenemos una relación
de "amistad" y con lo que hablamos en las redes sociales, leerán nuestras
entradas, igual que nosotros leemos las suyas... Pero una nueva visita que
busca algo en particular, si se encuentra una imagen pequeña, oscura,
pixelada... ¡seguirá buscando!
8
Adaptadas al ancho de nuestra entrada. Tanto si las centramos como
si las alineamos a la izquierda, tenemos que cuidar la armonía entre la
fotografía y el texto.
¿Qué conseguimos con ésto?
Apariencia ordenada.
Estética cuidada.
Transmitir el cuidado que ponemos en redactar y diseñar nuestras entradas.
¿Cómo hacerlo?
Ya te conté como redimensionar vuestras fotografías sin perder calidad en
esta entrada:
*Recordar como redimensionar imágenes sin que pierdan calidad*
Pero antes necesitamos conocer el ancho de nuestra entrada, para que la
imagen encaje perfectamente. Vamos a ver cómo hacerlo de una forma muy
sencilla.
1.- Nos situamos en la página de Inicio de nuestro blog. Hacemos clic sobre
nuestra entrada con el botón derecho del ratón y seleccionamos: Inspeccionar
elemento.
9
2.- Nuestra entrada se marcará en azul y podremos ver directamente el ancho
de nuestra entrada, arriba a la derecha.
En mi caso es 730px.
3.- También puedes verlo en la ventana de código que se abre abajo,
buscamos:
<h3 class="post-title entry-title" itemprop="name">
Un par de líneas más abajo, verás:
intemprop="articleBody"
Ese es el cuerpo de nuestro artículo, si te sitúas justo en la línea siguiente te
aparecerá el dato de la imagen anterior.
10
Igual sucede con la ventanita de la derecha, en la pestaña Styles vemos todos
los estilos de nuestra entrada:
Bajando hasta abajo, encontramos la plantilla de nuestra entrada.
Y en la pestaña Computed vemos directamente nuestra plantilla y sus medidas:
11
¡¡Ahora no tienes excusa!! Ya conoces el ancho exacto de tus entradas para
poder adaptar el tamaño de tus imágenes a la perfección.
Adaptar los videos de youtube
Ya sabes cuál es el ancho de tus entradas ¡por lo que adaptar los vídeos
de YouTube es mucho más sencillo!
Ya no quedarán pequeñitos en el centro de nuestras entradas, sino grandes y
bien visibles completamente adaptados a la estética de nuestro blog.
Vamos a ver cómo adaptar las medidas de un vídeo de YouTube para insertarlo
en nuestro artículo.
1.- Buscamos el vídeo y pinchamos en Compartir, abajo a la derecha.
12
2.- Seleccionamos Insertar. Estas son mis opciones por defecto para compartir
vídeos.
3.- Escogemos Tamaño Personalizado en el desplegable Tamaño del Vídeo:
13
4.- Cuando escribamos el ancho, automáticamente se cambiará el alto. Es una
facilidad que nos da YouTube para mantener la proporción adecuada.
5.- Solo queda copiar el código, pasar a HTML en nuestra entrada y pegarlo
donde queramos que aparezca.
Y ¡voilá! Nuestro vídeo perfectamente adaptado al ancho de nuestra entrada.
Si usas un tipo de letra justificado, en vez de alineado a la izquierda como yo,
se apreciará mucho más la adaptación que hemos hecho. Eso ya depende de
los gustos de cada uno.
14
OPTIMIZAR LOS TÍTULOS No es otra cosa que esos pequeños detalles que hacen que la lectura de
nuestras entradas sea más amena.
Ya hemos visto la importancia de usar un buen título y cómo podemos
decorarlo con una imagen al principio del mismo:
♥ Elegir el título de mis entradas.
♥ Poner un icono en el título de mis entradas.
Empezaremos por resolver una duda de Nelebka. En la entrada en la que
hablamos sobre los iconos, ella preguntaba si era posible poner una imagen
diferente en cada título. ¡Es posible! Y vamos a ver cómo hacerlo de una
manera muy sencilla.
Cómo poner una imagen diferente en el título de cada entrada del blog
1.- En la pantalla de edición de nuestra entrada, situamos el cursor en la parte
del título y añadimos delante el siguiente código:
<img src="URL DE NUESTRO ICONO"/>
Necesitamos tener nuestra imagen subida a dropbox, picasa o similar, para
añadir el enlace a la misma donde te he indicado.
Así:
15
2.- Escribimos el título normal de nuestra entrada y si vamos a Vista Previa, el
resultado será éste:
De esta manera tan sencilla, podemos poner el icono que queramos delante
del título de cada una de nuestras entradas de forma independiente. Las
imágenes pueden ponerse en cualquier parte de tu título, no tiene por qué ser
al principio.
Otra opción para darle un toque original al título es añadirle diferentes colores,
vamos a ver cómo hacerlo.
Cómo añadir diferentes colores al título de las entradas del blog
1.- En la pantalla de edición de entradas, escribimos nuestro título en la zona
donde iría el texto de la entrada.
16
2.- Le aplicamos en Vista Redacción el formato que queramos.
3.- Pasamos a Vista HTML y copiamos el código que aparece entre:
<div dir="ltr" style="text-align: left;" trbidi="on"> </div>
En mi caso sería.
Escribir <b><span style="color: #0c343d;">aquí </span></b>el <i><span
style="color: #e06666;">texto de la entrada</span></i> que queremos
<u><span style="color: #20124d;">colorear</span></u>
4.- Lo pegamos en el título de nuestra entrada y en Vista Previa podemos ver el
resultado antes de guardar/publicar.
5.- ¡Y listo! Ya tenemos un título que llama la atención por su originalidad y que
despertará la curiosidad de nuestras nuevas visitas.
Espero que te sea muy útil. ¡Ya me contarás!
17
Tipos de letra A estas alturas seguro que ya has asumido que si queremos ser leídos y que
nuestros lectores se sientan cómodos mientras leen nuestras entradas,
tenemos que esforzarnos por facilitarles el trabajo ¿verdad? Es muy sencillo,
solo tenemos que ponernos en la piel del lector e intentar leer una de las
entradas de nuestro blog...
Vamos a hablar sobre algunos puntos que pueden ayudarnos a optimizar
nuestras entradas y hacer más amena su lectura.
¿Te resulta sencillo seguir el hilo del post?
¿Distingues bien el color del texto?
¿El tipo de letra es el adecuado?
...
Si la respuesta a todas las preguntas que acabo de formularte es SI, creo que
no necesitas seguir leyendo. Pero si en alguna has dudado, voy a darte algunos
consejos, siempre basados en mi experiencia personal, para mantener tus
entradas legibles, limpias y entretenidas ¿vale?
Texto oscuro sobre fondo blanco o muy claro.
Yo recomiendo siempre el fondo blanco, ya que da un aspecto más limpio y
profesional. Pero no solo eso, sino que facilita la lectura. Es a lo que estamos
acostumbrados ¿verdad? Solo tienes que mirar cualquiera de los libros que
tengas en casa. Páginas blancas y letras negras ¿a qué sí? Pues si quieres que
tus visitas lean tus entradas con la misma facilidad que leen un capítulo de su
libro favorito ¡pónselo igual de fácil!
Tipo de letra legible.
Empiezo con otra recomendación: Open Sans. Es la que yo uso y la que instalo
en todos los blogs que diseño. Es clara, limpia y legible. Facilita la lectura y a un
tamaño entre 14-18 píxeles es ideal para leer en pantalla.
18
Puedes ver los tipos de letra disponibles en Blogger en:
Plantilla >> Personalizar >> Avanzado
Otras fuentes muy claras que facilitan la lectura son, siempre desde mi punto
de vista:
Nobile
19
PT Sans Caption
Courier:
Suele quedar muy bien si buscamos un aspecto de texto mecanografiado.
20
Consolas
Josefin Slab
Muy fina y elegante pero para mejorar su lectura es recomendable subirla a 20
píxeles.
21
¡Hay muchísimas! Es cuestión de ir probando diferentes fuentes, tamaños y
colores. Pero teniendo siempre presente que escribimos para ser leídos, no
para que piensen: "¡uy! que letra más bonita... pero no se entiende nada... ¡qué
difícil es leer lo que pone!"
Porque hay otro tipo de letras muy chulas:
Calligraffitti
Dancing Script
22
Homemade Apple
Kranky
23
Lobster
Entre otras muchas que, aunque hay que reconocer que son monísimas y muy
originales, no facilitan para nada la lectura. Usándolas como texto principal de
nuestras entradas, solo conseguimos cansar la vista de nuestros lectores. Y si
encima usamos un color claro... ¡apaga y vámonos!
Estos tipos de letra más decorativos y originales podemos usarlos para los
títulos de nuestras entradas, suelen ser más breves y no queda tan recargado.
En esta entrada ya vimos cómo podemos instalar una fuente original para
el título de nuestras entradas.
Así que recuerda: Original y Diferente sí. Complicado y Extravagante no.
24
Marcar lo importante Hoy vamos a hablar de las negritas, cursivas y colores que usamos para
resaltar nuestros textos. No son solo elementos decorativos, como os
contaré ahora, al menos no para mí. Quiero que tengas siempre muy claro
que todo lo que te cuento en el blog no tiene por qué ser la Verdad
Absoluta. Solo comparto lo que he aprendido y estudiado, eso que a mí me
funciona... Pero puede que en tu caso sea diferente.
¿Qué funciones desempeñan estos formatos en un artículo de nuestro
blog?
Marcan el contenido importante.
Diferencian el tema principal de los secundarios.
Mejoran la estética.
Dan un aspecto más cuidado y elaborado a nuestras entradas.
Ayudan a que el lector pueda escanear nuestro post y saber de qué va a
simple vista.
Son muy útiles para optimizar nuestro blog y mejorar su posicionamiento.
Entre otras muchas, pero éstas son mis Básicas, por llamarlas de alguna
manera. Voy a desarrollar estos puntos un poco más con un ejemplo
práctico ¿vale? Y ya tú decides si quieres usarlas o no en tu blog.
Todos nuestros post tienen un tema principal. Puede ser tu última receta,
el gorrito de lana que has hecho para la hija de tu vecina o el último blog
chulo que has descubierto. Pero claro, no puedes limitarte a escribir tres
líneas, poner dos fotos y ya. Entrada lista para publicar. A no ser que ya
tengas visitas recurrentes y gente a la que le guste realmente lo que
haces... hay que trabajar un poco más nuestro contenido para que sea
de calidad.
25
Imagina que llega una nueva visita a tu blog y encuentra solo entradas en
las que pones:
"Este fin de semana he hecho tarta de manzana"
FOTO
"Estaba deliciosa, ¡no han quedado ni las migas!"
FOTO
"¡¡Feliz comienzo de semana!!"
¿Sinceramente crees que con la cantidad de blogs que hay en internet
volverá? Yo suelo huir de los blogs que tienen tan poco contenido, no me
cuentan nada nuevo... Y si encima el texto es plano... sin usar negritas,
colores o cursivas que me ayuden a seguir el hilo (en el caso de que haya
muuuucho texto)... pues ya sí que no vuelvo nunca más.
Una forma de optimizar la entrada anterior, además de añadir la receta o
algún truco que haga esa tarta de manzana diferente o mejor que las otras
trescientas mil, por decir una cifra, que pueda encontrar por internet,
es marcando lo importante en negrita, por ejemplo:
"Este fin de semana he hecho una tarta de manzana especial con la
receta de mi abuela, la misma que lleva usando ella toda la vida pero
mejorada"
FOTO
"Gracias a mi ingrediente secreto, que puedes encontrar al final de esta
entrada para descargar junto a la receta completa y algunos
consejillos, la textura era muy cremosa ¡no han quedado ni las migas!"
FOTO
26
"Ha sido una manera especial de terminar el fin de semana, con
una receta clásica pero diferente. Y lo mejor de todo es que la hemos
compartido con la abuela, que ha estado estos días con nosotros ¡y le ha
encantado!"
"¿Te animas a probarla y me cuentas?"
Descargar Receta (enlace)
La cosa cambia ¿verdad? ¡Pero solamente lo importante! Las frases que
consideres claves y que quieras que despierten la curiosidad de tu nueva
visita e invitarla a volver. ¡No vale poner párrafos enteros en negrita! Puede
resultar agotador intentar leer un artículo así.
Ahora vamos a analizar nuestro texto y a distinguir lo verdaderamente
importante de lo que también queremos marcar pero es secundario, es
decir, que complementa al tema principal pero no lo suficiente como para ir
en negrita.
"Este fin de semana he hecho una tarta de manzana especial con la receta
de mi abuela, la misma que lleva usando ella toda la vida pero mejorada"
FOTO
"Gracias a mi ingrediente secreto, que puedes encontrar al final de esta
entrada para descargar junto a la receta completa y algunos consejillos, la
textura era muy cremosa ¡no han quedado ni las migas!"
FOTO
"Ha sido una manera especial de terminar el fin de semana, con una receta
clásica pero diferente. Y lo mejor de todo es que la hemos compartido con
la abuela, que ha estado estos días con nosotros ¡y le ha encantado!"
"¿Te animas a probarla y me cuentas?"
Descargar Receta (enlace)
27
El tema secundario se marca en cursiva. Nuestra entrada ya va tomando
un aspecto mucho más profesional y elaborado ¿verdad?
Lo que hemos marcado en negrita es lo más importante, queremos
transmitir que es una receta de la clásica tarta de manzana pero diferente,
más especial, con un ingrediente secreto que la hace mucho más cremosa.
Hemos dejado como secundario que la receta es de nuestra abuela, con la
que hemos pasado el fin de semana y que pueden descargarla al final de la
entrada.
Si te gustan los colores, puedes dar un toque de color a lo verdaderamente
importante, aquello que quieras que llame la atención de la persona que te
esté leyendo y le haga detenerse.
"Este fin de semana he hecho una tarta de manzana especial con la receta
de mi abuela, la misma que lleva usando ella toda la vida pero mejorada"
FOTO
"Gracias a mi ingrediente secreto, que puedes encontrar al final de esta
entrada para descargar junto a la receta completa y algunos consejillos, la
textura era muy cremosa ¡no han quedado ni las migas!"
FOTO
"Ha sido una manera especial de terminar el fin de semana, con
una receta clásica pero diferente. Y lo mejor de todo es que la hemos
compartido con la abuela, que ha estado estos días con nosotros ¡y le ha
encantado!"
"¿Te animas a probarla y me cuentas?"
Descargar Receta (enlace)
Hemos resaltado en color azul: especial, cremosa, clásica pero diferente.
Los tres puntos claves en los que nos apoyamos para diferenciar
nuestra receta de todas las demás. Pero ésto, como te comentaba, no es
solo decorativo o para que nuestros lectores vean que mimamos cada
detalle... También ayuda a nuestras visitas a escanear nuestras entradas.
28
Seamos sinceros. A mí me encanta que entres a mi blog, leas mis entradas y
te quedes un ratito conmigo. Pero también sé que nuestro día a día está
cargado de otras responsabilidades y obligaciones, además de muchos
otros blogs que nos gustan. Por eso intento ir al grano en mis tutoriales,
esquematizarlos y aportar ejemplos prácticos o capturas de pantalla, para
que a simple vista sepas de qué te estoy hablando en esa entrada.
Pues cuando se trata de nuevas visitas, tenemos que esforzarnos más aún.
Si dedica media hora de su día a buscar nuevos blogs... tenemos que
conseguir que los tres minutos que dedique al nuestro, pueda "leer" varias
entradas para que se lleve una buena impresión y nos recuerde. Marcando
lo importante, secundario y puntos clave, podemos conseguirlo.
¿Y cómo puede ayudarnos en nuestro posicionamiento web para aparecer
en las búsquedas de Google?
Muy sencillo, ya tienes tus puntos claves, esos que marcan la diferencia de
tu receta, marcados en negrita. Los robots de Google, esos bichitos que
escanean nuestras entradas y las indexan... ¡no las leen enteras! Y
empiezan de arriba hacia abajo y de izquierda a derecha, por lo que
tenemos que intentar que nuestra palabra clave, el tema principal de
nuestra entrada, aparezca lo más cerca posible del título. Marcado en
negrita y optimizado, es decir, usando <strong></strong> sustituyendo a
<b></b> en la Vista HTML de nuestro editor de entradas.
Marcaremos una palabra/frase clave en negrita usando strong y una
secundaria en cursiva, usando <em></em> sustituyendo el <i></i> que
Blogger usa por defecto para las itálicas. Solo una de cada, las más cercanas
al título y que mejor resuman el contenido de nuestra entrada. En el caso
del ejemplo sería:
<strong>tarta de manzana especial</strong>
<em>receta de mi abuela</em>
Si no sabes cómo marcar las frases claves principales y secundarias, tienes
mucha más información sobre ello en esta entrada:
Optimizar las entradas del blog
¡¡Y ya tendríamos nuestra entrada perfecta y optimizada lista para ser
publicada!! Si además la acompañamos con unas buenas fotos, luminosas,
enfocadas y bonitas... ¡éxito asegurado!
29
Crear una galería de imágenes Hoy vamos a ver la utilidad de las tablas para añadir fotos a nuestro blog. Sí,
podemos añadir fotos sin necesidad de hacer tablas en HTML, pero quedan
una debajo de la otra... ¿qué pasa si queremos poner nuestras fotos en
horizontal?
Así:
Iniciativa de Bloguer@s Fandanguer@s, puedes descargar tu fondo de escritorio
AQUI
Para conseguir poner las fotos de esa manera, he seguido los pasos para crear
tablas en HTML que ya vimos en esta entrada:
Tablas HTML en Blogger
Ahora vamos a aplicar lo que vimos ese día para crear la entrada
de Bloguer@s Fandanguer@s que he usado de ejemplo ¿vale?
30
Para ello, vamos a vista HTML y abrimos nuestra tabla:
Código:
<table>
<tbody>
<tr>
¡Ya está! Tabla abierta. Vamos a insertar nuestra primera imagen. Para ello
necesitamos haberla subido antes a Picassa, Dropbox o similar. Necesitamos la
URL de la foto para poder subirla dentro de nuestra tabla.
Empezamos con nuestra primera celda.
<table>
<tbody>
<tr>
<td></td>
Ya tenemos creada nuestra primera celda, vamos a añadir la imagen.
<img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" />
Border -> 0 Nuestra imagen no tendrá ningún tipo de borde, si quieres
enmarcarla, puedes ver los tipos de bordes que puedes usar en esta entrada.
Height -> 250 Es el alto de nuestra imagen. La mía es de 250px, puedes variarlo
hasta que en Vista Previa quede tal y como quieres.
Target -> _blank Hace que se abra nuestra imagen en una página nueva
cuando pinchan sobre ella.
Width -> 350 Es el ancho de nuestra imagen. Como en el caso de height,
puedes adaptarlo a la medida que quieras.
31
Una vez modificado el código, lo añadimos a nuestra celda, así:
<table>
<tbody>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
Primera celda hecha. ¡Vamos a por la segunda! Será la imagen que
aparecerá justo al lado de la que acabamos de añadir.
<table>
<tbody>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
Ya tenemos dos imágenes. Para poner fotos en horizontal en blogger, es
importante saber cuál es el ancho exacto de nuestra entrada, si no sabes
cómo mirarlo, hablamos de ese tema en esta otra entrada.
Ahora que sabemos de cuanto espacio disponemos, adaptaremos nuestras
fotos a esa medida para que no se monten encima de nuestra barra lateral.
Vamos a por la segunda fila de nuestra tabla donde pondremos otras dos
imágenes.
32
Cerramos nuestra primera fila:
<table>
<tbody>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
</tr>
Y abrimos la segunda:
<table>
<tbody>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
</tr>
<tr>
Ahora hacemos exactamente lo mismo con las dos imágenes siguientes:
<table>
<tbody>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
33
</tr>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
Y cerramos nuestra segunda fila:
<table>
<tbody>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
</tr>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
</tr>
Antes de comprobar que todo está correcto en Vista Previa, para evitar
que Blogger nos cierre la tabla donde le de la gana, cerramos nuestra tabla:
<table>
<tbody>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
34
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
</tr>
<tr>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
<td><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></td>
</tr>
</tbody>
</table>
Pinchamos en Vista Previa:
¡¡Conseguido!!
35
Hemos creado en unos minutos nuestra primera tabla de imágenes para
mostrar en horizontal las fotos que queramos. Así queda mucho más
organizado ¿verdad?
Puedes añadir todas las filas y celdas que quieras, tal y como hemos visto. E ir
añadiendo todas tus imágenes con el mismo formato.
Tal y como está nuestra tabla, al pinchar sobre las imágenes, éstas se
abrirán en grande, pero no nos llevarán a ninguna página.
¿Cómo añadimos un enlace? Muy sencillo. Si pinchas sobre cualquiera de las
imágenes de la entrada que estoy usando como ejemplo, puedes ver que se
abren los diferentes blogs de las blogueras que han participado en la iniciativa
¿verdad? Vamos a ver que código necesitamos.
Código:
<a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"
target="_blank">CODIGO DE LA IMAGEN</a>
Y lo aplicaremos a cada una de nuestras imágenes, quedará así:
<table>
<tbody>
<tr>
<td><a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"
target="_blank"><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></a></td>
<td><a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"
target="_blank"><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></a></td>
</tr>
<tr>
<td><a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"
target="_blank"><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></a></td>
<td><a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"
target="_blank"><img border="0" height="250" src="URL DE TU
IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL
CURSOR" width="350" /></a></td>
36
</tr>
</tbody>
</table>
¡¡Hemos creado nuestra primera galería de imágenes con enlaces
externos o internos!!
37
Llamadas a la acción Hoy vamos a ver la importancia de las llamadas a la acción en sitios
estratégicos de nuestras entradas. Una llamada a la acción no es otra cosa
que invitar a nuestros lectores a hacer algo. Ese algo puede ser, desde
compartir nuestra entrada en las redes sociales, hasta seguirnos en facebook,
rellenar un formulario o apuntarse a nuestro boletín de noticias.
Si te has fijado en mis entradas, al inicio de cada una de ellas aparece la opción
de compartirlas en facebook y twitter. En la serie de entradas sobre Como ser tu
propio Community Manager, veremos la importancia de estos botones en
profundidad, pero de momento quiero decir que cada nuevo enlace que generas
en las redes sociales, posiciona mejor tu blog en Google.
El contenido de calidad, que es lo más valorado actualmente, es aquél que más
se comparte. Por tanto, si tu entrada es muy compartida, para Google será
sinónimo de calidad.
En mi caso, las llamadas a la acción más importantes son:
Suscribirse al boletín de noticias.
Seguir / Compartir en redes sociales.
Rellenar formularios de opinión, cursos, etc...
Una persona que ha leído tu entrada completamente y ha quedado contenta
con los conocimientos que has compartido, se suscribirá feliz a tu boletín para
recibir contenido interesante directamente en su email o se suscribirá
fácilmente a tus redes sociales para no perderse nada.
Pero, para ello, antes debes de haberte ganado su confianza con tu artículo
y demostrarle qué tienes contenido de interés que ofrecerle.
38
Y la mejor manera de animarles a actuar... es decírselo. Sí, así de simple. Habla
con ellos, pídeles que si les gusta tu entrada la compartan en tus redes sociales y que
si no quieren perderse nada, se suscriban a tus actualizaciones. Sé sincera y directa,
si sienten que eres transparente y honesta, confiarán en ti y no les costará nada
regalarte un par de clics más a cambio de lo que acaban de leer.
No olvides colocar tus iconos de redes sociales al final de cada entrada con
una invitación amable a seguirte, un enlace para que se suscriban a tus
actualizaciones y los botones para compartir en redes sociales. Es una
manera sencilla de conectar con tu comunidad y conocerlos un poco mejor.
RECUERDA:
Texto cuidado y optimizado, facilitando la lectura siempre.
Párrafos cortos, ortografía cuidada, palabras importantes
marcadas para facilitar el escaneo.
Títulos optimizados y que llamen la atención, originales y
diferentes.
Imágenes y Videos optimizados y adaptados a la estética de tus
entradas.
Presentación cuidada de tus imágenes, usando tablas.
No olvides las llamadas a la acción al final de tus entradas, para
crear una comunidad activa en torno a tu blog.
Espero que mi experiencia pueda serte útil y ayudarte a diseñar las
entradas de tu blog. Si piensas en tus lectores antes que en ti, ¡seguro que
lo consigues!
Muchas gracias por tu confianza,
Celia
Recommended