Blog

Los mejores y peores hostings del 2016

Se acabó el 2016 y me dejó muchas lecciones/experiencias. Entre ellas el uso de ciertas herramientas y recursos que como webmaster son indispensables, el alojamiento web aparece entre los primeras de la lista. La publicidad más poderosa es la recomendación de una persona a otra, y es así como acabamos probando uno u otro servicio de hosting. En la mayoría de los casos las reseñas van acompañadas de sus respectivos enlaces de afiliado lo cual está bien pero pone a quien escribe la reseña en el dilema de si hablar las cosas como son o favorecer al que más comisiones le ofrece.

En este breve artículo quiero compartir mi experiencia sobre las compañías de hosting que considero mejores y peores de acuerdo a mi experiencia el año pasado. Solo voy a hablar de las que he probado y tomaré como referencia principal de esta crítica el up time del servidor y su desempeño. [Leer más…] acerca deLos mejores y peores hostings del 2016

Penalización manual por spam en datos estructurados – !Cuidado con los plugins de WordPress!

Si usas WordPress puede que te seduzca la idea que agregar plugins que añadan datos estructurados a tu blog. Entre los más buscados están los de las famosas estrellas amarillas en los resultados de búsquedas. Pero si no los usas con cuidado te pueden penalizar, eso fue lo que me ocurrió y a continuación te cuento que evitar y cómo salir de la penalización.

Los plugins que usé fueron wp review y author hReview. Ambos sirven para calificar tus páginas con estrellas, normalmente de 1 a 5. Además permiten añadir datos estructurados, que no son más que pequeños trozos de código que Google interpreta y luego los muestra en sus resultados.

Pero hay algo que es considerado spam, y eso es calificarte con 5 estrellas (o con todas) en todas tus páginas o entradas. Por supuesto que si yo creo los contenidos y considero que lo que escribí está genial, tengo el derecho de ponerme 5 estrellas. Pero Google lo ve diferente y para el es una experiencia engañosa respecto al usuario.

¿Por qué penaliza Google ciertos usos de datos estructurados?

Lo que persigue Google es que quién hace una búsqueda se lleve la mejor experiencia, al menos en teoría. Por eso no ve bien que sea el mismo escritor del artículo quien se califique con la máxima puntuación… En todas sus páginas.

En su enlace hacia las directrices de calidad sobre datos estructurados señala que eso se considera una experiencia engañosa o equívoca para los usuarios. Y tiene razón, normalmente cuando uno ve las estrellas amarillas en algún resultado de búsqueda intuye que debe ser algún tipo de “premio” por tener el mejor contenido. Pocos son los que saben que en muchos casos la misma persona que escribió ese artículo se puso esas estrellas.

¿Cómo salir de una penalización manual por spam de datos estructurados?

Primero que todo deberás estar seguro que se trata de una acción manual. Para ello vas al Search Console y te desplazas hasta la sección “Acciones manuales” dentro de “Tráfico de búsqueda”.

Ahí deberías ver un mensaje en donde te dice que tipo de penalización tienes, si la tuvieras.

Una vez que hayas comprobado eso, lo siguiente será corregir el problema removiendo los datos estructurados considerados engañosos por Google. De hecho si te fijas en este punto, Google ya no los muestra en los resultados de búsqueda.

Si usas alguno de los plugins mencionados anteriormente, lo que te recomiendo como acción inmediata para salir de la penalización es que desactives estos plugins.

Finalmente debes enviar una solicitud de reconsideración para tu sitio. El enlace para enviar esta solicitud lo encuentras dentro del mismo mensaje fatídico. En esta solicitud debes explicar de manera resumida y concisa lo que has hecho para ajustar tus páginas a las normas del buscador. En otras palabras, tus acciones para enmendar el error.

Luego que lo hayas enviado solo queda esperar a que vuelvan a revisar manualmente tu sitio para comprobar lo que dijiste. Cuando lo hagan y te levanten la penalización lo sabrás porque te enviarán un nuevo mensaje diciendo que han retirado la acción manual.

