Fix Render Blocking & Minify Plugin Errors:
Tracking code 'analytics' Not found html Tag: <!--FRBM PLACE-HEADER-SCRIPTS-1-START-->
Tracking code 'piwik' Not found html Tag: <!--FRBM PLACE-HEADER-SCRIPTS-1-START-->
Blog de Pedro Reinahttps://pedroreinarojas.comInformática, Seo, Electrónica y mas...Mon, 12 Feb 2018 21:21:12 +0000es-EShourly1https://wordpress.org/?v=4.9.4Comprimir y descomprimir en tar gz zip y gzip desde la linea de comandos (Unix/Linux)/sin-categoria/comprimir-y-descomprimir-en-tar-gz-zip-y-gzip-desde-la-linea-de-comandos-unix-linux//sin-categoria/comprimir-y-descomprimir-en-tar-gz-zip-y-gzip-desde-la-linea-de-comandos-unix-linux/#respondMon, 12 Feb 2018 17:19:53 +0000/?p=766Chuleta para comprimir y descomprimir en tar gz, zip y gzip Todos los comandos tienen los argumentos para trabajar con el contenido indicado en path y sus subdirectorios. Son comandos rápidos para comprimir y descomprimir en tar gz y otros, desde la consola de comandos. Si algún comando devuelve error…

Quiero leer más...

La entrada Comprimir y descomprimir en tar gz zip y gzip desde la linea de comandos (Unix/Linux) se publicó primero en Blog de Pedro Reina.

]]>
Chuleta para comprimir y descomprimir en tar gz, zip y gzip

Todos los comandos tienen los argumentos para trabajar con el contenido indicado en path y sus subdirectorios.
Son comandos rápidos para comprimir y descomprimir en tar gz y otros, desde la consola de comandos.

Si algún comando devuelve error por no encontrar el mismo, instalaremos los compresores:

sudo aptitude install gzip bzip2 unzip unarj zoo tar unrar lha

Empaquetar y desmpaquetar con tar

tar -cvf nombre_fichero.tar /path/
tar -xvf nombre_fichero.tar

Comprimir y decomprimir en tar gz

tar -czvf nombre_fichero.tar.gz /path/
tar -xzvf nombre_fichero.tar.gz

Comprimir zip

zip nombre_fichero.zip /path/
unzip nombre_fichero.zip

Comprimir gzip

gzip -9 fichero
gzip -d nombre_fichero.gz

Información extraida de https://linuxzone.es/metodos-de-compresion-y-descompresion-en-linux/

Para más información sobre los argumentos disponemos de la web y de los manpage de linux (man comando)

La entrada Comprimir y descomprimir en tar gz zip y gzip desde la linea de comandos (Unix/Linux) se publicó primero en Blog de Pedro Reina.

]]>
/sin-categoria/comprimir-y-descomprimir-en-tar-gz-zip-y-gzip-desde-la-linea-de-comandos-unix-linux/feed/0
Ordenador HP ¿Porque no comprar uno?/personal/cosas-que-no-me-gustan/ordenador-hp//personal/cosas-que-no-me-gustan/ordenador-hp/#respondThu, 08 Feb 2018 17:23:09 +0000/?p=739Ordenador HP ¿Porque no comprar uno? Hay muchas razones para no comprar un ordenador HP. Los muchísimos foros donde la mayoría de problemas están en la mala calidad de la electrónica de HP. Los muchísimos foros de problemas de portátiles, donde la mayoría es gente que ha comprado un ordenador HP, y…

Quiero leer más...

La entrada Ordenador HP ¿Porque no comprar uno? se publicó primero en Blog de Pedro Reina.

]]>
Ordenador HP ¿Porque no comprar uno?

Hay muchas razones para no comprar un ordenador HP.
Los muchísimos foros donde la mayoría de problemas están en la mala calidad de la electrónica de HP.
Los muchísimos foros de problemas de portátiles, donde la mayoría es gente que ha comprado un ordenador HP, y los mayores problemas se basan en la mala calidad del chasis de plástico y por la mala refrigeración y sobrecalentamiento de sus cpus.

Hp pavilionAntes de comprar un ordenador HP, y si algún chico simpático de Media Market o similares, te dice que todo va a ir muy bien y que tienes 2 años de garantía, siento decirte, es mentira cochina, y ellos lo saben.

Cuando compras un ordenador HP, o cualquier dispositivo informático HP, impresoras, scanners, lo que sea, que sepas que sólo tienes 1 año de garantía, y con malas maneras y malos modales.

Llamando a HP

Yo personalmente llamé al SAT central que está en Sant Cugat del Vallés, para contrastar esta información solamente, y me atendió por teléfono una chica que a priori ya denotaba en su voz y sus formas las muy malas ganas, cuando le dije que el interés de mi pregunta era para saber si comprar un ordenador HP o de otra marca, le puso menos ganas todavía, y a la pregunta clave me dijo, que después de 1 año me tenía que buscar la vida.

Conclusión

Si el título decía “2 razones básicas porque no comprar nunca un ordenador HP“, las razones son:
– Calidad nefasta y contrastable en cientos de casos reales y opiniones en foros varios.
– Garantía engañosa, sólo ofrecen 1 año, aunque el vendedor diga 2, y la atención parece dejar mucho que desear.

Páginas como https://www.meneame.net/story/frustrado-enfadado-hp, donde se dice:

Mañana se cumplen 100 días desde que puse mi primera incidencia en el servicio técnico de HP y aún no está resuelta. ¡100 días!

En https://es.answers.yahoo.com/question/index?qid=20090511164750AAa31eP
Como titular:

¿Por que son de tan mala calidad las laptops hp pavliion?

En http://www.deguate.com/foros/messages/10478/78640.html?1320333363
Una larga lista de descontentos, como:

Asi es experiencia propia en dos años compre dos laptops HP, las mas recientes, nuevas en su caja, a las dos se les arruino el disco duro, hubo que comprar nuevos, a otra se le arruino el cargador, en fin las maquinas son preciosas muy bonitas, pero no sirven, ahora bien tengo una mi Dell desde hace cuatro años cuando estaba en la U y ahi sigue al nivel de estas HP, no se lentea nunca se me ha arruinado y pasa todo el dia trabajando, recomendada

Hay un sinfín de foros donde incluso muchos han reclamado HP y se han encontrado reacciones de lo más ortodoxas y sin ningún tipo de soporte, o atenciones muy precarias.
Está claro que este grande los fabricantes de ordenadores no está por contentar a sus clientes, les va bien su linea de ventas y todo lo que no sean beneficios no les preocupa, ni tampoco se les despeina el flequillo por la queja de sus clientes.

No hablo por experiencia propia, pues nunca he comprado un ordenador HP, pero si he tenido 2 o 3 impresoras de esta marca, y la verdad, bastante malas, ni de tintas ni de láser, duran poco.

Así que, antes de caer en una tentadora oferta, pregúntale a tu vendedor “que garantía tiene este ordenador de HP?”, y oirás la típica frase de “todos los productos tienen 2 años de garantía por ley”, pero es que resulta que HP se ríe de nuestra legislación, y gracias al éxito de sus carcajadas, ya hay otras marcas siguiendo el mismo camino, y como es lógico otras marcas estarán pensándolo.
Puedes comprobarlo con tus propios medios, y a sabiendas de esto puedes decirle a tu vendedor que está totalmente equivocado.
Aunque es problable que si vuelves 2 meses después al mismo vendedor te volverá a repetir lo mismo, son las herramientas del comercio que están al día, no importa si te engañan, las ventas justificas los medios y los métodos.

Así que…. ten cuidado antes de comprarle un ordenador a HP

Y si ya tienes tu ordenador de HP, cuéntame tu experiencia.

La entrada Ordenador HP ¿Porque no comprar uno? se publicó primero en Blog de Pedro Reina.

]]>
/personal/cosas-que-no-me-gustan/ordenador-hp/feed/0
WordPress multisitio ¿merece la pena?/wordpress/wordpress-multisitio//wordpress/wordpress-multisitio/#respondThu, 08 Feb 2018 17:14:11 +0000/?p=733WordPress multisitio WordPress es el de los más populares (si no el más) de todas las plataformas para crear blogs. Wordpress multisitio o WordPress multisite, o también conocido como WordPress Red, WordPress Network, etc.. que es todo lo mismo, propone y presume de facilitarnos muchas tareas. ¿Cuales son esas tareas…

Quiero leer más...

La entrada WordPress multisitio ¿merece la pena? se publicó primero en Blog de Pedro Reina.

]]>
WordPress multisitio

WordPress es el de los más populares (si no el más) de todas las plataformas para crear blogs.
Wordpress multisitio o WordPress multisite, o también conocido como WordPress Red, WordPress Network, etc.. que es todo lo mismo, propone y presume de facilitarnos muchas tareas.
¿Cuales son esas tareas realmente y hasta que punto nos ayuda a gestionar el qué?

WordPress multisitio de entrada requiere una curva de aprendizaje un poco alto, ya que requiere de modificar el config.php y saber que estamos haciendo, requiere una gestión previa de registros DNS para dirigir los dominios y subdominios hacia el mismo lugar.

¿En que consiste WordPress multisitio o como funciona?

