¶ Motivos
Hace unos meses hubo algunos incidentes: por un lado, se detectaron varios ataques a los servidores de DeporSite; y por otro, algún cliente detectó problemas con la indexación de sus páginas.
Tras reuniones y análisis con los departamentos de Sistemas (tanto nuestro como con Canadá), y conversaciones con el departamento de márketing, se propusieron una serie de mejoras en DeporSite: tanto a nivel de seguridad, como de SEO. Algunas de estas mejoras consistían en cambios en el código actual, como cambios de versiones de diferentes frameworks utilizados. Pero otras son nuevas funcionalidades que debería tener DeporSite.
Los puntos iniciales en este sentido fueron:
- En la parte de seguridad, controlar el uso de iframes (tanto embeber, como ser embebidos en otras páginas): pudiendo personalizar estas opciones sólo para los clientes que lo solicitan, teniendo la opción de asegurarlo bloqueando esta opción para los que no la necesitan.
- En la parte de SEO, tener controladas las páginas que los buscadores indexarán (inicialmente sólo la ‘home’) y poder personalizar los campos ‘title’ y ‘description’.
A cada una de estas dos opciones se le han ido añadiendo más y más opciones, pudiendo estas además ser personalizadas por página (opciones de seguridad) o por URL (opciones SEO)
¶ Cambios para el usuario final
El usuario final apenas notará diferencias: Cuando busque el centro deportivo en un buscador como Google, obtendrá páginas más relevantes en lugar de la página de login o documentos como la política de privacidad.
Pero, sí que puede pasar que si el site está mal configurado no permita cargar fuentes o imágenes externas, o no permita embeber o ser embebido en alguna página.
¶ Configurar las Políticas de Seguridad (CSP y CSPRO)
Estas políticas definen qué contenidos se pueden mostrar en una página web y cuales no (CSP – Content Security Policy), o cuales no se podrían mostrar si esas políticas se aplicasen, pero sin aplicarlas (CSPRO – Content Security Policy Report Only).
Las primeras (CSP) se aplican en la página actual (puede haber políticas diferentes en las diferentes páginas de un proceso), mientras que las segundas sólo comprueban los incidentes que pueden provocar las políticas: estos suelen utilizarse para hacer pruebas de políticas a utilizar próximamente.
Al cargar una página, se hará un cálculo de las políticas a aplicar en base a:
-
Archivo base: viene con la instalación/actualización y es la configuración recomendada común para todos los centros. Este archivo se encuentra en la ruta:
/app/config/csp-default.json -
Archivo de política general: contiene la personalización que se ha configurado para un site, en este punto se puede definir si en el site se utilizará CSP y/o CSPRO. El archivo de caché correspondiente a esta configuración se encuentra en la ruta:
/optimizados/CSP-SEO/CSP_General.json -
Archivo de política de seguridad por página: en el se pueden modificar las propiedades de las diferentes directivas para tener valores específicos para cada una de las páginas, que será añadido a la configuración base y la general. La ruta de estos archivos de caché es:
/optimizados/CSP-SEO/CSP_Pagina_{idPagina}.json
¶ Pantalla inicial de configuración de seguridad
En la pantalla de configuración veremos tres secciones:
- Botón de regeneración de caché de archivos: Este botón no está destacado ya que no debería ser necesario: los archivos de caché se regeneran con cada cambio, y se pueden regenerar también a través del menú: Herramientas > Regenerar la caché de CSP y SEO
- Políticas de seguridad generales: donde se pueden definir que políticas se utilizarán; si se utilizará SCP y/o SCPRO, y personalizar las directivas comunes a todas las páginas del site.
- Política de seguridad por página: permite configurar alguna página específica para incluir alguna excepción en la política de seguridad general.
MUY IMPORTANTE:
Añadir directivas de forma errónea puede provocar que la página deje de funcionar.
¶ Sección de Políticas de Seguridad Generales
¶ Políticas a aplicar
En la parte superior encontraremos dos selectores, que por defecto deberían estar en su posición central, lo que hace que se utilice la opción recomendada en la versión de DeporSite actual (configuración ‘Heredada’).
Con estos selectores podemos forzar el uso o no de los grupos de políticas, por ejemplo:
Forzamos el uso de CSP, y usamos la opción recomendada en CSPRO
Forzamos deshabilitar el uso de todas las políticas de Seguridad
Atención:
Debemos tener en cuenta que en el momento de cambiar cualquiera de estas opciones, se regeneran los archivos de caché y esas políticas de Seguridad estarán ya funcionando.
¶ Configuración de las directivas
Cada una de las políticas (CSP y CSPRO) está formada por un conjunto de directives, y cada una de estas directives puede contener varios valores.
En la pantalla se mostrarán los valores de las directivas Generales que pueden modificarse, y también (deshabilitados) los valores heredados de las políticas preestablecidas por la versión de DeporSite:
Ejemplo de Política General por defecto
Botones:
Los botones ‘Añadir directiva CSP’ y ‘Añadir directiva CSPRO’ permiten añadir nuevas directivas en su sección para limitar el alcance de las directivas que queremos configurar.
El botón de ‘eliminar’, elimina una directiva y todos sus valores asociados, excepto los valores predefinidos (que aparecen deshabilitados)
El botón de ‘eliminar’ deshabilitado indica que esa directiva sólo tiene valores predefinidos, los cuales no pueden ser eliminados.
El botón, dentro de cada una de las directivas, permite añadir valores a esa directiva.
En cada chip con valores de las directivas tenemos un icono para eliminar ese valor
Cuando el chip está deshabilitado, es porque corresponde a un valor predefinido que no puede ser modificado.
¶ Nueva directiva
Al pulsar sobre el botón “añadir directiva CSP o CSPRO”, aparecerá un listado de las posibles directivas a añadir: puede seleccionarse más de una a la vez.
Captura del selector de nuevas directivas
En el selector viene una pequeña ayuda acerca de la utilidad de cada una de las directivas.
En el apartado ‘Lista de directivas y valores’ puede encontrarse más información acerca de cada una de las directivas, a lo que afectan, y qué valores puede coger si no se define ninguno.
¶ Nuevo Valor
Al pulsar el botón para añadir valores a las directivas, aparecerá un listado con las opciones más habituales, y en la parte inferior un recuadro que permite añadir nombres de dominio con o sin subdominio, incluyendo wildcards (“*”).
Captura del editor de valores
En la lista de opciones aparecen las más útiles, incluyendo algunas URL externas del mismo grupo que se utilizan habitualmente en DeporSite.
Si se utiliza el campo de URL personalizada, el botón “Aceptar” se desactivará hasta que la ruta introducida sea válida.
¶ Sección de Políticas de Seguridad por página
En la parte inferior tenemos la sección para personalizar las políticas de forma individualizada para algunas páginas.
Ejemplo: página de portada con política personalizada
Botones:
Para añadir una página, pulsar en el botón “Nueva página”: nos aparecerá un desplegable con todas las páginas configuradas en el site.
Vista del selector de páginas
En cuanto en esta página añadamos alguna directiva y valores a la directiva, automáticamente se estarán generando los archivos de caché de la política de seguridad para esta página y se estará aplicando.
El botón de eliminar elimina la página y toda la información asociada a ella, incluyendo el archivo de caché correspondiente a la página.
¶ Configuración de las directivas
Para configurar las directivas de una página, pulsaremos en el nombre de la página y se desplegará la configuración:
Ejemplo de configuración de página
El sistema de configuración de directivas de una página funciona igual que la configuración de directivas en la política general (visto en el apartado anterior).
Tener en cuenta que (salvo alguna excepción) las nuevas directivas y valores añadidos a una página se acumulan a los de la configuración general para aplicarse a la página: no es necesario duplicar los mismos valores en la misma directiva en la política general y la política de página.
¶ Lista de directivas y valores
Las directivas que podemos añadir definen el alcance en que se aplicarán sus valores.
Si una directiva no se define, en la mayoría de los casos se aplica lo que esté configurado en la directiva por defecto ‘default-src’.
En cuanto a los valores que se pueden aplicar a las directivas, hay valores predefinidos (como ‘self’), dominios, wildcards (*) y, además, en algunas directivas tenemos unos valores propios que permiten anular valores de niveles anteriores, para que la directiva no se defina aunque estuviese definida en la configuración base (por ejemplo ‘all’).
Los valores se podrán escoger de un selector, excepto los dominios que podrán ser escritos manualmente. La lista que se permite actualmente está reducida respecto a la lista general, con los valores más usuales.
Lista de directivas seleccionables, con la lista general de posibles valores (en la aplicación la lista de valores seleccionables puede estar reducida a los valores más habituales):
¶ default-src
Define la política por defecto para cargar recursos.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
¶ script-src
Define la política para cargar scripts.
Si no se define se utilizarán los valores de default-src.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
¶ style-src
Define la política para cargar hojas de estilo.
Si no se define se utilizarán los valores de default-src.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’.
¶ img-src
Define la política para cargar imágenes
Si no se define se utilizarán los valores de default-src.
-
Valores permitidos:
<host>,‘self’,‘unsafe-eval’, '
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’ -
frame-ancestors
Define la política para permitir a DeporSite ser cargado dentro de un <frame> o <iframe>
NO se utiliza default-src cuando no se define.
- Valores permitidos:
<host>,<scheme-source>,‘self’,‘none’
¶ frame-src
Define la política para el origen a cargar dentro de iframes de DeporSite.
Si no se define utilizará los valores de child-src
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
¶ child-src
Define la política para cargar en iframes anidades (Web Workers)
Si no se define se utilizarán los valores de default-src.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
¶ font-src
Define la política para cargar fuentes.
Si no se define se utilizarán los valores de default-src.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
¶ object-src
Define la política para cargar objetos. Puede bloquear tags como <object> o <embed>
Si no se define se utilizarán los valores de default-src.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
Se recomienda definirlo como ‘none’ si es posible.
¶ media-src
Define la política para cargar contenido multimedia. Puede bloquear tags como <audio>, <video> o <track>
Si no se define se utilizarán los valores de default-src.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
¶ form-action
Define la política para cargar formularios. No funciona igual en todos los navegadores
NO se utiliza default-src cuando no se define.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
¶ connect-src
Define la política para cargar recursos desde una conexión. Puede bloquear el tag <a> o las llamadas ping, fetch(), XMLHttpRequest, WebSocket, EventSource, y Navigator.sendBeacon().
Si no se define se utilizarán los valores de default-src.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘unsafe-inline’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,
‘strict-dinamic’,‘report-sample’,‘inline-speculation-rules’
Puede dar problemas en algunos navegadores si se utilizan Websockets, ya que ‘self’ no lo reconocería.
¶ base-uri
Define la política para cargar recursos en <base>.
NO se utiliza default-src cuando no se define.
- Valores permitidos:
<host>,‘self’,‘unsafe-eval’,
‘wasm-unsafe-eval’,‘unsafe-hashes’,‘none’,
‘nonce-<base64-value>’,‘<hash-algorithm>-<base64-value>’,‘report-sample’,‘inline-speculation-rules’
¶ report-uri
Ruta para reporte de avisos para Firefox. (Deprecado para otros navegadores, sustituido por report-to que ya viene predefinido)
Valores permitidos: <uri>
¶ Configurar las opciones SEO (Search Engine Optimization)
En esta sección se configurarán las páginas que el centro quiera que sean indexadas.
Entre otras cosas, los buscadores suelen buscar en la raíz archivos estándar donde se les informa sobre los contenidos a indexar (y los que no), estos archivos son:
robots.txt: es un archivo que se crea para informar a los robots de los motores de búsqueda cómo rastrear e indexar las páginas de su sitio web. Es parte del protocolo de exclusión de robots (REP), un grupo de normas que regulan cómo los robots rastrean la web, acceden e indexan el contenido, y sirven ese contenido a los usuarios. El archivo robots.txt indica a los robots de los motores de búsqueda qué partes de tu sitio deben y no deben explorar. Por ejemplo, se puede bloquear áreas de un sitio que son irrelevantes para la búsqueda, o áreas que se desea mantener en privado.Sitemap: es un archivo que proporciona información a los motores de búsqueda sobre las páginas de un sitio web que están disponibles para el rastreo. Es una forma de informar a los motores de búsqueda sobre las páginas de tu sitio que de otra manera podrían no descubrir. Los buscadores acostumbran a buscar el archivo ‘sitemap.xml’, pero en nuestro caso, al querer que se genere dinámicamente, tendremos el archivo ‘sitemap.php’. Para que los buscadores reconozcan este nuevo nombre, se les debe informar desde el archivo ‘robots.txt’.
Por defecto sólo debería indexarse la ‘home’ o página ‘Portada’, la cual necesita que se le definan los contenidos de los campos ‘title’ y ‘description’ en los diferentes idiomas que acepte la página.
Para esta configuración por defecto sólo es necesario el archivo ‘robots.txt’ y no se necesita (aunque se recomienda) habilitar el sitemap.
A diferencia de la configuración de seguridad, la configuración SEO se define por URL y no por página: de esta manera, todas las páginas de un proceso contendrán la misma información.
Por otra parte, aquí si que se pueden definir configuraciones de parámetros GET, de manera que una misma URL tenga diferentes configuraciones dependiendo de estos parámetros.
Al cargar una página, se obtendrá la información del archivo caché generado para la URL. Este archivo es único para cada URL y contiene la información de todas las combinaciones de parámetros GET definidas.
La ruta de los archivos de caché es:
/optimizados/CSP-SEO/SEO_URL_<base64_url>.json
Los archivos robots.txt y sitemap.php no utilizan caché y se leen/ejecutan directamente.
¶ Pantalla inicial de configuración SEO
Pantalla inicial de la configuración SEO
En esta pantalla podemos diferenciar dos secciones:
- Ficheros
robots.txtysitemap: Aquí podremos configurar si informamos a los buscadores del nombre de nuestro archivo de sitemap, y podemos ver el contenido actualmente publicado de los archivosrobots.txtysitemap.php. - URLs a indexar: Aquí se definen la URL que queremos que se indexen en los buscadores y los campos ‘title’ y ‘description’ que informaremos.
¶ Sección de ficheros robots.txt y sitemap
En esta sección lo único que podemos configurar es si queremos informar a los buscadores de la ruta de nuestro archivo sitemap a través de robots.txt, para ello utilizaremos el selector central.
Sección de ficheros robots.txt y sitemap
Cada vez que modifiquemos este selector central, se regenerará automáticamente el archivo ‘robots.txt’.
Con los dos botones laterales: “Ver robots.txt” y “Ver sitemap”, podremos comprobar la información que se les está mostrando a los motores de búsqueda.
Ejemplo de robots.txt informando de la ruta del sitemap
¶ Sección URLs a indexar
En esta sección podemos definir qué páginas queremos que se puedan indexar, y definir para cada una de ellas la información que se mostrará en los campos title y description.
Captura de la sección URLs a indexar
Inicialmente tendremos sólo la página de inicio del site, y la tendremos desactivada. Esta página, a diferencia de las que podremos crear más adelante, no puede ser eliminada ni se le pueden configurar combinaciones de parámetros GET a las que definir propiedades diferentes.
Los botones que podremos ver inicialmente en esta vista son:
Añadir URL: Permite añadir nuevas URLs, estas podrán corresponder a páginas o a procesos, y a cada una de ellas se le podrá definir una serie de configuraciones y/o crear combinaciones de parámetros GET que tengan sus propias propiedades.
Ver más: Al pulsarlo desplegará un panel mostrando toda la información configurada para esa URL.
Index y textos: La imagen del selector es sólo informativa del estado de la URL, indicando si se está publicando para indexar o no. El conjunto de ambos botones abre la ventana para configurar los valores para personalizar la URL.
Añadir combinación GET: Permite añadir un subnivel de la misma URL con una combinación específica de parámetros GET (como pueden ser: idDeporte=4, idCentro=1 o idDeporte=3&idCentro=2), la cual queramos que tenga un comportamiento diferente a la URL sin parámetros.
Eliminar: En el caso de las URLs de primer nivel (sin parámetros GET), eliminará la URL y todas las que dependen de ella. Para las de segundo nivel (con parámetros GET) sólo eliminan la URL indicada.
- Ver configuración de la URL
Captura ejemplo de la configuración de una URL
Al desplegar una URL nos mostrará la información que se mostrará en la cabecera ‘head’ de la página. Unas barras de colores nos ayudarán a conocer si la longitud de los textos es la recomendada.
En esta información, el primer valor (index) indica también si la página aparecerá en los archivos ‘robots.txt’ y ‘sitemap’. Si el valor index está establecido en ‘noindex’, se indicará a los buscadores que no indexen esta página.
- Añadir URL
Para añadir una nueva URL, deberemos pulsar el botón “Añadir URL” de la parte inferior de la página.
Ventana de selección de URL
Aparecerá una ventana donde debemos seleccionar una URL. Podemos utilizar el recuadro de texto como buscador para filtrar el listado de URLs disponibles. Estas aparecerán agrupadas, diferenciando las correspondientes a “Procesos” de las “Páginas”.
Al seleccionar una de las URLs, la ventana se ampliará solicitando el resto de la información para configurar esa URL.
URL seleccionada
Si nos hemos equivocado al seleccionar la URL podemos utilizar la “X” a la derecha de la URL seleccionada, y podremos seleccionar otra URL.
Para continuar ir a “Editar contenidos de URL”
- Añadir URL con parámetros GET
Si queremos añadir una URL con parámetros GET, primero debemos tener añadida la URL de primer nivel (sin parámetros), la cual, si no la necesitamos por ahora podemos tener desactivada poniendo su valor index en noindex. Desactivar la URL de primer nivel no desactiva las de segundo nivel (con parámetros GET).
Desde la barra de la URL de primer nivel, pulsamos en el icono “Añadir URL con parámetros”, nos aparecerá una ventana donde añadir los parámetros GET:
Ejemplo de parámetros
Una vez definidos los parámetros debemos pulsar en la flecha verde para continuar. Igual que con las URLs de primer nivel, la ventana se ampliará solicitando el resto de la información para configurar esta URL con parámetros.
Parámetros GET definidos
Si nos hemos equivocado con los parámetros, simplemente debemos poner el cursor en el recuadro y modificarlos.
Para continuar ir a “Editar contenidos de URL”
- Editar contenidos de URL
En la edición de los contenidos de las URLs (tanto con parámetros como sin parámetros) tenemos tres secciones:
Configuración de ‘robots’
Esta configuración no debe confundirse con el archivo ‘robots.txt’; lo que aquí configuramos es lo que aparecerá en la cabecera (head) de la página como valores de la etiqueta ‘meta name=robots’.
Importante: si el primer valor se establece a ‘index’ la página podrá ser indexada por los motores de búsqueda, si se establece a ‘noindex’ se indica a los buscadores que no la indexen. Al modificar este valor se regenera automáticamente
‘robots.txt’y devolvería esta nueva configuración‘sitemap.php’
Captura de los selectores de index y follow
En general los valores a definir deberían ser los que aparecen por defecto: “index” y “nofollow”.
Index:
- Activado (recomendado) mostrará en página el valor ‘index’; lo que indica a los buscadores que se les permite indexar la página.
- Desactivado mostrará en la página el valor ‘noindex’; lo que solicita a los buscadores que no indexen esta página.
Follow:
- Activado mostrará en la página el valor ‘follow’; lo que indica a los buscares que pueden revisar todos los enlaces de la página para intentar indexar las páginas de destino.
- Desactivado (recomendado) mostrará en la página el valor ‘noindex’; lo que solicita a los buscadores que no sigan los enlaces que puedan encontrar en la página.
Configuración de ‘title’
Los valores que pongamos en ‘title’ tienen dos funciones:
- Título en los resultados de los buscadores
Ejemplo de resultado en Google
- Texto en la pestaña del navegador
Texto de pestaña personalizado con ‘title’
Las recomendaciones para crear un ‘title’
- Debe describir el contenido de lo que encontrará en esa página (no en todo el site)
- Las palabras clave que queramos utilizar deberían estar al principio de la frase
- No duplicar títulos en diferentes URLs
- La longitud de la frase debe ser de unos 55 caracteres. Al escribirlo, una barra en la parte inferior nos marcará si la longitud es la recomendada.
Captura de proceso de introducción de ‘title’
Esta barra de color, nos ayudará a contar los caracteres. Los colores corresponden a:
- Naranja: texto corto, menor de 50 caracteres
- Verde: tamaño recomendado, entre 50 y 60 caracteres
- Naranja: texto largo, entre 61 y 70 caracteres
- Rojo: texto muy largo, aparecerá recortado en el buscador, más de 70 caracteres
Configuración de ‘description’
Los valores que pongamos en ‘description’ tienen la función de sugerir una descripción para que la muestre el buscador cuando aparezca la página entre los resultados.
Ejemplo de ‘description’ mostrado en los resultados
Es posible que el buscador cambie la descripción al mostrar la página sustituyéndola por texto real de la página si lo considera mejor relacionado con las palabras de la consulta.
Las recomendaciones para crear una descripción son:
- Utilizar las palabras clave que queramos que disparen nuestra web en los resultados
- Usar llamadas a la acción (verbos de acción): “Inscríbete”, “Regístrate”, “Consulta aquí los horarios”, “Resérvalo aquí”,…
- No crear un texto extremadamente largo.
- No duplicar descripciones en varias URLs.
Atención: Si bien algunos buscadores aceptan 300 caracteres, Google puede recortar la descripción si sobrepasa los 155 caracteres en PC y los 120 caracteres en teléfonos móviles.
Por lo general se recomienda una descripción de entre 150 y 160 caracteres.
Para ayudar a controlar este tamaño, aparecerá una barra de color y un contador de caracteres.
Captura de proceso de introducción de ‘description’
En esta barra de color, los colores corresponden a:
- Naranja: texto corto, menor de 150 caracteres
- Verde: tamaño recomendado, entre 150 y 160 caracteres
- Naranja: texto largo, aparecerá recortado en la mayoría de buscadores, entre 161 y 320 caracteres
- Rojo: texto muy largo, aparecerá recortado en el buscador, más de 320 caracteres
Cancelar o Guardar
Si pulsamos el botón “Cancelar” no se guardarán los cambios. Esto incluye que si se está creando una nueva URL, esta acción no sólo indica que no queremos personalizar la información de ‘robots’, ‘title’ y ‘description’, sino que ni siquiera dará de alta la URL con valores por defecto.
El botón “Guardar”, guardará/modificará toda la información introducida en Base de datos y generará/modificará el archivo de caché correspondiente.
¶ Anexos
¶ Corregir errores al cargar fuentes externas
Las nuevas políticas de seguridad pueden bloquear la carga de fuentes externas como las que proporciona Google. Para permitirlas podemos utilizar una de las siguientes opciones:
- Opción ‘simple’
| Directivas | Valores |
|---|---|
| default-src | fonts.googleapis.com |
| fonts.gstatic.com |
- Opción 'recomendada'
| Directivas | Valores |
|---|---|
| style-src | 'self' / resources.deporsite.net / fonts.googleapis.com |
| font-src | resources.deporsite.net / fonts.gstatic.com |
¶ Mostrar imágenes alojadas en otros servidores
Las nuevas políticas de seguridad pueden bloquear la carga de imágenes alojadas en otros servidores del cliente. Suponiendo que las imágenes están en algún directorio dentro del dominio www.servidor-cliente.com, para permitirlas podemos utilizar una de las siguientes opciones
- Opción ‘simple’
| Directivas | Valores |
|---|---|
| default-src | www.servidor-cliente.com |
- Opción 'recomendada'
| Directivas | Valores |
|---|---|
| img-src | 'self' / resources.deporsite.net / www.servidor-cliente.com |
¶ Referencias
CSP - Content Security Policy : Referencia general
https://content-security-policy.com/
CSP – Directivas
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
CSP – Valores de origen
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources
Optimización SEO. Para ‘title’ y ‘description’.
https://www.semrush.com/blog/seo-writing
Recomendaciones ‘description’
https://www.semrush.com/blog/what-not-to-do-when-writing-a-meta-description/