Mientras más rápido envíes la solicitud de reconsideración, más rápido te levantarán la penalización.

Como puedes ver en la imagen, el mismo día que me penalizaron envié la solicitud de reconsideración. Después de apenas 5 días ya me la habían levantado. Pero en otro blog en el cual me penalizaron por lo mismo no me di cuenta a tiempo y envié la solicitud después de casi un mes. En ese caso demoró casi dos semanas. Por eso es importante estar atento a los mensajes del Search Console.

¿Cómo evitar una penalización?

Hablando específicamente de la penalización por porciones de texto enriquecido considerado spam, no uses los plugins mencionados. Y si decides usarlos asegúrate que el visitante en tu página tenga la opción de expresar su voto por el artículo.

Hay blogs en donde aún sigo usando ciertos plugins de estrellas amarillas pero no los han penalizado porque cada visitante tiene la opción de votar. Así no se considera como una conducta webmaster engañosa.

Y sobre todo cada vez que quieras hacer algo “novedoso” en tu blog, primero leer las directrices de calidad del buscador. De lo contrario podrías caer en una penzalización sin siquiera estar consciente de que haces algo malo.

¿Qué son las Stop Words? ¿Ayudan o perjudican en el seo?

Si usas WordPress y has probado el famoso plugin Yoast SEO puede que te hayas topado con la decisión de marcar o no la casilla “Quitar las palabras stop de slugs. Y esa probablemente es la razón, mi querido amigo/amiga, que te ha traído hasta este humilde artículo en busca de la respuesta… Ahora me quito mi impermeable, coloco mi pipa a un lado, dejo de jugar a Sherlock Holmes y paso a explicarte lo que quieres saber.

Stop words, ¿usarlas o no?

Respuesta corta

¿Qué son las stop words?

Palabras que por si solas no significan nada. Ignoradas al evaluar el sentido de un texto en el contexto informático.

Ejemplo: el, la los, las, un, uno, de, del.

¿Debo activar la casilla para remover estas palabras de los slugs?

Mi recomendación personal es que no actives esa opción.

No influye en tu posicionamiento el quitar o no las stop words del slug
Al quitarlas automáticamente, puede que el slug pierda sentido

Respuesta larga

Si elegiste la respuesta larga, ¡te felicito! Eres de los míos, los que hurgamos un poco más para encontrar el porqué detrás de las cosas. Prometo no aburrirte.

El término stop word fue acuñado para etiquetar a todas aquellas palabras que cuando aparecen solas no significan nada. Ejemplo: “a”, ”que”, ”los”, ”un”, “Barcelona sin Messi”… No, espera, creo que la última no va.

Tal vez me dirás, “oye, pero son preposiciones, artículos, conjunciones, etc”.

Primero. No soy un erudito de mi propio idioma, así que en eso te doy la razón.

Segundo. Un alemán llamado Han Peter Luhn, pionero en el procesamiento y recuperación de datos informáticos, consideró poco relevantes las stop words a la hora de obtener resultados exactos de una base de datos en un ámbito de analítica textual.

Eso es lo que hace el algoritmo de búsquedas de Google, en base a las palabras clave que busquemos devuelve los resultados sin darle mayor protagonismo a las stop words.

En palabras más sencillas: Si buscas “como eliminar la celulitis” (con stop word) y “como eliminar celulitis” vas a ver resultados muy similares.

Como factor semántico

En este ámbito las stop words cobran mucha más importancia. Para que un texto tenga sentido necesita llevar sus artículos, preposiciones y demás exactamente donde debe.

Si no quieres que el usuario se confunda y se vaya, debes cuando menos tener un texto semánticamente bien escrito. Es decir, las palabras donde deben ir para que todo tenga sentido y no parezca un texto escrito por Tarzán… Aunque el no sabía escribir, así que olvídalo.

Como factor off page

Aquí de acuerdo a mi experiencia las stop words juegan un poco más. Con “factor off page” me refiero exclusivamente al texto ancla que utilizas para enlazar una página.

¿Recuerdas el ejemplo de búsqueda anterior anterior?