Consiste en centrarnos en una de las instalaciones de wordpress, considerarla instalación principal, convertirla en WordPress multisitio y mover todos los datos de todos nuestros worpdress a éste.
Para activar el modo de WordPress multisitio sólo necesitamos activar la opción multisitio en su correspondiente fichero config.php. (se entiende que lo activaremos sólo en el sitio principal)
Una vez que WordPress se reconoce a si mismo como WordPress multisitio, aparecerá una nueva opción llamada “Sites” o “Sitios”.

Cada vez que creamos un nuevo sitio, WordPress va a crear un nuevo conjunto de tablas en su propia base de datos (hablo de la base de datos del WordPress principal), y una nueva carpeta en la carpeta “Uploads/Sites”.
Ambas cosas tendrán un prefijo numérico coincidente, si es el sitio 27, las tablas tendrán este prefijo 27 y en uploads/sites se creará tablas con este prefijo 27.
wordpress multisite tablas
La asignación de sitios y el prefijo numérico para cada uno de ellos los encontraremos indexados en una nueva tabla llamada sites y/o blogs.

Así que, dicho esto, nos podemos olvidar de crear nuevas bases de datos y sus permisos y accesos y sus wp_configs, cosa que puede parecer buena idea y a mi no me convence demasiado, y detallaré más adelante el porqué.

¿Y que nos queda después de crear todos los sitios? pufff… pues buscarnos la vida porque los datos no se mueven sólos, ni los plugins, ni los temas, todo esto entra en esa curva de aprendizaje, que no resultará fácil según la habilidad de cada uno, y como poco y para el más hábil resultará una tarea odiosa y engorrosa.

Instalación de Wodpress multisitio – Migrar los datos de cada a site a nuestro Wordpres multisitio principal

Sí, porque como ya he dicho antes, nos lo tenemos que currar, eso, o buscar alguien que nos realice dicha gestión, o algún fantástico plugin que nos lo haga sin arruinarnos los datos.

La forma rápida y manual es:
– Trasladar los ficheros de forma manual de los sites “hijos” al site prinincidenciacipal.
– Trasladar el contenido de las bases de datos de los sites “hijos” al site principal.

El traslado de ficheros son:
– El contenido de la carpeta uploads hacia uploads/sites/{número de site}
– El contenido de plugins a la carpeta de plugins de nuestro WordPress multisitio principal.
No recuerdo bien donde van los themes del WordPress multisite principal, pero seguro que veremos alguna carpeta que lo indica claramente, de encontrarlo hacemos lo mismo, traspasar el contenido de los “hijos” al “padre”.

El traslado manual de las bases de datos se realiza de la siguiente manera:
– Exportar la base de datos de cada site a un fichero sql.
– Abrir el fichero exportado, y prefijar el nombre de todas las tablas para que coincida con los nombres que nuestro WordPress multisitio ha asignado en su base de datos. (Cualquier editor que nos permita un reemplazar cadenas de forma automática)
– Hacer un volcado o import de cada uno de esos ficheros sql modificados a nuestro WordPress multisitio principal.

Instalación de Wodpress multisitio – Redireccionar nuestros sites a nuestro WordPress multisitio principal

Porque esto tampoco es automático, algo o alguien debe encargarse que el tráfico entrante vaya a nuestro WordPress multisitio principal y este se encarge de gestionar las peticiones y entregar el contenido que corresponde.

Esto se puede hacer de 2 formas:
– Gestión de Dns:
No quiero extenderme en un tema tan profundo como gestionar los registros de Dns, consiste básicamente en jugar con las reglas que dirige el tráfico, o dicho de otra forma, la relación entre nombres y direcciones ip’s.
– A bocajarro y de forma sencilla para los novatos:
Para no entrar en el espinoso camino de los Dns.
Sustituir cada carpeta física de WordPress de cada site “hijo”, por un enlace simbólico(linux) o acceso directo(Windows) que apuntará a la carpeta principal del WordPress multisitio “padre”.
Puede parecer sucio, pero es rápido y eficiente y muy rápido y sencillo de gestionar y mantener.
Pero esto sólo es aplicable para los WordPress que estén en el mismo servidor que el WordPress multisitio principal, lo que estén fuera tendrán que llegar con ayuda de los Dns.

Instalación de Wodpress multisitio – Conclusión

¿Mucho trabajo no?
Como veis no es tan fácil como nos lo pueden pintar en muchos blogs, y toda esta faena si todo sale bien a la primera.
Hablar de lo que es bueno es fácil y gratuito, y a muchos bloggers les da beneficio y tráfico decir que es fácil, las proposiciones son rápidas y gratuitas, pero el que pone el tiempo y el trabajo es el usuario, y que no siempre acaban bien esas buenas pretensiones.
De entrada ya el copiar todos los sites (ficheros y bases de datos) nos requiere un tiempo y una atención que seguramente nos va a requerir varias horas y un poco de riesgo.

Una vez terminados ese insumo esfuerzo, que nos pintan como algo sencillo, veremos en el backoffice(panel de control):

  • Un sitio donde nos facilita cambiar de un WordPress a otro, cada uno de ellos nos va a pedir el login que corresponde a cada lugar, nada de login unificado.
  • Todos los plugins en la misma lista, donde en el WordPress multisitio principal podremos elegir si compartimos “en red” o no. Si compartimos en red estará activado para todos los sites “hijos”, en caso contrario cada site podrá activar o no para su propio uso y cuenta.
  • Si no recuerdo mal también veremos todos los themes y podremos seleccionar. (Tampoco se puede decir que sea una gran ventaja)

Y si todo a funcionado bien en el tema mencionado “redreccionar los sites”, cada dominio/url seguirá abriendo cada site como si no hubiesemos hecho nada.

Se supone que hay plugins que pueden actuar con las mismas prestaciones para todos los dominios, como un “todo en uno”, pero ojo, esa ventaja a veces se convierte en problema, que luego comento el porqué.

Bajo mi percepción personal sólo me ofrece 2 ventajas reales:

  • Que los ficheros físicos se puedan sustentar en una única estructura.
  • Que los plugins funcionen en común con todos los sites.

Mi realidad y percepción objetiva.

  • Tener una lista desplegable de los sitios “hijos”, no me ahorra nada, también puedo tenerlo en una lista de favoritos o carpeta con enlaces.
  • Hay plugins que no son compatibles en este modo de WordPress multisitios, como es el caso de “WP Super Cache“, y hay otros plugins que se ofrecen en este modo y no logran funcionar bien, como el ejemplo de “W3 Total Cache“.
    De hecho la mención de 2 plugins distintos de caché no es casual, y fue este el que desechó mi idea de renunciar al WordPress multisitio, no conseguí que ningún caché me funcionara bien en este modo de Network.
  • En cuanto al espacio ahorrado por usar una sóla estructura de ficheros  y directorios de WordPress, hay otra forma parecida de hacerlo, aunque no se ahorre tanto… con un truco que he publicado en este otro artículo ->  http://www.termostatodiferencial.com/alternativa-a-wordpress-multisitio-ahorro-de-espacio-unificando-la-estructura-de-ficheros/

Y en resumen, las ventajas del WordPress multisitio pueden ser muy subjetivas depende de cada persona y sus necesidades reales, pero yo no veo tanta magia en este modo como para decir realmente “me facilita las cosas”.
Es cierto que el concepto que tenemos del “en modo Red” es muy tentador, pero lo que vas a obtener del WordPress en Red no es tanto como lo que uno puede imaginar y esperar.

Instalación de Wodpress multisitio – Desventajas

Varias, tampoco voy a decir que demasiadas…
La curva de aprendizaje en algo que nos puede dar más problemas que ventajas, puede ser un punto destacable a analizar.
El hecho de que gestione todos los sites en una sóla base de datos, a mi me sugiere 5 cosas:
1- Menos rendimiento.
2 -Más fragmentación.
3 – Más inseguridad (si alguien accede a esta única base de datos ya está accediendo al contenido de todas tus webs en un sólo golpe).
4. El peso de la base de datos.
5. La integridad y riesgo de que todo se vaya al traste por una única corrupción de datos.
Dicho de otra manera, es como poner toda la carne en el asador.

No he probado la diferencia de rendimiento, pero es obvio que no será lo mismo dirigir las peticiones y recoger las consultas a varias bases de datos a la vez(modo normal), que hacerlo todo hacía la misma base de datos(modo multisitio).
Aunque mysql esté más o menos preparado para eso, es como comparar a descargar un único fichero de 10Gigas a descargar 10 ficheros de 1Giga, o como comparar a poner en una intranet un super servidor a varios servidores balanceados trabajando en grupo.

Más desventajas, ¿que pasará con ese plugin fantástico que hemos comprado con tanta ilusión, que nos apañaba una tarea importante, y ahora en modo Wordrpess multisitio no funciona? pues no se… No podemos exigir nada al autor, ni tampoco él se va a poner las pilas para hacernos el favor.

Más desventajas, no podemos unir aquellas webs que se alojan en otros servidores.

Más desventajas… si se rompe un wordpress o algún plugin entra enconflicto o en bucle infinito, nos va a repercutir a todas las webs a la vez.
Si se rompe esa única base de datos, el tiempo que tarde en volver a estar en producción, será el equivalente a perder todos los visitantes, todos los beneficios de adsense, todas las ventas de todas nuestras tiendas online, y todo de todo durante todo ese tiempo, porque hemos convertido nuestros en un único.

Otra desventaja, aunque tampoco sea algo grave, pero me va a costar mucho más si el día de mañana quiero llevarme un único site a otro lugar.

