website launch checklist
1.0.0
Cosas que se deben verificar antes de lanzar un sitio web
Antes de lanzar el sitio web, asegúrese de que:
Una etiqueta alt ("atributo alt" o "descripción alt") es un atributo aplicado a una imagen que sirve como una descripción invisible de la imagen.
Describe el contenido de una imagen y lo utilizan los lectores de pantalla para leer en voz alta a los usuarios ciegos. También lo utilizan los motores de búsqueda, ya que no pueden interpretar imágenes, se basan en la descripción de la etiqueta alt. El uso de etiquetas alt en imágenes tiene un impacto positivo en la clasificación de los motores de búsqueda, por lo que es bueno para el SEO. El texto alternativo también se muestra cuando las imágenes no se cargan.
La etiqueta Alt tiene que describir el contenido de la imagen y se recomienda tener hasta 125 caracteres.
Ejemplo:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > Si tiene un entorno de "prueba" o "desarrollo", es probable que esté bloqueando la indexación de la prueba.
Si desea que su sitio web aparezca en los resultados de búsqueda, ese motor de búsqueda "indexará" su sitio web. Los motores de búsqueda tienen "bots" automatizados que visitan páginas web, "rastrean" el contenido y lo almacenan en el índice del motor de búsqueda. Esto permitirá que el motor de búsqueda recupere posteriormente los resultados de búsqueda más relevantes.
Antes del lanzamiento, asegúrese de que la versión que se publicará permita la indexación de su sitio web. Asegúrese de no tener dicha metaetiqueta en su HTML:
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesAdemás, verifique su archivo robots.txt. Si desea permitir que se indexen todas las páginas de su sitio web, su archivo robots.txt deberá contener esto:
User-agent: *
Disallow:
Un lugar más para verificar son las configuraciones de Apache/Nginx.
Cuando un sitio web se comparte en Facebook o Twitter, muestra una miniatura, un título y una descripción:
Si desea que su sitio web se muestre con una miniatura, un título y una descripción correctos, debe agregar metaetiquetas requeridas por Facebook y Twitter.
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->Puede probar cómo se verá su sitio web cuando se comparta en Facebook o Twitter utilizando estas herramientas:
Depurador para compartir en Facebook
Validador de tarjetas de Twitter
Favicon es el pequeño ícono cerca del título del sitio web en la pestaña del navegador.
Hace que el sitio web sea fácil de identificar cuando hay muchas pestañas abiertas, visualizando el historial del navegador y los marcadores. Algunos motores de búsqueda, como DuckDuckGo, muestran el favicon cerca de la URL en el resultado de la búsqueda. Además de mejorar la usabilidad, puede ayudar a captar la atención del usuario en los resultados de búsqueda, por lo que podemos llamarla técnica SEO indirecta.
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > Los usuarios pueden guardar una página web en su pantalla de inicio en dispositivos móviles. Eso crea un ícono para el sitio web, al igual que el ícono de la aplicación, al tocar ese ícono se abrirá el sitio web en el navegador.
Los desarrolladores tienen cierto control para acercar la experiencia del sitio web a la experiencia de una aplicación nativa en dispositivos móviles. Por ejemplo, de forma predeterminada, iOS configurará la captura de pantalla del sitio web como un icono. Pero puedes configurar un diseño de icono personalizado utilizando las metaetiquetas de Apple.
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> Android utilizará el valor "apple-touch-icon" o el favicon (si la metaetiqueta no está presente) para crear un icono de pantalla de inicio.
Si la herramienta de análisis que utiliza no tiene un filtro para el entorno, entonces estará contaminando los análisis de su sitio web con resultados de pruebas en un entorno que no es de producción. Puede agregar el filtro en la herramienta de análisis o incrustar condicionalmente el código solo en el entorno de producción.
La etiqueta de título especifica el título del sitio web. La etiqueta meta descripción contiene una breve descripción de la página.
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >El título es lo que se muestra en los resultados del motor de búsqueda, se muestra en la pestaña del navegador y en las tarjetas de redes sociales al compartir (si no se proporciona un título separado para la red social).
La descripción también se muestra en los resultados de la búsqueda. No se utiliza directamente en el algoritmo de clasificación, por lo que no afecta las posibilidades de aparecer en el resultado de búsqueda, pero aumenta las probabilidades de que los usuarios hagan clic en su sitio web en los resultados. Eso aumentará la tasa de clics (CTR) de su página para Google, lo que significa que Google la considerará un buen resultado y tendrá una clasificación más alta en futuros resultados de búsqueda.
Si tiene enlaces a enlaces externos en su página web, especialmente los que se abren en una nueva pestaña o ventana, debe usar rel="noopener" .
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > Al hacerlo, existen beneficios de seguridad y rendimiento. Sin él, la página externa puede acceder a su objeto de ventana usando window.opener . Puede obtener más información sobre qué vulnerabilidades se resuelven utilizando noopener aquí: Acerca de rel=noopener
El otro sitio web también puede ejecutarse en el mismo proceso que su página actual, por lo que si la página externa ejecuta JavaScript pesado, afectará negativamente el rendimiento de su sitio web. noopener también lo evita.
Lea más sobre esto aquí: Los beneficios de rendimiento de rel=noopener
A medida que realiza muchos cambios en su sitio web o cuando utiliza muchas bibliotecas externas o marcos CSS, es probable que su archivo CSS contenga muchos estilos que sus páginas no utilizan. Por ejemplo, es posible que esté utilizando un tema de algún complemento, pero el CSS de los otros temas simplemente permanece en su archivo CSS sin usar y el tamaño del archivo de la hoja de estilo aumenta.
Puede eliminar todos los estilos no utilizados utilizando una herramienta llamada PurgeCSS. Puede usarlo con CLI o usarlo en Webpack, Gulp, etc. Analizará sus páginas, hará coincidir los selectores utilizados en las páginas con los de los archivos CSS y eliminará los estilos no utilizados. En un proyecto mío reciente, que usaba el marco CSS Tailwind, había, por supuesto, muchas utilidades que no usé. PurgeCSS disminuyó el tamaño de mi archivo app.css de 214 KB a 45,6 KB.
Sin embargo, tenga cuidado de que si un complemento crea dinámicamente elementos en la página, PurgeCSS no detectará los estilos de ese elemento. Pero puede incluir selectores en la lista blanca pasando los selectores o patrones de selector en la configuración, y también puede incluir el selector en la lista blanca usando un comentario especial para incluir reglas específicas en la lista blanca. Lea más sobre las listas blancas de PurgeCSS.
Cuando el navegador solicita un recurso, el servidor puede indicarle durante cuánto tiempo puede almacenar o "caché" el recurso. La próxima vez que se requiera el recurso, podrá utilizar la copia local. Mejorará enormemente la velocidad y reducirá las cargas en el servidor. Puede configurar su servidor para que devuelva un encabezado que indique cuánto tiempo se almacenará en caché el activo:
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
Deberá establecer la edad máxima en función de la frecuencia con la que cambian sus activos.
También puede configurar su servidor para usar compresión, como la compresión Gzip, que permitirá que los recursos se transfieran más rápido. La compresión de archivos CSS con gzip ahorra entre un 50 y un 70 % del tamaño del archivo.