Bueno, una de aquellas páginas es mía. Y como te dije, los resultados de búsqueda son muy similares aunque no completamente iguales. Eso es porque ha influido el texto ancla a la hora de enlazar.

Aclarando, si enlazo una página con el anchor “los vestidos de fiesta” esa página aparecerá más arriba para la búsqueda “los vestidos de fiesta” que para “vestidos fiesta”. Es decir que las stop words adquieren más relevancia en el ámbito off page.

Entonces, después de todo este revolú… ¿Se deben o no usar las stop words?

Vamos de lo más fácil a lo más enredado. En los contenidos de tus artículos es más que evidente que sí.

En los texto ancla de tus enlaces también.

En el slug de tus artículos, depende. Si tu slug está lleno de stop words y se vuelve demasiado largo (más de 60 caracteres) sería conveniente reescribirlo quitando las stop words pero manteniendo el sentido del mismo.

Google no penaliza el incluir stop words en los slugs, ni premia a quienes los quitan. Todo se reduce a que el slug no sea demasiado largo, redundante o sin sentido. Al final un slug sin stop words aporta más en términos de estética que en seo.

Cambiar propiedades CSS en Genesis parte II – Breadcrumbs

En el artículo anterior sobre como modificar la apariencia de Genesis Theme mostré una sencilla manera de agregar estilos personalizados al tema hijo. Con solo un par de líneas de código es posible agregar esa misma hoja de estilos a un nuevo blog con Genesis sin tocar el CSS originar ni hacer nada raro.

Ahora veremos como modificar alguna propiedad CSS, osea un estilo ya existente. Para ello siempre recomiendo mantener las cosas separadas, la hoja de estilos original del tema hijo y la hoja de estilos personalizados que vayamos a crear. Así, si por a o b cometemos un error, en el peor de los casos siempre se solucionará en la hoja de estilos que hayamos creado y tenemos el control total sobre ella.

Lo que vamos a utilizar:

Editor de texto plano
Gestor FTP
Navegador web
Blog con Genesis

Método universal para modificar la apariencia de un tema

Lo primero de lo primero es saber exactamente qué es lo que queremos modificar de apariencia. Para ello tenemos varias herramientas desde básicas hasta avanzadas pero con lo que viene por defecto en el navegador es suficiente.

En mi caso (Chrome), clic derecho sobre el elemento que queremos modificar y en el menú que se abre le damos Inspeccionar elemento. Y acabo de ver que en Firefox existe exactamente la misma opción 🙂

Inspeccionar elemento en Chrome — Opción Inspeccionar elemento

A lo práctico: Modificar el estilo de Breadcrumbs en Genesis

Voy a tomar como objeto de este ejemplo las migas de pan de este blog que aparecen en la parte de arriba.

Lo que quiero hacer es dejarlas en forma de botones con punta uno tras otro, los has visto?.. No? Mmm bueno dentro de poco verás el resultado de esta travesura con el CSS.

Nota: No necesitas ser un experto en CSS ni mucho menos. Si te gusta cierto estilo de un blog basta con que copies su CSS o googlees el código CSS que buscas y agregarlo a tu hoja de estilos.

Identificando el elemento HTML

Lo primero es saber que elemento HTML queremos afectar. Con el puntero nos ponemos encima de las migas de pan y damos clic derecho y luego Inspeccionar elemento.

En la parte de abajo se sombrea una línea de color azul que nos indica que la capa o div que envuelve las migas de pan tiene la clase “breadcrumb”, muy obvio.

Eso es todo lo que necesitamos saber para modificar a nuestro gusto las famosas migas. Pues de ahí en adelante todas las demás etiquetas HTML estarán dentro de la capa con clase “breadcrumb”.

Asignando los estilos a la clase

En vez de ponerme a escribir CSS lo que he hecho es hacer esta búsqueda. El primer resultado ya tiene el código del estilo que busco y solo habrá que retocar alguna cosa.

Te recomiendo, a menos que tu intención sea aprender CSS, que no reinventes la rueda y lo hagas de esta misma manera. Te ahorra mucho tiempo.