¿Entonces? ¿Hasta que punto merece la pena convertir todos nuestros WordPress en WordPress Multisitio?
¿Son todos los riesgos los que ya conocemos? ¿o pueden surgir más sorpresas?

 

La entrada WordPress multisitio ¿merece la pena? se publicó primero en Blog de Pedro Reina.

]]>
/wordpress/wordpress-multisitio/feed/0
Problemas con Let’s Encrypt en VestaCP/vps/vestacp/lets-encrypt-en-vestacp//vps/vestacp/lets-encrypt-en-vestacp/#respondFri, 05 Jan 2018 04:03:19 +0000/?p=547Problemas varios con Let’s Encrypt en VestaCP Si tu certificado Let’s Encrypt en VestaCP no se está renovando (Fuente de Aitor Roma de Redaven Systems) sudo apt-get install python-certbot-nginx -t stretch-backports Y metemos en el cron: 0 0 1 * * certbot –standalone renew –pre-hook “service nginx stop” –post-hook “service…

Quiero leer más...

La entrada Problemas con Let’s Encrypt en VestaCP se publicó primero en Blog de Pedro Reina.

]]>
Problemas varios con Let’s Encrypt en VestaCP

Si tu certificado Let’s Encrypt en VestaCP no se está renovando

(Fuente de Aitor Roma de Redaven Systems)

sudo apt-get install python-certbot-nginx -t stretch-backports
Y metemos en el cron:

0 0 1 * * certbot –standalone renew –pre-hook “service nginx stop” –post-hook “service nginx start”

Si tu certificado Let’s Encrypt en VestaCP te da el odioso 404 y dice no encontrar well-known/acme-challenge

Lets encrypt en vestacp error well-known/acme-challenge

Lets encrypt en vestacp error well-known/acme-challenge

No vayas a buscar el well-known en vuestro disco o VPS, porque realmente no es una ruta física.
Si hacéis
cat /home/{user}/conf/web/{dominio}.conf_letsencrypt
Obviamente lo que está entre llaves son los valores de cada instalación

Y veréis allí dentro algo como:
location ~ "^/\.well-known/acme-challenge/(.*)$" {
default_type text/plain;
return 200 "$1.zy5Jn0Qu7F3LGXzVAp8Q0GzpHbJMlBJO2QFkcUwarzS";
}

Esto es lo que el servidor entrega como ruta emulada.
Recoge la petición y responde con un 200 y su respectiva cadena del certificado.

Si habéis desvinculado el SSL Let’s Encrypt desde el panel Vesta, mal! porque ya no os volverá a dejar asignarlo.
Tendréis que volver a vincularlo de forma manual modificando ficheros, o restaurar la última copia donde estaba este vínculo.

Si no habéis desvinculado el SSL Let’s Encrypt, la solución está aquí:

cd /usr/local/vesta/data/templates/web
wget http://c.vestacp.com/0.9.8/rhel/force-https/nginx.tar.gz
tar -xzvf nginx.tar.gz
rm -f nginx.tar.gz

Esto creará una plantilla NgInx que dirá “forzar https”, y al asignar dicha plantilla al dominio problemático, dejará de darnos esos errores.

La entrada Problemas con Let’s Encrypt en VestaCP se publicó primero en Blog de Pedro Reina.

]]>
/vps/vestacp/lets-encrypt-en-vestacp/feed/0
Plugin para PageSpeed Insights de Google en WordPress (FRBM)/seo/seo-wordpress/plugin-para-pagespeed-insights//seo/seo-wordpress/plugin-para-pagespeed-insights/#respondWed, 20 Dec 2017 23:47:47 +0000/?p=276Este plugin para PageSpeed Insights, fabricado para WordPress, está específicamente diseñado para conseguir el 100/100 de su métrica. Objetivo: Acelerar las páginas y sacar nota en el exámen de Google No he podido dedicarme a hacer blogs ni buscar tráfico. Como programador y el poco tiempo libre que tengo, no he…

Quiero leer más...

La entrada Plugin para PageSpeed Insights de Google en WordPress (FRBM) se publicó primero en Blog de Pedro Reina.

]]>
Este plugin para PageSpeed Insights, fabricado para WordPress, está específicamente diseñado para conseguir el 100/100 de su métrica.
Objetivo: Acelerar las páginas y sacar nota en el exámen de Google

No he podido dedicarme a hacer blogs ni buscar tráfico.
Como programador y el poco tiempo libre que tengo, no he podido dedicar mi tiempo a escribir y generar contenido.
Fabriqué mi propio colector solar, y a posterior mi propio termostato solar.
Me sirvió como excusa para abrir mi primer blog, en un entonces en el que apenas sabía casi nada de seo.
El proyecto fue un éxito, pero el blog NO.
Pero ahí está, haciendo presencia, y generando algo de dinero con la publicidad AdSense de Google.

Ahora que tengo más tiempo estoy generando algo de contenido e intentando posicionar algunas páginas.
Creo que me enfrento al mismo problema que todos los bloggers en su inicio, poder ofrecer mucho ante un escenario de butacas vacías.
He aprendido gestionar dominios, hostings, optimizar servidores, y todo ese entramado.
Y como este es un oficio de nunca acabar, y unas cosas te llevan a otras, pues ahora intentando comprender que nos pide Google y como dárselo e intentar ser el primero.

Cuando te metes de fondo en la optimización del html, el seo-on-page, y ahora la puntuación del Google Page Insight, aprendes un montón de cosas.

Todos somos testigos que para conseguir que una página tenga audiencia, se necesitan muchas cosas.
Pero todo empieza por tener una página bien optimizada a nivel de seo-on-page, y una web bien optimizada a nivel de estructuración y rendimiento.

Si bien generar calidad de texto acorde a un tema determinado es más o menos sencillo, generar un HTML a gusto de los buscadores no lo es tanto.

Al final son muchas reglas que hay que cumplir, y todo require muchísimo tiempo.
No es sólo tiempo para tus propios proyectos, es tiempo que se ha de repetir de nuevo en cualquier proyecto ajeno.
Por eso me he plantado fabricar un plugin para PageSpeed Insights.

Seo en WordPress

En el caso de un WordPress, aunque es una plataforma común en muchas webs, es el “Theme” lo que determina toda la estructura de una página, condicionado también por los plugins.
El que conoce WordPress ya sabe que el Theme es literalmente el esqueleto.

Uno de los males comunes son los temas mal diseñados, o los temas modernos de WordPress con automatismos y asistentes para personalizar el diseño.
Muchos de ellos imprimen de forma estática estos valores a posterior de las hojas de estilos.
Esta técnica es correcta, siendo los estilos el diseño predeterminado, y los siguientes valores las sobre-escrituras de los mismos.
El problema está en cuando queremos mover algún estilo.

Ejemplo de ésto. Hay una técnica popular para acelerar páginas, que es mover todos los estilos al pie de página.
Lo podemos ver en una simple búsqueda.
¿Que pasa cuando un estilo pasa al pie, y la sobreescritura de alguno de estos se queda en la cabecera?
Pues que perdemos esa propiedad de personalizar el tema.

El Seo en WordPress no está sólo en el contenido del texto, también está en la estructura HTML.
Por eso encontramos a muchos SEO diciendo cosas como “Tema optimizado para el SEO”.

Este es uno de los problemas cuando queremos optimizar una página ante el Seo y ante el PageSpeed de Google.
Y mi plugin para PageSpeed Insights tiene una herramienta específica para eso.

Influencia de Google PageSpeed Insights

A día de hoy nadie sabe hasta que punto es determinante o no sacar la máxima puntuación de Google PageSpeed Insights.
Quien se dedica a ello dice que es muy importante.
Quien tiene un tema bien seo optimizado que vender también dirá lo propio.
Otras web de perfiles profesoinales en el seo que no tocan el tema tan de cerca, dicen lo contrario.

Dado que Google es dueño y señor del buscador de Google, y es él y sus algoritmos quienes deciden donde situar a cada uno, lo mejor es sacar la puntuación máxima posible.

En mi optimización 100/100, ya dije en otra página que a corto plazo no he notado una mejora notable en mi seoposición, pero si he notado un incremento en el Adsense de Google.
Pero es pronto para saber si mi optimización puede mejorar mi status en el Serp.

Voy a estar generando contenido al tiempo que iré optimizando con este plugin y experimentando con él.

Mi propio Plugin para PageSpeed Insights para corresponderle y ser su sumiso

En el aprendizaje super acelerado de Seo y optimizaciones varias, el PageSpeed es el que más complejo.
Cuando crees entender una cosa, tocas de aquí y rompes de allá.

He dedicado unos 2 meses para entender cada cosa y practicar con varios ejemplos, distintos temas, distintas situaciones, y en instalaciones distintas.

He puesto un gran esfuerzo en hacer capaz de procesar y manipular cada cosa desde este plugin.
Porque no es eficiente ni razonable hacer cambios manuales en cada instancia distinta, y bajo el riesgo de perder cosas por actualizaciones y cambios.

La idea de este plugin para PageSpeed Insights es conseguir ejecutar esos procesos de conversión, de forma automática y auto-regenerable.

El nombre que he puesto a este plugin para PageSpeed Insights, es “Fix Render Blocking & Minify”.
Por nada en especial, no se me ocurría ningún nombre.

¿Que hace este plugin para PageSpeed Insights por mi?

