Saltar al contenido

En ocasiones compartimos el contenido de nuestra web en redes sociales como Facebook. Cuando lo hacemos queremos que aparezca la imagen principal, el texto de la entrada y el título de la página, pero en ocasiones esto no es así.

Para que aparezca el contenido en Facebook que queremos al compartir la URL debemos indicárselo de una forma muy sencilla, mediante el marcado Open Gragh. Son etiquetas que se introducen en la cabecera del html y es la manera más sencilla de introducir información de la página para Facebook.

Captura

Así algunas etiquetas son para:

  • Enlaces de páginas web.
  • Vídeos.
  • Fotos que estén en páginas web.
  • Audios.

Esto son los meta tags (og) básicos a poner en el head de nuestras páginas web:

  • og:title: Título del contenido a compartir.
  • og:type: Tipo de contenido. En esta URL tenéis los direntes tipos. (Objetct Types)
  • og:image: Foto que queremos mostrar en Facebook.
  • og:url: URL del post o contenido.

Metas opcionales para complementar con el contenido:

  • og:description: Texto descriptivo de contenido compartido.
  • og:locale: Idioma del contenido, en mi caso “es_ES” –> Lenguaje_Territorio.
  • og:site_name: Nombre de la web de la que compartimos el contenido

Meta tags específicos para imágenes:

  • og:image:url: mismo valor que og:image.
  • og:image:secure_url: Para rutas de imágenes con protocolo HTTPS.
  • og:image:type: Tipo del formato (MIME TYPES) de la imagen, por ejemplo “image/jpeg”.
  • og:image:width: Anchura en pixels de la imagen.
  • og:image:height: Altura en pixels de la imagen.

Meta tags específicos para vídeos:

  • og:video:url: URL del archivo del vídeo. Por ejemplo: www.dominio.com/video.avi
  • og:video:url: mismo valor que og:video.
  • og:video:secure_url: Para rutas de archivos de vídeos con protocolo HTTPS.
  • og:video:type: Tipo del formato (MIME TYPES) del vídeo, por ejemplo “video/avi”.
  • og:video:width: Anchura en pixels del vídeo.
  • og:video:height: Altura en pixels del vídeo.

Meta tags específicos para audio:

  • og:audio: URL del archivo. Por ejemplo www.dominio.com/audio.mp3
  • og:audio:secure_url: Para rutas de audios con protocolo HTTPS.
  • og:audio:type: Tipo de formato (MIME TYPES) del audio, por ejemplo “audio/mpeg3″.

Este vídeo me ha parecido excepcional para entender lo que significa y como se debe aplicar la concordancia de las palabras clave en los anuncios de Google Adwords.

9

En ocasiones nos podemos encontrar con una sorpresa al intentar ejecutar un script en un servidor. El problema/restricción más común es que se nos lance una excepción indicando que:

"No se puede cargar el archivo XXXX.ps1 porque en el sistema está deshabilitada la ejecución de scripts. Vea "get-help about_signing" para obtener más información".

Captura2

 

Por tanto, el error es que en el sistema esta deshabilitada la ejecución de scripts. Si abrimos el Windows PowerShell como administrador y ejecutamos el comando "Get-ExecutionPolicy" nos tendría que devolver "Unrestricted" o lo que es lo mismo "Restringido". Para cambiar esta configuración basta con ejecutar "Set-ExecutionPolicy Unrestricted".

Captura1

En ese momento ya se pueden ejecutar scripts sin problemas.

 

En la entrada anterior veíamos como habilitar la compresión gzip de salida de HTTP con Apache, en esta entrada explicaré de manera resumida realizar la misma acción pero para IIS 6.

1. el primer paso para habilitar la compresión es agregar una "Extensión de servicio". Para ello locarizaremos en el administrador de IIS la carpeta "Extensiones de servicio web" y haremos click sobre "Nueva extensión".

iis6

2. en la ventana de "Nueva extensión de servicio web" le pondremos un nombre, como "gzip" o "compresión" y agregaremos la librería gzip.dll ubicada en c:\Windows\System32\inetsrv\gzip.dll

Es importante seleccionar el check "Establecer el estado de extensión a Permitido".

3. Una vez agregada la extensión, solo tenemos que ir a nuestros "Sitios Web" y en sus propiedades de Servicio habilitar "Comprimir archivos de aplicación" y "Comprimir archivos estáticos"