El código es el siguiente:

.breadcrumb {
background-color: #555;
border:none;
border-radius:3px;
color:#ffffff;
overflow:hidden;
padding:0;
}

.breadcrumb a{
display:block;
color:#ffffff !important;
padding: 10px 0 10px 55px;
position:relative;
-o-transition:0s;
-ms-transition:0s;
-moz-transition:0s;
-webkit-transition:0s;
transition:0s;
}
.breadcrumb a:after { 
content: " "; 
display: block; 
width: 0; 
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #555;
position: absolute;
top: 50%;
margin-top: -50px; 
left: 100%;
z-index: 2; 
} 
.breadcrumb a:before { 
content: " "; 
display: block; 
width: 0; 
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px; 
margin-left: 1px;
left: 100%;
z-index: 1; 
} 

.breadcrumb a:hover{
color:#f0f0f0;
}
.breadcrumb-link-wrap {
display:inline-block;
text-align:center;
}
.breadcrumb-link-wrap:first-child {
text-align:center !important;
}

.breadcrumb-link-wrap:last-child {
margin-right:50px !important;
}

.breadcrumb .breadcrumb-link-wrap a:hover { background: #333; }
.breadcrumb .breadcrumb-link-wrap a:hover:after { border-left-color: #333 !important; }

.breadcrumb {

background-color: #555;

border:none;

border-radius:3px;

color:#ffffff;

overflow:hidden;

padding:0;

}

.breadcrumb a{

display:block;

color:#ffffff !important;

padding: 10px 0 10px 55px;

position:relative;

-o-transition:0s;

-ms-transition:0s;

-moz-transition:0s;

-webkit-transition:0s;

transition:0s;

}

.breadcrumb a:after {

content: " ";

display: block;

width: 0;

height: 0;

border-top: 50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 30px solid #555;

position: absolute;

top: 50%;

margin-top: -50px;

left: 100%;

z-index: 2;

}

.breadcrumb a:before {

content: " ";

display: block;

width: 0;

height: 0;

border-top: 50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 30px solid white;

position: absolute;

top: 50%;

margin-top: -50px;

margin-left: 1px;

left: 100%;

z-index: 1;

}

.breadcrumb a:hover{

color:#f0f0f0;

}

.breadcrumb-link-wrap {

display:inline-block;

text-align:center;

}

.breadcrumb-link-wrap:first-child {

text-align:center !important;

}

.breadcrumb-link-wrap:last-child {

margin-right:50px !important;

}

.breadcrumb .breadcrumb-link-wrap a:hover { background: #333; }

.breadcrumb .breadcrumb-link-wrap a:hover:after { border-left-color: #333 !important; }

Ese código lo pegas en tu hoja de estilos personalizada y la subes vía FTP tal y como lo expliqué en la primera parte.

Eso es todo por el lado del CSS pero también hay que hacer un pequeño ajuste en las funciones de Genesis… No te asustes, nada del otro mundo. Solo vas en tu Dashboard de WordPress a Apariencia > Editor y ahí seleccionas functions.php de tu child theme en donde pegarás al final de todo este código:

//* Modify breadcrumb arguments.
add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {
	$args['home'] = '<i class="fa fa-home"></i>';
	$args['sep'] = '';
	$args['list_sep'] = ', '; // Genesis 1.5 and later
	$args['prefix'] = '<div class="breadcrumb">';
	$args['suffix'] = '</div>';
	$args['heirarchial_attachments'] = true; // Genesis 1.5 and later
	$args['heirarchial_categories'] = true; // Genesis 1.5 and later
	$args['display'] = true;
	$args['labels']['prefix'] = '';
	$args['labels']['author'] = 'Archives for ';
	$args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later
	$args['labels']['tag'] = 'Archives for ';
	$args['labels']['date'] = 'Archives for ';
	$args['labels']['search'] = 'Search for ';
	$args['labels']['tax'] = 'Archives for ';
	$args['labels']['post_type'] = 'Archives for ';
	$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later
return $args;
}

//* Modify breadcrumb arguments.

add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );

function sp_breadcrumb_args( $args ) {

$args['home'] = '<i class="fa fa-home"></i>';

$args['sep'] = '';

$args['list_sep'] = ', '; // Genesis 1.5 and later

$args['prefix'] = '<div class="breadcrumb">';

$args['suffix'] = '</div>';

$args['heirarchial_attachments'] = true; // Genesis 1.5 and later

$args['heirarchial_categories'] = true; // Genesis 1.5 and later

$args['display'] = true;

$args['labels']['prefix'] = '';

$args['labels']['author'] = 'Archives for ';

$args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later

$args['labels']['tag'] = 'Archives for ';

$args['labels']['date'] = 'Archives for ';

$args['labels']['search'] = 'Search for ';

$args['labels']['tax'] = 'Archives for ';

$args['labels']['post_type'] = 'Archives for ';

$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later

return $args;

}

Lo pegas y lo guardas sin miedo 😉

En este ejemplo estoy usando el icono de Font Awesome para reemplazar “Portada”. Ten en cuenta que si deseas que aparezca ese icono también debes añadir soporte para Font Awesome en tu plantilla.

Después de guardar cambios solo actualiza tu página, purga cualquier sistema de caché que utilices y borra también el cache de tu navegador para que puedas ver los cambios.

Breadcrumbs antes

Breadcrumbs despúes

¿Qué te parece el cambio? No tengo ni que preguntarlo, la versión tuneada del breadcrumb está mucho más elegante y guapa.

Conclusiones

Ese es el proceso a seguir para cambiar el estilo de cualquier elemento de Genesis. Al principio puede parecer un rollo terrible, más si eres un neófito de esto, pero después solo es cuestión de dedicarle algo de atención y podrás personalizar lo que desees.

De todos modos seguiré haciendo “How To” sobre cambiar la apariencia de otros elementos de este popular tema.

Estos cambios puede que parezcan muy laboriosos y hasta innecesarios. Pero ¿Sabes cuántos blosgs con Genesis hay por ahí?… Miles. No se tú, pero yo con solo entrar a un blog ya me doy cuenta que es hecho en Genesis por la apariencia. La mayoría instala su tema y lo deja ahí tal cual, y estos pequeños cambios en el estilo marcarán la diferencia a nivel visual y le aportarán más “personalidad” a tu blog.

Como cambiar el diseño o modificar el CSS de un Genesis Child Theme

El Genesis Framework está de moda y no solo porque sí, este marco además de ser full responsive es ligero, pero es mucho más que eso. Ofrece una manera sencilla de agregar funcionalidades al tema, quitarlas y modificar su diseño sin perder los cambios en las actualizaciones pues todo el CSS se aplica a una capa superior, el tema hijo o Child Theme.

Sin embargo para el que acaba de migrar de una plantilla normal de WordPress a Genesis, modificar la apariencia de este para darle su toque personal puede ser todo un reto, sobretodo si no cuenta con un perfil técnico.

Aquí te ofrezco un método sencillo y fácil de implementar en todos los proyectos donde uses este moderno Framework.

Lo que vamos a utilizar

Un programa FTP. Recomiendo FileZilla.
Un editor de texto plano. TextMate, Gedit o el Bloc de notas por ejemplo.

Agregando nuevos estilos para cambiar el diseño de Genesis

Los diseños que añadas a tu blog estarán disponibles para usarlos en el editor y se los puedes aplicar a imágenes, párrafos, botones y todo lo que te imagines. En un siguiente artículo hablaré de como cambiar los diseños que ya vienen definidos en tu child theme de Genesis.

1. Crear un archivo .css

Aunque también puedes combinar tus estilos en la misma hoja del tema hijo o inclusive reemplazar por completo esta, la solución que te propongo aquí es mantener tus estilos separados en una hoja de estilos aparte. Eso te da más control de los cambios (~~por si la cagas~~) y es más fácil hacer crecer tu lista de estilos así como llevártela a tus nuevos blogs con Genesis.

Esa hoja de estilos la puedes nombrar como tu quieras siempre que sea un archivo CSS válido y obviamente tenga extensión css. Luego que lo tengas listo lo debes subir vía FTP a la carpeta raíz de tu child theme (nótese las negritas).

Añadir estilos css al genesis child theme — Aquí mi CSS lo he llamado custom.css

Si no tienes un estilo en mente, te propongo es siguiente para que lo uses a manera de prueba. Se trata del estilo para un botón grande, copia y pega el código en un bloc de notas. Guárdalo como estilo.css y súbelo a tu servidor, en la carpeta que te indiqué en el párrafo anterior.

.cta{
 border-radius: 9px;
 margin-bottom: 15px;
 margin-top: 15px;
 width: 80%;
 font-family: Helvetica, sans-serif;
 font-size: 2rem;
 font-weight: bold;
 line-height: 15px !important;
 box-sizing: content-box;
 border: 0;
 color: #fff;
 padding: 20px 0;
 text-align: center;
 box-shadow: rgb(0,98,149) 0px 5px 0px !important;
 border-bottom-color: rgb(85,85,85) !important;
 background-color: rgb(0,174,239) !important;
}
.cta:hover{
 box-shadow: rgb(0,174,239) 0px 5px 0px !important;
 background-color: rgb(0,98,149) !important;
}

.cta{

border-radius: 9px;

margin-bottom: 15px;

margin-top: 15px;

width: 80%;

font-family: Helvetica, sans-serif;

font-size: 2rem;

font-weight: bold;

line-height: 15px !important;

box-sizing: content-box;

border: 0;

color: #fff;

padding: 20px 0;

text-align: center;

box-shadow: rgb(0,98,149) 0px 5px 0px !important;

border-bottom-color: rgb(85,85,85) !important;

background-color: rgb(0,174,239) !important;

}

.cta:hover{

box-shadow: rgb(0,174,239) 0px 5px 0px !important;

background-color: rgb(0,98,149) !important;

}

2. Añadir estas líneas a functions.php

Aquí viene la parte donde les tiembla la mano a los primerizos y no es para menos, modificar archivos PHP sin ton ni son puede dejar tu blog en estado de coma y en el peor de los casos aparecerá la foto de tu ex como portada del blog…

Ahora que te he metido el miedo suficiente para que lo hagas con cuidado vamos a seguir.

add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
function custom_load_custom_style_sheet() {
	wp_enqueue_style( 'custom-stylesheet', CHILD_URL . '/estilo.css', array(), PARENT_THEME_VERSION );
}

add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );

function custom_load_custom_style_sheet() {

wp_enqueue_style( 'custom-stylesheet', CHILD_URL . '/estilo.css', array(), PARENT_THEME_VERSION );

}

Nota: Si acaso usar algún CDN, CloudFlare, o algún plugin de caché no te olvides de ponerlo en modo desarrollador, borrar caché o deshabilitarlo si aplica, o sino no verás los cambios y será muy muy frustrante.

Para ver el resultado final de nuestro experimento solo debes crear alguna página y escribes el texto que desees que vaya en el botón. Luego de eso cambias a vista de Texto (esquina superior derecha del editor) y encierras el texto del botón dentro de las etiquetas <div class=”cta”></div>.
El resultado debería ser el siguiente:

CLICKEAME 😉

Si te sirvió esté DIY, pues muévelo en las redes sociales. Si usas Genesis déjame en los comentarios que te pareció, si conoces otra forma más fácil de hacerlo o si quieres que toque otro tema relacionado.

Por qué no dejar las últimas entradas en tu home de WordPress

Hace poco conversaba con un amigo sobre si era mejor tener en la página de inicio las últimas entradas del blog o una portada estática.

Después de hablar un poco concordamos en que la mejor opción es una portada estática. Pero no solo eso, sino que cualquier blog serio debería evitar el uso de una página de inicio donde se muestren sus últimas entradas… Y peor aún las entradas completas, es decir sin la etiqueta read more. [Leer más…] acerca dePor qué no dejar las últimas entradas en tu home de WordPress