Os pongo un video donde demuestro como optimizo completamente una web en pocos minutos, y acontinuación os explico como funciona este plugin.

Si te interesa este plugin y estar al tanto de su desarrollo o quieres utilizarlo, suscribrete

Se instala en el código Html 5 franjas en la cabecera, y 5 franjas en el pie de página, para poder priorizar el lugar de cada objeto o grupos de objetos, incluso mover pedazos de bloques Html allí.
Es como un cajón con separadores.

En la siguiente descripción, se trata a los objetos como “manejadores”.
Manejador, es la traducción de “HANDLE”.
Handle es lo que utiliza wordpress para mencionar a cada objeto de estilo o script. Cada uno de ellos tienen un nombre único.

Funcionalidades del plugin para PageSpeed Insights

General

  • Proxy para dar y quitar funcionalidades a todo el plugin entero según sea la página/entrada, tipo de post, nombre del objeto (manejador/handle)
  • Exportar e Importar la configuración, que me sirve tanto como para tener un backup mientras juego con varias opciones, o para clonar la misma configuración entre varios sites.
  • Limpieza de caché (Sí, esto tiene su propio caché)
  • Restaurar valores de fábrica.
  • Una lista de sitios para hacer testings.
  • Activar/Desactivar “Compresión Gzip”, “Header expires”, “Accept encoding”

Depurar (Debug)

  • Rastreo, vuelca en ficheros mensajes relacionados con el runtime. (Con sistema LogRotate)
  • Volcado de página. Nos permite ver el HTML real y podemos hacer simulaciones con cambios frente a los servicios que nos testean.
  • Reporte en el pie de página, la lista de objetos procesados y sus propiedades.

Procesamiento de Styles

  • Proxy de reglas adicionales aplicados a la carga y procesamiento de “styles”.
  • Posicionamiento automático preferente de todos los manejadores.
  • Posicionamiento forzado de los manejadores listados.
  • Posicionamiento especial (antes o después de cualquier tag o texto html).
  • Priorización de orden por nombres de manejadores listados.
  • Modos especiales: Asignar a lista de manejadores modo de “combinado” o “enlinea”
  • Minificar Css

Procesamiento de Scripts

  • Proxy de reglas adicionales aplicados a la carga y procesamiento de “scripts”.
  • Posicionamiento automático preferente de todos los manejadores.
  • Posicionamiento forzado de los manejadores listados.
  • Posicionamiento especial (antes o después de cualquier tag o texto html).
  • Priorización de orden por nombres de manejadores listados.
  • Asignación de “defer” “asynch” o ambos, a una lista de manejadores.
  • Modos especiales: Asignar a lista de manejadores modo de “combinado” o “enlinea”
  • Asignación de “defer” “asynch” o ambos, a los objetos del tipo “combinado”
  • Minificar Js

Procesamiento de Html

  • Proxy de reglas adicionales aplicados a la carga y procesamiento de “scripts”.
  • Minificar Html
  • Desplazamiento de código HTML (me resuelve el problema de cuando algún tema imprime de forma estática su sobre-escritura de estilos)
  • Inserción de código adicional Scripts en, Inicio-cabecera, Fin-cabecera, Inicio-pie, Fin-pie
  • Inserción de código adicional Styles en, Inicio-cabecera, Fin-cabecera, Inicio-pie, Fin-pie

Caza de enlaces externos

  • Lista de patrones url’s para cazar enlaces externos:
    Captura los enlaces, los descarga, opcionalmente los minifica, y los cachea.
    Un enlace local se puede manipular y se le aplica el expire-headers
  • Cazar en los objetos cacheados:
    Los enlaces externos pueden contener otros enlaces externos.

Tracking de Google Analytics

  • Proxy de reglas adicionales para la aplicación o no del tracking de Google Analytics.
  • Código UA.

Tracking de Piwik

  • Proxy de reglas adicionales para la aplicación o no del tracking de Piwik.
  • Dirección del servidor.
  • Sitio Id de piwik.

Lista de objetos cacheados

  • Lista de los manejadores cacheados tipo Styles y tipo Scripts (Se pueden borrar para que se regeneren)
  • Listado de Links externos cazados (Se pueden borrar para que se regeneren)

Listado de trazados

  • Lista de ficheros volcados del Depurar-Rastreo (Se pueden descargar y borrar)

Descargar ‘FRBM’

 

Descargar plugin frbm para WordPress

La entrada Plugin para PageSpeed Insights de Google en WordPress (FRBM) se publicó primero en Blog de Pedro Reina.

]]>
/seo/seo-wordpress/plugin-para-pagespeed-insights/feed/0
Reglas de Google PageSpeed Insights/seo/seo-pagespeed/reglas-de-google-pagespeed-insights//seo/seo-pagespeed/reglas-de-google-pagespeed-insights/#respondWed, 20 Dec 2017 23:37:31 +0000/?p=295Reglas de Google PageSpeed Insights. Al margen de si son importantes o no? Cuantas reglas hay, y que es cada una de ellas. Típicas reglas de Google PageSpeed Insights Estas son las reglas más comunes que nos aplica el PageSpeed y nos muestra en su página de analisis: Reducir el…

Quiero leer más...

La entrada Reglas de Google PageSpeed Insights se publicó primero en Blog de Pedro Reina.

]]>
Reglas de Google PageSpeed Insights.
Al margen de si son importantes o no?
Cuantas reglas hay, y que es cada una de ellas.

Típicas reglas de Google PageSpeed Insights

Estas son las reglas más comunes que nos aplica el PageSpeed y nos muestra en su página de analisis:

  1. Reducir el tiempo de respuesta del servidor
  2. Optimizar imágenes
  3. Especificar caché de navegador
  4. Minificar HTML,  Minificar Css, Minificar JavaScript
  5. Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
  6. Prioriza el contenido visible
  7. Habilitar compresión

Reducir el tiempo de respuesta del servidor

Básicamente nos hace entender que necesitamos que nuestro servidor sea más rápido en la entrega de la página.

Pero ojo! A veces son las otras reglas la que hacen que esta en concreto salte, o a veces el bloqueo de recursos hace creer que el servidor está siendo torpe.

En ocasiones este mensaje desaparece cuando comprimimos todas las imágenes y minificamos el contenido y liberamos los bloqueos.

No obstante, si al final este mensaje persiste, deberemos estudiar el caso, y ver que el caché de nuestro cms o plataforma esté funcionando como se espera.

Optimizar imágenes

Podemos optimizar imágenes con algún plugin, si nuestro cms nos lo ofrece. (WordPress nos ofrece varios)

También podemos hacerlo desde el propio terminal con comandos de linux, si sabemos hacerlo.

Hay aplicaciones opensource para el escritorio de Linux.
Yo concretamente, suelo usar el propio Gimp. Abro una imágen, hago un “guardar como”, y ahí elijo en un Jpg comprimir al 90% (lo que marca por defecto)

En wordpress tenemos el plugin que se llama Imagify, que es de pago, pero en su versión gratuita nos hace el apaño con una limitación de X imágenes.

Si no usas ningún cms con plugin adeacuado para esto, o no estás familiarizado con las tecnologías, que sepas que el propio Google Page Speed te ofrece las imagenes optimizadas, en el pie de esta regla verás un vínculo que dice exactamente “Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página”

Especificar caché de navegador

Una regla básica que interactua con el caché de los navegadores.
Lo tengo explicado en

Especificar caché de navegador

Los ficheros externos serán “juzgados”, y seremos penalizados por su uso.
Paradójicamente el propiop script de Google Analytics hace que el PageSpeed (también de Google) nos penalice.
Si buscamos en Google vemos un montón de gente “impedida” y alucinando. (Los propios profesionales del SEO dicen que es una regla sin sollución)
Para esos casos tengo

Especificar caché de navegador en ficheros externos (Solución al warning de Google PageSpeed Insight)

Minificar HTML, Minificar Css, Minificar JavaScript

Es un poco sin sentido, quizás ahorrar algunos retornos de carro y algunos símbolos nos pueden dar unos KiloBytes de menos, pero al “jefe” y sus reglas de Google PageSpeed les gusta la super optimización.
O eso, o le gusta dar trabajo a quien sabe desempeñarlo.

Tenemos 2 soluciones.
O bien comprimimos las fuentes de los mismos (siempre que no sean ficheros externos), cosa que no es buena idea porque a la hora de querer ver o editar algo nos vamos a volver ##!|%&##.
O buscamos alguna forma de cachearlos y comprimirlos, y que la página busque estos clones ya comprimidos.

El simple hecho de minificar todo, en el siguiente test de PageSpeed nos puede desaparecer problemas que realmente no lo eran.

Hay que tener cierta prudencia a la hora de minificar, pues según el compresor puede darnos algún problema.
Por ejemplo, si una linea comentada con “//” no es eliminada y eliminamos los saltos de carro, nos vamos a encontrar con un gran bloque comentado (por el símbolo que sólo pretendía comentar una linea)
Es prudente mirar con la consola de errores del navegador si el minificado nos acarrea algún problema.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

El tamaño de una página normalmente es muy superior al tamaño de nuestras pantallas.
Así que, lo que Google espera es que en ese rango de pantalla todo se cargue rápido en primera instancia.

Sucede a veces que este mensaje salta en la puntuación de “Ordenador” y no salta en en la puntuación de “Móvil”.
Esto se debe a que normalmente el dispositivo móvil al ser tan estrecho, recoge mucho más contenido vertical.