4. Para finalizar la configuración de la compresión tendremos que modificar el fichero "Metabase.xml", antes deberemos haberle habilitado su modificación (bloqueado por defecto por IIS).  Para ello iremos a "Admnistración de Internet Information Server" > Propiedades y "Habilitar la modificación directa de archivos de metabase"

habilitar metabase.xml

Ahora ya podemos editar el fichero “Metabase.xml”, normalmente ubicado en "%windir%\SYSTEM32\inetsrv\".

Del fichero en cuestión lo que nos interesa para la compresión http es la sección de“<;IIsCompressionScheme Location="/LM/W3SVC/Filters/Compression/gzip">;”. Podemos abrir el fichero con el bloc de notas.

HcDoDynamicCompression="TRUE", La compresión esta habilitada para ficheros dinamicos.

HcDoOnDemandCompression="TRUE", la compresión esta habilitada para ficheros estaticos

HcDynamicCompressionLevel="10", establece el nivel de compresión de los archivos dinámicos; números altos significan mayores niveles de compresión, pero también implican mayor uso de CPU y de memoria (0-10), pero es evaluar como nuestro servidor funciona mejor.

HcFileExtensions="htm html txt"

Extensiones de archivos estáticos, por ejemplo: htm, html, txt, doc, pdf, etc. que serán comprimidas si está habilitada la compresión estática.

HcScriptFileExtensions="asp
dll
exe
aspx
htm"

Extensiones de archivos dinámicos. En mi caso tengo puesto como dinámico el htm ya que mi servidor utiliza rewrite y por ello considero que una htm es una pagina dinámica.

HcOnDemandCompLevel="10", establece el nivel de compresión de los archivos estáticos cuando la compresión en demanda está activada, números altos significan mayores niveles de compresión, pero también implican mayor uso de CPU y de memoria (0-10).
Algunas de las propiedades que aparecen aquí también pueden ser modificadas desde la consola de administración:

HcCompressionDirectory="%windir%\IIS Temporary Compressed Files", indica el directorio en donde serán guardados los archivos temporales comprimidos.

HcDoDiskSpaceLimiting="FALSE", cuando está en False no limita el espacio de los archivos temporales comprimidos.

HcExpiresHeader="Wed, 01 Jan 1991 12:00:00 GMT", se coloca una fecha obsoleta para que los proxys no guarden en caché el archivo.

HcMaxDiskSpaceUsage="99614720", tamaño máximo en bytes que pueden ocupar las copias comprimidas de los archivos estáticos.

Después de toda esta configuración lo único que nos quedara será reiniciar el IIS 6.0

Para reiniciarlo por consola de comandos (cmd) Inicio, ejecutar, cmd: iisrestart

Si tienes IIS 7 consulta el siguiente enlace (no creo que varie mucho de la versión 6): http://technet.microsoft.com/en-us/library/cc771003(v=WS.10).aspx

1

Siguiendo con la herramienta que nos da Google para optimizar nuestras páginas Google PageSpeed Insights, una de las recomendaciones más comunes es la que nos indica: "Habilitar compresión".

Muchos sitios web pueden permitir comprimir con gzip u otro modulo de compresión la salida de HTTP del navegador, en sí, nosotros no tenemos que programar nada, simplemente activar esta configuración habilitandola en el Apache (suponiendo que nuestra web esta desarrollada con PHP).

En mi caso, mi servidor se gestiona con un panel de control CPANEL, activar dicha compresión es una tarea muy sencilla.

1. el primer paso es buscar el apartado "Software / Servicios" y hacer click en "Optimizar el sitio de Web"

Captura1

 

2. A continuación, seleccionamos "Comprimir todo el contenido". Aunque existe la posibilidad de marcar "Comprimir los tipos de MIME especificados" que lo único que comprimirá serán los formatos MIME indicados.

Captura2

 

Resumiendo, habilitar la compresión gzip de un sitio hoy en día es imprescindible para optimizar los tiempos de carga de una web, los usuarios con ancho de banda lo notarán significativamente y además de mejorar tu puntuación en las valoraciones SEO, la navegación será más fluida.

Enlace a Google PageSpeed Insightshttp://developers.google.com/speed/pagespeed/insights/

Explicación de Google sobre la habilitación de la compresión (inglés): https://developers.google.com/speed/docs/insights/EnableCompression

Cuando  hacemos un test en Google PageSpeed Insights y nos da como una mejora que debes introducir "Especificar cache del navegador", nos da la siguiente explicación:

https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

Captura

 

 

