Colocando el logotipo web correctamente para SEO

20

jul

En CSS, Posicionamiento

A menudo preferimos hacer un logotipo con photoshop (u otra herramienta de diseño) en vez de colocar el texto del mismo con código (X)HTML+CSS.

Un ejemplo de ello es este blog que, como muestro en la imagen a continuación, tiene por cabecera un logotipo hecho con photoshop.
Cabecera dariobf.com

El problema viene cuando queremos que el título de nuestra web sea relevante para los buscadores, por lo que en esta entrada le daremos el toque SEO que necesitamos para que sea así.

Como se trata del título de la web lo colocaremos dentro de las etiquetas H1 para que tenga máxima relevancia, quedando el código de la siguiente forma:

<h1 id="logo"><a title="Dario BF / Diseño web, GNU/Linux, mac, nuevas tecnologías y más" rel="home" href="http://www.dariobf.com/"><span>Dario BF</span></a> <small>Diseño y desarrollo web, GNU/Linux, mac, nuevas tecnologías y más</small></h1>

Como veis, le asignamos un ID (logo) a la etiqueta H1, y el resto lo insertamos normalmente: un span para el titulo del blog y un small para el tagline.

El truco de esto reside en el CSS, que será el siguiente:

#header h1 small,#header h1 a span{
	display:none;
}

Como veis, lo que hacemos es decir, a través de CSS, que no muestre (display:none) el contenido de las etiquetas span y small (titulo y tagline respectivamente)

Etiquetas: , , ,

Comenta ahora! »

Entradas relacionadas con WordPress Related Post

5

jul

En Diseño y desarrollo web

Para el posicionamiento en buscadores es mejor crear una especie de “tela de araña” entre las entradas de nuestro blog, y para eso es aconsejable incluir un “related post”.

Yo en este blog lo hice con plugin, aunque también es posible hacerlo sin él, y nos dará más agilidad dentro del blog (es lo que tengo en mente para el nuevo diseño que estoy preparando)

Para tenerlo en tu blog (sólo para WordPress) basta con Descargar el plugin e instalarlo como cualquier otro (Subirlo por FTP a la carpeta /wp-content/plugins o bien mediante el panel de administración y activarlo).

Una vez instalado tendremos que insertar la línea de código que llama a la función php del plugin allá donde queramos que salga, que será la siguiente:

<?php wp_related_posts(); ?>

Yo la puse en el “single.php” del tema, tras los tags (el sitio más recomendable).

Etiquetas: ,

Comenta ahora! »

Elementos de una plantilla web, la cabecera

30

jun

En Diseño y desarrollo web

Muchas veces hacemos sitios web completos sin siquiera pararnos a pensar en los elementos que conforman su código.

Voy a empezar a redactar una serie de entradas donde explicaré los elementos más notables de una plantilla HTML.

Comenzaré explicando lo que se llama “cabecera” o “header” de un sitio web; en resumidas cuentas, los elementos básicos y fundamentales que se encuentran entre las etiquetas

 <head> </head>
  • DOCTYPE: es un elemento imprescincible, ya que dice el tipo de código HTML / XHTML que se va a encontrar en el sitio. Sirve para que el navegador muestre el sitio de forma correcta.
  • TITLE: de forma rápida podemos decir que contiene el título del sitio.
  • META: Hay varios tipos, sirven para indicar al visitante (navegador, dispositivos y demás) diferentes características sobre el sitio web; desde descripciones hasta idioma, codificación…
    • META Content-Type: Indica la codificación del texto. Las más utilizadas son UTF-8 e ISO-8859-1. Lo más recomendado es UTF-8 ya que es internacional y cada vez se utiliza más.
    • META Description: Es una pequeña descripción de lo que contiene la página (la página mostrada en concreto, no el sitio). Debería ser, como el TITLE, único en cada página para una mejor estructuración del sitio.
    • META keywords: Son palabras, separadas por comas, que tienen relación con el contenido de la página, digamos que son las palabras clave de la descripción.
  • LINK Stylesheet: Dirección URL del CSS (Hojas de Estilo). Aunque no está presente en todas las páginas, sí es recomendable la maquetación con CSS.
  • Etiquetas:

    Comenta ahora! »

Alineación de imágenes de wordpress en nuestro theme

8

jun

En Diseño y desarrollo web

Ahora que estoy preparando un tema nuevo para el blog, me doy cuenta que al insertar imágenes y alinearlas directamente desde wordpress falla la alineación (la inserta siempre a la izquierda y no flotante).

Basta con mirar un poco por encima el tema default de wordpress para darse cuenta que hay unas propiedades que marcan estas pautas.

El código que hay que insertar en el CSS del tema que estamos creando es el siguiente:

Código:

/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
 
.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
 
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
 
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */
 
/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}
 
/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
 
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
 
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}
 
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}
 
.alignright {
	float: right;
	}
 
.alignleft {
	float: left;
	}
/* End Images */

Insertando eso al final de nuestro código la alineación que se gestiona desde el panel de administración de wordpress volverá a funcionar.

Etiquetas: ,

Comenta ahora! »

Utilizando el directorio de fuentes de Google

25

may

En CSS, Diseño y desarrollo web

Se algo caracteriza el diseño de un sitio web es sin duda su tipografía, su fuente.

¿Quien no ha querido alguna vez escribir su sitio con una fuente completamente diferente a la que traen los sistemas operativos por defecto?

Ahora es fácil hacerlo gracias a Google y sus colaboradores, que ponen a nuestro alcance un repositorio de fuentes online de donde podremos cargar las fuentes para nuestro sitio web.

¿Cómo hacerlo?
Podría deciros el código, que lo copiaseis y pegaseis, pero voy a hacer algo mejor, os voy a contar desde dónde se saca dicho código.

Para ello hay que acceder al repositorio de fuentes de Google, ojear las fuentes por encima y seleccionar una (pinchar sobre ella).

En la página que se abrirá hay que seleccionar “Get de code” y ahí teneis los dos códigos a insertar en la plantilla de vuestro sitio.

El primero corresponde a la etiqueta que va entre el <head> y </head> y el segundo se corresponde con el código CSS que va en vuestra hoja de estilos.

Con esto tendreis una fuente completamente diferente a las más utilizadas en la web.

Etiquetas: , ,

Comenta ahora! »

Archivos

  • Categorías