A éste efecto de cargar la parte visible en pantalla, se le llama “above-the-fold”

Este aviso se aplica a los JS y a los CSS, pero el bloqueo de ambos es tan diferente como sus propias soluciones.

Bloqueo de visualización por la carga de un CSS

Cuando la carga de un CSS que no tiene relación a la cabecera o parte inicial del HTML produce un retraso en la carga.
O dicho de otra manera. Cuando la carga de un CSS no cambia el aspecto de la parte inicial de la página y supone un gasto de tiempo.
Solución. Llevar al CSS al footer.
Posibles consecuencias:

  • A veces no soluciona el problema
  • En ocasiones en detrimiento del propio diseño del tema si esto supone abandonar parte del estilo “inline”

Suele ser una solución final llevar todos los estilos al pie de página, acompañadas de todos sus sobre escrituras “inline”, y inyectar el propio contenido en lugar de sus llamadas.

Bloqueo de visualización por la carga de un JS

Similar al Css, aunque con soluciones más sencillas y sin apenas consecuencias.
Nos llevamos a todos los JS al footer, y/o aplicamos las propiedades “Asynch” o “Defer”.

Las llamadas a los JS también pueden contener codigo antes o después de la llamada, pero no suele tener consecuencias al separarlos. (Pero hay que tenerlo en cuenta por si el Debug del navegador nos arroja errores)
Algunos JS pueden tener dependencias tales como a JQuery (También hay que tenerlo en cuenta aunque en el modo Asynch no suele presentar conflictos)

Podemos aplicar “Asynch” o “Defer” o ambos, y ver el comportamiento de la página y la conclusión de resultado del PageSpeed.

Prioriza el contenido visible

Este concepto parece similar al anterior. También basado en el “above-the-fold”.
Pero este no está basado en tiempos ni bloqueos.

La comunicación entre servidor y navegador, se produce en varios pasos, como 2 personas que hablan a través e un teléfono y se les limita el tamaño de las frases.
Pues google quiere que en esa comunicación segmentada, recibir prioritariamente todo lo que afecta al “above-the-fold”. El código imprescindible para visualizar ese rango de pantalla con la mínima comunicación.

Así que, deberemos de evitar:

  • Estilos muy largos
  • Estilos que no tienen relación a la parte superior de la página
  • Scripts
  • Imágenes grandes
  • Objetos dinámicos o del tipo Ajax
  • Columnas

Si tenemos una imagen grande o columnas, podemos rellenar el espacio superior con algún contenido estático forzando que el contenido no conveniente sea empujado abajo y no aparezca en el “above”

Si nos aparece este mensaje, debemos analizar que se mueve en el “above-the-fold” y simplificar la comunicación en ese paso.

También puede darse el caso de que en la versión “Ordenador” tengamos esta penalización y en la versión “Móvil” no. ¿Porque? Pues porque el contenido de ambos es totalmente diferente, y el rango de pantalla-vs-contenido también lo es.

Incluso puedes llevarte una grata sorpresa sólo con minificar el código HTML (si no lo has hecho ya), y ver como desaparece este mensaje.
¿Tiene sentido? Lo tiene y a mi me ha pasado.
Supongo que estás en ese punto del “casi”, y al reducir el código ya cabe toda la trama en la pantalla.

Habilitar compresión

Se soluciona habilitando GZip en nuestro servidor, y añadiendo una regla al .htaccess
En apache se habilita con la extensión “deflate”.

Para las reglas del .htaccess, en WordPress hay muchos plugins que lo hacen de forma automática.
Y para añadir estas reglas de forma manual a nuestro .htaccess, muchos sitios de internet nos lo explican, como el caso en Piwik

Pero recordemos, esta regla en .htaccess no funcionará si el servidor no tiene habilitado dicha funcionalidad.

Una pequeña demostración sobre “Prioriza el contenido visible”

Pequeñas cosas que uno se da cuenta y empieza a intuir por donde van los tiros.
Una cosa es la teoría de las reglas de Google PageSpeed, y otra cosa es realmente entender que hace.
Y como en todo los oficios, la sabiduría la dan las cagadas y el aprender a golpe de patada.

Mi PageSpeed ayer estaba a 100/100, la espuma se salía del barril jjjjjjjjj
Y ahora veo:

Reglas de Google PageSpeed - Reparar "prioriza el contenido visible" de page speed

Como dice el anuncio de aquel seguro de coches cuyo nombre no voy a nombrar ¿Y PORQUE YO?
Algo ha pasado entre un antes y un después, y en el espacio de 1 día no han podido pasar muchas cosas.

Veamos que hay 2 vínculos que dicen “ver la captura de pantalla” y “mostrar original”
Es algo que llama poco la atención, pero nos pueden dar pistas.

Si pico “ver la captura”, me encuentro esto
Reglas de Google PageSpeed - Reparar prioriza el contenido visible de page speed pantalla 1

Si pico en ver original, me encuentro esto
Reglas de Google PageSpeed - Reparar prioriza el contenido visible de page speed pantalla 2

No se ve muy bien porque son imágenes miniatura que nos da la página de analisis y reglas de Google PageSpeed.

Pero me da de sobra como para percatarme de que se trata.
Es la foto de un nuevo artículo.
Así que, un nuevo artículo me ha hecho perder en el 100/100 de las reglas de Google PageSpeed.

¿Como resolverlo?
Pues, o pongo una primera entrada fija donde me entregue un contenido estático y sin foto, o trato de enconger esta imagen.
Lo importante es entender el problema, así como las demás reglas de Google PageSpeed, y tener capacidad resolutiva.

Mi propia forma de resolver todas las reglas de Google PageSpeed Insights

/plugin-para-pagespeed-insights/

La entrada Reglas de Google PageSpeed Insights se publicó primero en Blog de Pedro Reina.

]]>
/seo/seo-pagespeed/reglas-de-google-pagespeed-insights/feed/0
Una página bien optimizada/seo/seo-wordpress/una-pagina-bien-optimizada//seo/seo-wordpress/una-pagina-bien-optimizada/#respondWed, 20 Dec 2017 18:50:41 +0000/?p=278Una página bien optimizada, es la primera regla de oro si quieres seoposicionar bien una página. Esto no es BlackHat-seo ni WhiteHat-Seo, ni interlink. Son los cimientos de tu página si quieres que vea luz de forma ética moral y en condiciones seguras. Es importante aprender la forma correcta de…

Quiero leer más...

La entrada Una página bien optimizada se publicó primero en Blog de Pedro Reina.

]]>
Una página bien optimizada, es la primera regla de oro si quieres seoposicionar bien una página.
Esto no es BlackHat-seo ni WhiteHat-Seo, ni interlink.
Son los cimientos de tu página si quieres que vea luz de forma ética moral y en condiciones seguras.

Es importante aprender la forma correcta de construir una página.
Hay mucha gente que aplican truquitos, BlackHat seo, meter a piñón fijo sus enlaces en todos los sitios que pueden.
Pero a día de hoy se sabe que todos esos trucos sirven para posicionar más o mens bien durante un corto periodo de tiempo. Y require de un trabajo muy constante que se hace agotador, o del uso de aplicaciones especializadas.

El BackHat-Seo puede servir de complemento a una página bien otpimizada y bien construida, aunque también entraña algunos riesgos, y nunca es aconsejable.

Vamos al grano, para construir una página bien optimizada y sin juegos sucios.

Requisitos para una página bien optimizada

Dicto por orden de prioridad:

  • Un servidor con un rendimiento decente
  • Que el hospedaje te asigne tu propia IP dinámica (una dirección Ip compartida te puede dar un sinfín de problemas)
  • Preferiblemente un Vps o Servidor decicado, porque algunas optimizaciones no se pueden aplicar a un hosting compartido
  • Plataforma o Cms fácil de gestionar y fácil de optimizar (El favorito de muchos es claramente WordPress)
  • Que la página esté dentro de la temática de nuestro blog, y el contenido tenga un mínimo de interés popular
  • Asistente o conocimientos para aplicar bien el seo-on-page (La base de tu contenido optimizado)

Una página bien optimizada es la calidad de contenido junto a la velocidad de la misma.

Si el contenido de la página es bueno, pero la entrega de la misma al usuario es lenta, el resultado final es malo.
Este es un claro motivo de perdida de visitas, la gente que encuentra la navegación lenta o incomoda, se marcha. Ya hay algunos sistemas automáticos que calculan este hecho y lo imprimen con su propia métrica.

Si la velocidad de la página es muy buena, pero el contenido es malo, la gente pierde el interés de lo que está leyendo, o no encuentra el objetivo de lo que estaba buscando, escapan.

Ambos conceptos son aplicables y valorables tanto para el humano como para las máquinas. (A las máquinas me refiero a Google, Bing, a todos aquellos que juzgan la calidad y la valoran a la hora de construir sus buscadores)

Equilibrio entre texto y html

Los grandes buscadores tienen sus algoritmos para evaluar.
La parte más complicada para ellos es de la de valorar el texto, calidad y objetivo.
Para ello usan algoritmos que valoran la construcción del texto, títulos, subtítulos, densidad de palabras, palabras clave, etc.

Cuando nos disponemos a construir un blog, tenemos que estudiar varios parámetros, cual es nuestro tema y objetivo.
El equilibrio está en calidad de tecnología, y calidad del texto.

Pero el texto no es sólo aquello que escribimos.