En realidad lo que nos quiere decir es que para mejorar la experiencia de usuario a la hora de cargar la web, el contenido estático como imágenes, hojas de estilo y javascript le podemos indicar una fecha de expiración para que no se cargue cada vez que el usuario accede a la página. Esto se puede hacer muy fácilmente, hay dos opciones, desde PHP o desde .htacces. La primera opción te va permitir decir que páginas quieres que se aplique, en la segunda y más recomendable se aplicará a todo el conjunto de páginas.

Aunque se puede expresar la directiva de tiempo con palabras tipo days, week, moth a mi me gusta más la forma numérica y expresarlo en segundos, de esta forma se calcula así:

- ExpiresDefault A3600 una hora
- ExpiresDefault A604800 para una semana

Y se calcula de la siguiente forma: 30 dias = 60*60*24*30 = 2592000

Expiración utilizando .htacces

<ifmodule mod_expires.c>
 ExpiresActive On
 ExpiresDefault A3600
 <FilesMatch ".(gif|jpg|jpeg|png|swf)$">
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
 <FilesMatch ".(xml|txt|html)$">
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
 <FilesMatch ".(js|css)$">
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
</ifmodule>

Expiración utilizando PHP

Se realizará modificando los headers

header("Expires: ".gmdate ("D, d M Y H:i:s", time() + 60*60*24*30)." GMT");

En las siguientes referencias os dejo otras explicaciones útiles:

 

El compresor de YUI (Yahoo¡) es para mi uno de los mejores, más fáciles de utilizar y desarrollado por un grande como Yahoo. Además, nos permite hacer compresiones de CSS y JS, por lo que utilizando una misma página tendremos comprimidos nuestros archivos.

Otra opción es su carga, podemos hacerlo mediante un copy/paste, mediante la carga de un archivo (mi opción preferida) o directamente desde la URL.

http://refresh-sf.com/yui/

 

Captura

En muchas ocasiones cuando estamos desarrollando una web nos encanta cargarla de iconos, css, javascripts con efectos alucinantes... pero no nos damos cuenta que uno de los problemas más comunes es el tiempo de carga de una web.

En una tienda on-line, por ejemplo, a mayor tiempo de carga mayor será el porcentaje de abandonos y por tanto se disminuyen las posibilidades de compra.

Yo recomiendo dos herramientas, no creo que hagan falta más. Pingdom Tools nos dará una análisis exhaustivo de los tiempos y PageSpeed Insigths nos analizará la página y nos propondrá soluciones.

 

Google Insigth

Este problema se debe que al cliente de FTP "Filezilla" tiene como opción predeterminada que todo archivo que no tenga extensión sea tratado como "ASCII", este es el problema ya que SMF sube los archivos sin extensión para tener mas seguridad en la web, pero estos archivos, son archivos binarios pero solo que sin extensión.

Dicho lo anterior, hay que configurar Filezilla para que pase estos archivos como binarios y no como "ASCII", para eso hay que hacer lo siguiente.

En Filezilla ir a "Edición > Opciones > Transferencias > Tipos de archivo" y de-seleccionamos, es decir sacamos el tilde de la casilla "Tratar archivos sin extensión como archivos ASCII" y listo, le damos aceptar, y ahora podemos descargar de nuevo los archivos del antiguo host (Solo los archivos adjuntos) y subirlos al nuevo host.

smf-logo-forum

Una de las cosas imprescindibles para posicionar nuestra web es proporcionar a Google una sitemap. El sitemap es una archivo xml con las direcciones principales de nuestra página y que pasándoselo al buscador conseguiremos indexarlas.

El programa en concreto se llama SiteMap Generator, su web es esta:

http://wonderwebware.com/sitemap-generator/

 

Y su instalación y uso:

1. descargar e instalar el programa: SiteMap Generator

2. Una vez instalado en la casilla que dice Extract links from, escribir la dirección del sitio del que se quiere generar el sitemap

3. Presionar el boton start (Automáticamente el programa buscará todos los links del sitio web y generará con ellos una lista).

4. Una vez el programa finalice la búsqueda, presionar la pestaña Google Sitemap / XML (en esta pestaña se muestra el contenido completo del sitemap, en este punto es posible editarlo)

5. Si el resultado está conforme, se procede a presionar el botón save to file (preferiblemente guardar el archivo como sitemap.xml)

6. finalmente se subir el archivo al directorio raiz del sitio (Ej. misitio.com/sitemap.xml)

SitemapGenerator