El texto y el Seo-on-Page

Una cosa es el texto que nosotros vemos, y otra es el texto de la página que va a ver Yandex, Yahoo, Bing, Google.
Nuestra página ha de cumplir ciertos requisitos, y ciertas estructuras.
Para ver lo que ellos ven, busca en tu navegador una opción (normalmente está en el menú contextual), que dice algo como “ver código fuente”

Para empezar… para hacer un buen seo-on-page, debemos disponer una clara relación entre:

  • La palabra clave
  • El título de la página
  • Los subtitulos de la página (que han de haberlos para segmentar claramente el texto)
  • la url de la página
  • los títulos y “ALT” de las imágenes

Un ejemplo de hacer bien seo-on-page

Por ejemplo, si hacemos una página de patos.

Palabra clave: Patos salvajes
Título: Todos sobre los patos salvajes
Subtítulos pueden ser:

  • Algunos patos salvajes en Europa
  • Patos libres en África
  • Patitos domesticados
  • Especies de patos actualmente en extinción

La url de la página: todo-sobre-los-patos-salvajes

Claro ejemplo de lo que no se debe hacer, es precisamente lo que estoy haciendo aquí.
Cuando algún crawler entre en esta página, puede pensar “pero de que me estás hablando? de seo? o de patos?”
Pero si los motores ven claramente el tema en casi todas las demás páginas, te lo puedes permitir.

Los Tags en las páginas bien optimizadas

Los buscadores están familiarizados con los Tags, y el más usual es de los títulos jerárgicos.
Los títulos se especifican con “H”, y prosigue de un número que indican la jerarquía.
Siendo el 1 el título principal, el 2 un subtítulo, y por cada número crescendo es una rama que deriva del anterior título.

Un ejemplo muy gráfico:

<H1>Patos salvajes</H1>
bla bla bla
<H2>Tipos de patos salvajes</H2>
<H3>Algunos patos salvajes en Europa</H3>
<H3>Patos libres en África</H3>
<H4>Especies de patos actualmente en extinción</H4>

Asistente para construir bien una página

Yoast SEO es un plugin de WordPress, que es totalmente gratuito. Si tuvieramos que pagarlo tendría un muy alto.

El plugin Yoast Seo es un de valor incalculable. Incluso si estás acostumbrado a generar contenido de buena calidad, alguna vez se te escapa algo.
Es una potentísima herramienta que nos ofrece un gratuito auto reclutamiento, que sin darte cuenta acabas por especializarte en la habilidad de generar texto de calidad con una estructura brillante.

Si no usas WordPress, lo que puedes hacer es instalarte uno con el plugin Yoast Seo.
Y todo es tan fácil como simular que vas a crear una página de wordpress. Cuando terminas, simplemente copias el contenido y te lo llevas. Te lo llevas a tu Drupal, a tu Prestashop, o a tu página de fabricación propia.

La palabra clave

Antiguamente todos indicabamos nuestras palabras claves en una meta de la cabecera del Html llamada “keywords”. (Si no sabes lo que es ésto, no importa)

Ahora la palabra clave es algo totalmente abstracto.
Es algo que se elige, se tiene en mente, y se escribe acorde a esa palabra o frase seleccionada.
El juego ya no va de especificar las palabras claves en el meta “keywords” y escribir como una máquina.
Ahora lo que nos piden es que hablemos como personas y escribamos texto de calidad y utilidad.

Entonces, ahora la palabra clave, es meramente conceptual, y será aquella o aquellas que puedan ser concidentes con la totalidad de nuestro texto (inclusive con subtítulos e imágenes)
El juego es algo así como quien escucha una conversación, y de ella se puede deducir de que tema se habla, y si la conversación es de buena calidad o no según el conjunto de frases.

En el ejemplo de los patos, podríamos haber pensado en la clave “patos salvajes”.
Pero quizás Google nos genere una buena posición como “patos salvaje en extinción” porque hemos dedicado un bloque sobre eso, con un subtitulo claro y un texto muy bueno.

En ocasiones surgen situaciones así, que tenemos intención de atraer tráfico con una cierta frase de búsqueda, y nos surge un tráfico potencial con otra frase que no habíamos considerado y pero que en realidad sí la hemos trabajado.

El plugin Yoast Seo

Pues no te extrañe que google me posicione ante la búsqueda de “Yoast Seo” por haber hablado tanto de ello,  a pesar de que mi tema era sobre seo-on-page y ayudando a entender lo que es una página bien optimizada.
¿Se entiende el ejemplo?

En Yoast Seo definimos una palabra clave, pero esta frase o palabra, como ya dije antes, no va a ninguna parte.
En realidad y simplemente se lo guarda él mismo como algo conceptual para el uso de sus propios algoritmos.
Es con lo que Yoast va a jugar para saber y calcular si está bien escrita nuestra página.

Os pongo abajo una foto del plugin en acción, que recomiendo encarecidamente ya que nos ayuda a crear de forma simple y fácil cualquier página bien optimizada.

Si os fijais bien, hay tercer “tab” que dice “Añadir palabra clave”.
Este es una de sus funciones Premium por las que sí hay que pagar.
Como las palabras clave es algo abstracto que se puede usar como herramienta de analisis, Yoast ofrece poder insertar varias. La gracia de esto es que se queda almacenado para que conservemos el motivo y la analítica de la página.

Si no podemos pagar esta funcionalidad Premium, simplemente podemos cambiar “Palabra clave objetivo” y e ir viendo los resultados de cada frase, pero no se nos quedará guardada nada más que la última que pongamos aquí. (E ahí la gracia del premium y poder tener varias palabras claves almacenadas)

Nuevas funcionalidades de Yoast Seo

pagina bien optimizada con yoast seo

Aprovechando que hablo de Yoast.
Una nueva funcionalidad muy buena, es la pestaña “Legibilidad”.
Te avisa cuando encuentra contenido repetitivo, bloques muy espesos que necesitas segmentar con subtitulos.
Nos avisa de cosas tan elementales como cuando un título no está usando nuestra palabra clave, o la url está fuera del contexto.
Un gran asistente en la escritura para construir bien nuestra página, o para mantener la página bien optimizada ante todos los nuevos cambios.

La entrada Una página bien optimizada se publicó primero en Blog de Pedro Reina.

]]>
/seo/seo-wordpress/una-pagina-bien-optimizada/feed/0
Especificar caché de navegador/seo/especificar-cache-de-navegador//seo/especificar-cache-de-navegador/#respondWed, 20 Dec 2017 15:50:17 +0000/?p=247Especificar caché de navegador ¿Que son? ¿Para que sirven? ¿Como funciona? ¿Porque es importante? Especificar caché de navegador ¿Que es? Especificar caché de navegador es la exigencia de cualquier métrica como el PageSpeed de Google o Metrix que nos está requiriendo que especifiquemos el Head Expires(Fecha de caducidad) de uno…

Quiero leer más...

La entrada Especificar caché de navegador se publicó primero en Blog de Pedro Reina.

]]>
Especificar caché de navegador
¿Que son? ¿Para que sirven? ¿Como funciona? ¿Porque es importante?

Especificar caché de navegador ¿Que es?

Especificar caché de navegador es la exigencia de cualquier métrica como el PageSpeed de Google o Metrix que nos está requiriendo que especifiquemos el Head Expires(Fecha de caducidad) de uno o más fichero, así como la habilitación propia en el servidor.

Cada servidor de contenidos web, como apache, nginx, tiene su propia forma de habilitar sus interpretaciones.
En el caso de apache se habilita a través de su extensión mod_expires.
Se activa desde el terminal con “sudo a2enmod expires”

¿Que son los Head Expires?

Los ‘Head Expires’ permiten a nuestro navegador tener una clara referencia de la vida máxima de un fichero remoto, como lo es analytics.js.
Con esta marca pueden saber si pueden seguir usando su fichero cacheado, o de lo contrario, solicitar un nuevo archivo actualizado del servidor remoto.
Porque algunos ficheros remotos pueden actualizarse, bien por bugs, o por sucesión de versiones.

Esta función permite a los navegadores:

  • Reducir la carga del servidor (menos número de cargas externas)
  • Disminuir el tiempo de carga de la página (por ende del primer punto)
  • Un fichero cacheado se puede optimizar y modificar, el remoto no.
  • Beneficio directo para las conexiones con coste (tarifas 3G y 4G)

Cada visitante que entra en un sitio web, su navegador se comunica con el servidor de la web, y descarga todos los archivos necesarios, scripts, estilos, imágenes, etc.
A proporción del crecimiento de contenidos, hay muchos más ficheros de este tipo.
Entonces la intención del Head expires o Expires Headers, no es solo reducir la carga de descargas del servidor. (Beneficio para el servidor)
También lo es evitar las descargas repetitivas de los mismos. (Beneficio para el navegante)

¿Como funciona el Head Expires?

Es muy simple.
Esta regla indicada por el servidor, le dice a nuestro navegador, por cuanto tiempo debe almacenar el archivo, o cuando debe descargar otro nuevo ejemplar.
Esta regla es válida incluso para posteriores visitas.
Si el usuario no borra la caché del navegador, en sus posteriores visitas cada uno de los archivos remotos necesitados se evaluará si necesita o no descargarse de nuevo.
Si no hay necesidad de una nueva descarga, habrá un doble beneficio, para el servidor, y para el navegante.

No habrá beneficio en la primera carga, porque la primera carga será implicita. No hay ejemplar descargado, se require la descarga.
Pero a partir de la 2ª petición, el contenido del fichero será entregado por el propio navegador.

La regla que indica estas fechas de expiración, suelen indicarse por extensión de fichero.
Hay una más o menos estimación generalizada de rangos de fecha para los ficheros jpg, para los javascript, etc..

¿Que diferencia hay entre el caché y el Head Expires?

El caché es el sistema y método en sí,  en como se recuerda el contenido de un fichero remoto.
El Head Expires es una marca adicional, que nos dice por cuanto tiempo podemos aprovechar esa memoria, y cuando debemos renovar ese contenido.
Sin esta marca, correríamos el riesgo de tener un contenido estático obsoleto y distinto del más reciente, por siempre.

¿Por qué es importante?

Este sistema de cacheo y caducidades es importante a nivel global, para reducir un tráfico ilógico y reiterante.
No sólo se repite el uso de ficheros externos como scripts y imágenes al repetir 2 visitas en una misma página.
Ficheros como las hojas de estilos (css), o los javascripts (js), contienen datos compartidos para todas o casi todas las páginas de una web.
El caso más popular es el “Theme” de los cms. Ellos reunen todos los datos de diseños que son aplicables a todas las páginas, donde definen cabecera, logotipo, columnas, tipos de fuentes, colores, pie de página.
El caché del navegador permite recordar este fichero y realizar sólamente 2 cargas en la visita de 150 páginas de la misma web.
Y el Header Expire permite que esto sea así hasta un tiempo limitado, y tras pasado el periodo marcadado renueva los mismos.

Cómo activar y agregar Header Expires

Primero nos cercioramos que nuestro servidor y su servidor de contenidos contiene esa propiedad.
Apache y Nginx son candidatos perfectos.
Se activa sus extensiones.
En apache se hace así:

$ sudo a2enmod expires
$ sudo service apache2 restart

Se localiza el archivo .htaccess de la web en cuestión, y se inserta algo así:

 <IfModule mod_expires.c>
 # Enable expirations
 ExpiresActive On 
 # Default directive
 ExpiresDefault "access plus 1 month"
 # Images
 ExpiresByType image/gif "access plus 2 month"
 ExpiresByType image/png "access plus 2 month"
 ExpiresByType image/jpg "access plus 2 month"
 # CSS
 ExpiresByType text/css "access plus 2 month"
 </IfModule>

El conjunto de reglas en el mod_expires puede ser muy variable.
En este ejemplo indico que todos los ficheros caducarán pasados 1 mes. Pero caducarán en 2 meses los gif, png, jpg, y los estilos (css)

Comprobar los ficheros cacheados y su tiempo de vida

Una imágen vale más que mil palabras.
Especificar caché de navegador. Comprobar la vida de un fichero

F12 en tu navegador, vemos la pestaña “Red” o “Network”.
Clicamos en cualquier fichero, y en el detalle del mismo estamos viendo.

  • Status Code: Código de retorno del fichero, 200 Indica OK (Códigos de estado)
  • expires: Último día válido para usar el caché de este fichero
  • cache-control: Tiempo máximo de vida del fichero especificado en segundos.
  • last-modificed: Como su nombre indica, la última vez modificado
  • content-lenght: Tamaño del fichero
  • content-type: Tipo de fichero (que tomamos como referencia para decir cosas sobre él en .htaccess)
  • date: La fecha actual en que hemos cargado el fichero
  • etag: Es una etiqueta interna cuyos algoritmos usan para interpretar todo este conjunto de fechas.
  • server: Obvio, el servidor de contenidos que nos lo está entregando.

Conclusión sobre especificar caché de navegador

Con estos conocimientos adquiridos ahora, si nos volvemos a preguntar, que es especificar caché de navegador, podemos decir.
Es la exigencia de cualquier métrica como el PageSpeed de Google o Metrix que nos está requiriendo que especifiquemos el Head Expires.
Dichas exigencias son por las siguientes razones:

  1. Porque ellos entienden que descargar los mismos ficheros en todas las consultas, no es optimo ni lógico.
  2. Porque saben perfectamente que un caché sin una fecha de caducidad, no es bueno ni seguro.

Y el siguiente reto

Especificar caché de navegador en ficheros externos (Solución al warning de Google PageSpeed Insight)

La entrada Especificar caché de navegador se publicó primero en Blog de Pedro Reina.

]]>
/seo/especificar-cache-de-navegador/feed/0
Especificar caché de navegador en ficheros externos (Solución al warning de Google PageSpeed Insight)/seo/seo-wordpress/especificar-cache-de-navegador-en-ficheros-externos//seo/seo-wordpress/especificar-cache-de-navegador-en-ficheros-externos/#respondSun, 17 Dec 2017 20:43:02 +0000/?p=244Disfrutando del 100/100 de Google, instalé el plugin recaptcha, y se me calló la puntuación máxima. ¿Que es y como resolver el “Especificar caché de navegador en ficheros externos”? Ojo con los plugins! Cada vez que instalamos un plugin nos exponemos a cambios drásticos en cuanto a velocidad y estabilidad.…

Quiero leer más...

La entrada Especificar caché de navegador en ficheros externos (Solución al warning de Google PageSpeed Insight) se publicó primero en Blog de Pedro Reina.

]]>
Disfrutando del 100/100 de Google, instalé el plugin recaptcha, y se me calló la puntuación máxima.
¿Que es y como resolver el “Especificar caché de navegador en ficheros externos”?

Ojo con los plugins!
Cada vez que instalamos un plugin nos exponemos a cambios drásticos en cuanto a velocidad y estabilidad.
Podemos toparnos con llamadas a scripts o estilos mal optimizados o con errores, scripts externos problemáticos o que no existen, y etc…
Pero en este post me voy a centrar explicitamente al tema del caché del navegador hacia los ficheros externos.

Entender que significa “Especificar caché de navegador en ficheros externos”

Empecemos por entender que nos transmite google con el mensaje “Especificar caché de navegador en ficheros externos”.

La wikipedia nos invita a conocer de fondo que es la caché del navegador -> wiki

Como más o menos todos sabemos lo que hace la caché del navegador, entendamos que cachear un fichero externo o remoto sería hacer una copia local en nuestro ordenador, y leer siempre el fichero local almacenado.
Que es precisamente lo que nuestro navegador no hace, y este es el problema.

Un fichero externo, se escapa a nuestro control, y además de no poder asignar fechas (header-expire), tampoco podemos minificar su contenido.

Mientras no llegue el día en que nuestros navegadores haga tal cosa, tendremos que aguantarnos, o buscar una solución por nuestra cuenta. (Yo ya he encontrado mi solución)

En mi ejemplo real cuando yo instalo el plugin “recaptcha” en mi wordpress, este plugin incluye por sorpresa una llamada a un script externo. Y tumba mi 100/100 de PageSpeed que tanto me costó conseguir.
Y eso es de lo que se está quejando el Google PageSpeed Insights, porque no encuentra fecha de caducidad al fichero externo nuevo al que expongo mi wordpress ahora.

Esto ha sido así toda la vida y no tiene nada de malo. Pero el Google PageSpeed Insights incluye en su algoritmo esta consideración cara a penalizarnos.

Verificar los ficheros externos

Si vemos la notificación de PageSpeed Insights, allí mismo vemos el motivo de la penalización, y también vemos cual es el fichero que se está escapando a nuestro control.Especificar caché de navegador en ficheros externos

También podemos verlo desde el navegador con la herramienta para desarrolladores.
Que precisamente en este caso veo que, no se trata de un fichero, si no que en realidad se tratan de 2.
Para ver los ficheros externos desde la herramienta del navegador, lo vemos así:

  • Situando el cursor sobre el nombre del fichero, veremos la ruta completa.
  • El “Remote Address” nos dará una dirección Ip que no corresponde a nuestro hospedaje.

Ver ficheros externos desde la herramienta de desarrolladores de Google Chrome

¿Os habéis fijado que realmente hay 2 ficheros externos y el PageSpeed solo ve 1?

¿Cómo especificar la caché del navegador para mejorar el Google PageSpeed Insight?

Antes de solucionar el tema que estoy comentando, es realmente necesario tener activado propiamente dicho el control de caché del navegador en nuestro servidor.
Documentado aquí -> especificar el caché de navegador

¿Cómo especificar caché de navegador en ficheros externos, y mejorar el Google PageSpeed?

El truco es sencillo.

Básicamente nos hacemos con una copia de los mismos, y lo alojamos en la ruta más conveniente para nosotros en nuestro servidor.
Localizamos las llamadas de estos ficheros, y cambiamos la ruta y nombre.
Estás líneas pueden estar en plugins, o en el tema…

Cuando la web use estos contenidos en respectivos ficheros internos, el servidor podrá aplicarles esta regla.

Es así de sencillo.

¿Cómo solucionar la penalización de Google PageSpeed Insight en los ficheros externos desde nuestro WordPress?

En wordpress casi todo se arregla a golpe de plugins.

No se si habrá algún plugin específico para arreglar este tema.
Pero como yo me estoy haciendo mi propio plugin de WordPress para solucionar todos los problemas relacionados con el Google PageSpeed Insights, este ha sido otro paso más a resolver.

El plugin se llama FixRenderBlocking&Minify (Frbm para los amigos :-p)

A este procedimiento concreto, le llamo “Cazador de enlaces externos”.
Le añado estos 2 nuevos recursos que “ReCaptcha” a añadido a mi web.

frbm Cazar enlaces externos

Y el resultado es éste:
Especificar caché de navegador de ficheros externos con el plugin FRBM

Lo he medio conseguido (Verde es recurso cacheado, rojo recurso no cacheado)

Cuando un recurso externo contiene otros recursos externos

En el desarrollo de este fix, me doy cuenta de un 2º problema.
El fichero recaptcha__en.js no se cachea. ¿Porque?
Porque ese recurso está dentro del fichero api.js, y queda fuera del control del código del plugin.
Posiblemente sea también esta la razón por la que PageSpeed no detecta este fichero.

Parece ser que el propio fichero internalizado y cacheado, puede contener otros ficheros externos.
Y el caso de este plugin “ReCaptcha” ha sido el caso.

No hay nada mejor que tener problemas, para poder controlar el 100% del meollo y prevenir futuros contratiempos.

Así que… ¡¡¡dedos para que os quiero!!! A adaptar el código a las posibles circunstancias!!!

Añado, “Cazar también en los objetos cacheados”frbm Cachear recursos de recursos

Y vualá!!!
Los nombres que aparecen ahora son distintos, porque son los nuevos nombres que le confiere el plugin a los ficheros cacheados.
frbm Cazar enlaces externos

La ficha de los objetos cacheados:
frbm Ficheros externos cacheados

La entrada Especificar caché de navegador en ficheros externos (Solución al warning de Google PageSpeed Insight) se publicó primero en Blog de Pedro Reina.

]]>
/seo/seo-wordpress/especificar-cache-de-navegador-en-ficheros-externos/feed/0
Custom Search Google API para PHP (paso a paso)/seo/serp/keywords/custom-search-google-api//seo/serp/keywords/custom-search-google-api/#respondSat, 16 Dec 2017 02:22:59 +0000/?p=196Custom Search Google Api es un servicio que nos presta Google, para obtener resultados de una búsqueda. Uno de sus usos es para obtener un control de nuestras palabras clave en nuestras páginas web. Te enseño paso a paso como usar la Custom Search Google API. Necesitas un Apikey, un…

Quiero leer más...

La entrada Custom Search Google API para PHP (paso a paso) se publicó primero en Blog de Pedro Reina.

]]>
Custom Search Google Api es un servicio que nos presta Google, para obtener resultados de una búsqueda.
Uno de sus usos es para obtener un control de nuestras palabras clave en nuestras páginas web.

Te enseño paso a paso como usar la Custom Search Google API.
Necesitas un Apikey, un MotorId, y un poco de paciencia si nunca lo has hecho.
Con los datos obtenidos y algún pequeño programa o script, pódrás tener tu propia estadística del posicionamiento de tus keywords.
Y al final de todo te regalo una aplicación propia escrita para PHP.

La intención de la “Custom search google API” es la de obtener de forma automática el ranking de “keywords” o nuestras palabras clave.

Requisitos para usar la custom search google Api

  • Una cuenta en Google Master Tools
  • Crear o disponer de un Proyecto (Cloud resource manager)
  • Añadir a nuestro proyecto el servicio “Custom Search”
  • Añadir al proyecto por lo menos un ApiKey
  • Disponer de un Id de motor de búsquedas

Todos estos pasos requieren un pequeño esfuerzo de comprensión o sencillamente seguir los pasos que voy a indicar.
No requiere la contratación de ningún servicio de pago.

Creamos un proyecto en el cloud resource manager

Vamos a https://console.developers.google.com/cloud-resource-manager

Esto es la administración de proyectos.
Verás algo así:
Custom Search Google Api - google cloud resource manager

Es la lista de proyectos, que es como la agrupación de apis y servicios, con configuraciones, permisos y demás.
Si no tenemos ninguno, necesitamos crear uno.

Damos de alta el servicio Custom Search

Ahora vamos al panel de control de Apis de Google
https://console.developers.google.com/apis/dashboard

Veremos lo siguiente:
Custom Search Google Api - google custom search api

Yo ya tengo ahí una Api creada.
Primero tenemos que seleccionar el proyecto que hemos creado, donde he pintado el rectángulo rojo.
En teoría, si hemos creado nuestro primer proyecto, ya debería aparece seleccionado.

Pulsamos en Habilitar Apis y Servicios. Y seleccionamos el “Custom Search Api”
Custom Search Google Api - google habilitar apis y servicios

Hecho esto, aparecerá en la lista como tengo yo en mi panel de control.

Creamos el ApiKey

Hacemos click en Credenciales, y en la vista de credenciales clicamos en Crear.
Es un proceso sumamente corto y básico, simplemente introducimos un nombre y se crea la clave de ApiKey.
Podemos crear varias, pero esto no supone poder usar varias veces la limitación del servicio Custom Search.

Custom Search Google Api - google credenciales apikeys

Cada Apikey contiene una configuración y reglas para estar protegido de usos maliciosos de otros usuarios.
Los triángulos amarillos que salen en el screenshot, me indica precisamente eso, que mis Apis keys no tienen restricciones.
Donde pone “Clave”, copiamos su valor, este será nuestro ApiKey

Obtener el Id de motor de búsqueda

Vamos a https://cse.google.es/cse/all

Botón añadir, y nos pedirá un nombre.
En el dialogo de crear motor de búsqueda, pocas opciones que tocar.
Curiosamente ya creado el registro, al editar sí vemos varias opciones.
Custom Search Google Api - google crear cse

Debemos habilitar “Busqueda de imágenes” si tenemos pensado usar el google search images.
Cuidado con la opción “Sitios en los que buscar”, porque por el valor por defecto es “Buscar sólo en sitios incluidos”, y eso supone un filtro donde descarta todos los sitios que no son tuyos.
Esta edición es obligatoria, porque además de cambiar cosas y guardar cambios, picaremos al botón “Id de motor de búsqueda”
Hacemos click en “Id de motor de búsqueda” y copiamos su valor, este será nuestro motor id (cx)

Al final tendremos una vista tal que así:
Custom Search Google Api - google cse

Probando el custom search google api

Estando en la última pantalla, escribimos en la url
https://cse.google.es/cse/publicurl?cx=
(Después del igual ponemos nuestra CX)
Google nos dejará en manos de un simulador de búsqueda.
Veremos que en la misma hay un paginador hasta la página 10 (que es el límite de la api).
Y los resultados de esas búsquedas, serán los resultados que nos de la API.
Podremos comprobar que difiere bastante con nuestro navegador local, porque él está condicionado por cookies y la geolocalización y algunos datos sobre nuestro perfil.

Algunos peros

¿Te ha gustado el meneito?
Pues todo esto del Custom Search Google Api es para poder hacer sólo 100 consultas diarias.
Y más limitado todavía, porque cada consulta está limitada a 10 filas, 10×10 = 100
Osea, que no podemos coger la consulta de una keyword del tirón, si no que la limitación también se nos da paginada.
Así que, si queremos ver la posición de 3 palabras claves, en un rango de 3 páginas:
3 páginas * 10 filas = 30 consultas para una keyword
Para obtener esto en 3 keywords, ya se nos van 90 consultas…
Solución, entre comillas, hacer el seguimiento de cada palabra limitándonos a la primera página, o las 2 primeras, tendremos algo más de chancha.
Al fin y al cabo, que nos importa la posición 100.
Hay un dicho popular muy bueno, que dice… “El mejor lugar para esconder un cadaver, es la 2ª página de Google”

Juntamos las piezas y hacemos la prueba

Probamos la consulta con los datos del Custom Search Google Api!!!!
Ahora con los 2 valores que hemos copiado, ya podemos hacer las consultas.

https://www.googleapis.com/customsearch/v1q=KEYWORD&key=APIKEY&cx=MOTORID&gl=ES&start=START&fields=items

Los rojos son los valores que debemos cambiar nosotros.
El KEYWORD es la palabra o frase de búsqueda.
El APIKEY y MOTORID es lo que dije en rojo que debemos copiar, lo ponemos aquí.
El START es a partir de que fila pedimos la búsqueda.
El fields=items lo pongo yo para que la estructura de datos sea más apropiado para ser procesado en la programación.

Si probamos esto tal cual en el navegador, con los valores apropiados, nos dará una pantalla con datos, que corresponde a lo que el buscador recoge en su consulta.

Para el Google images la url es exactamente igual, pero añadimos “searchType=image”

Paginación de los resultados

La variable START, en principio son los valores de la paginación, en lugar de ser un valor de página, es un valor de registro.. 0, 10, 20, y así consecutivamente de 10 en 10. (puestos que las páginas son de 10 filas)
Esto es así en teoría, pero he visto que no siempre es así, a veces es más, a veces menos, el menos parece que lo hacen por el espacio que ocupan los anuncios.
Si creamos una aplicación o script, deberíamos de contabilizar las urls obtenidas, y a partir de ahí calcular este valor de paso.

Te ofrezco una pequeña aplicación para nuestro keywords ranks

Te ofrezco una pequeña aplicación para hacer nuestro propio seguimiento de nuestras palabras clave.
Espero que te guste.

Mi aplicación para el seguimiento de mis keywords

La entrada Custom Search Google API para PHP (paso a paso) se publicó primero en Blog de Pedro Reina.

]]>
/seo/serp/keywords/custom-search-google-api/feed/0