1. Auditoría de tu sitio web actual
- Listado de páginas web, entradas de blog y páginas de destino
El primer paso es evitar que tu proyecto de rediseño web se convierta en un caos.
Para ello, debes realizar un inventario de todas las páginas de tu sitio web.
Usa una hoja de cálculo donde tengas una tabla para las páginas web, las páginas de destino (landing page) y las entradas de blog.
Así luciría la estructura de las páginas web:
Para las entradas de blog, además de las columnas web, añade una de notas si es necesario.
Para las landing puedes agregar, adicional a las columnas que ya tienen las páginas web, una de objetivo para identificar el uso que se le da y, con base en eso, decidir si se mejora o se elimina.
- Creación del nuevo mapa de sitio
Ya que tienes el inventario, duplica el documento anterior y colócale el nombre "nuevo mapa de sitio".
El primer paso es borrar todas las filas que tienen en estado “Eliminar”.
Una vez hecho esto, en caso de ser necesario, añade filas para páginas nuevas según sea el caso: principales o subpáginas.
Después, agrega las siguientes columnas, seguidas de Estado, para trabajar tu nuevo mapa de sitio.
Avance: tendrá las siguientes opciones: Lista, En progreso, En revisión y En pausa.
Contenido de la página: aquí haces referencia al documento que contiene la información de la sección.
Esta columna ayudará a conocer cómo va el contenido de la página.
Nota: en caso de que se deba considerar algo, se anotará en esta columna.
Tanto en este paso como en el primero, te recomiendo que uses Google Drive o Microsoft One con sus respectivas versiones para Hojas de Cálculo y Documentos. Esto hará que exista una única versión y todos puedan colaborar.
- Revisa y optimiza el contenido de cada página
Para que tu sitio web sea útil y contribuya a generar oportunidades de venta, debes centrar todo el contenido en tus potenciales clientes siendo claro y confiable. Principalmente, evita confundirlos o peor aún, hablar más de ti que de lo que haces por ellos.
Existen varias metodologías o marcos que puedes usar para la estructuración del contenido. En Media Source estamos certificados en StoryBrand, por eso es la que solemos usar. Los puntos claves son los siguientes:
Primero, tu cliente es el protagonista así que, de nuevo, tu sitio debe hablarle más a él que sobre tu empresa.
Este es el marco de Story Brand que puedes crear leyendo el libro o con el curso disponible en línea.
Puedes ver un ejemplo de cómo se aplica en nuestro sitio web.
En caso de que quieras que te ayudemos, agenda una reunión con uno de nuestros consultores.
3. Configuración de tu marca
Los temas que hemos creado heredan la configuración predeterminada que tiene tu cuenta de HubSpot. Para colocar los valores entra a este enlace: Configuración de marca.
Accede a la opción principal: Kit de marca.
En la primera pestaña “Logo”, completa los campos y carga tu logo; de preferencia, en SVG. El Favicon es el que se muestra en el navegador al lado del nombre de la página; debe ser cuadrado y PNG.
En la pestaña de colores, añade los colores de tu marca:
Puedes usar la opción de importar los colores desde tu sitio actual.
O puedes añadirlos manualmente. El color principal, en la mayoría de los casos, es negro o un color oscuro.
Ahora debes personalizar las opciones disponibles del tema, accediendo desde la pestaña Themes:
En caso de que no se muestre el tema que descargaste, da clic en "Acciones" y "Cambiar Tema", para elegir el tema que quieres usar.
Para iniciar la configuración, da clic en el nombre del tema para abrir las opciones disponibles.
Brand colors tomará los colores previamente configurados en el kit de marca. Si revisas el previo de las plantillas y no te convencen, puedes cambiarlos:
Con respecto a las fuentes web, debes elegir 2; una para los títulos y otra para el resto de los elementos. Las fuentes deben ser de Google Fonts; solo en el caso de las versiones Pro se puede solicitar sin costo configurar una fuente personalizada.
Para una fuente personalizada es importante haber creado el tema hijo.
Existen varias opciones disponibles que puedes configurar:
- Borde redondeado (Corner radius)
- El ancho de la página
- El espacio entre secciones
- Los 3 tipos de botones que se incluyen
- Los estilos de los formularios
- Iconos
- Tablas
- Las opciones disponibles para el encabezado y pie de página
Para ver los ajustes puedes cambiar de página del lado derecho y ajustar cualquiera de estos estilos después.
4. Configuración de encabezado y pie de página
Ahora es momento del encabezado y pie de página. Ambos elementos son globales, lo que quiere decir que se muestran en todas las páginas y solo tendrás que editarlos una vez.
En el caso del encabezado, todos requieren del logo. Dado que ya lo configuraste desde el kit de marca, no será necesario editarlo. En caso de que quieras colocar una variante, puedes hacerlo desde el encabezado global.
Otro elemento es el menú de navegación. En el encabezado, se selecciona el menú que debe mostrarse en todas las páginas y se crea en Navegación.
En esta sección puedes crear varios menús y añadir las páginas. Dado que aún no tienes las páginas, por ahora solo crearás los dos menús: uno para el encabezado y otro para el pie de página. Si no quieres un menú en el pie de página, solo crea uno.
Esto, con el objetivo de seleccionarlo tanto en el encabezado como en el pie de página.
En algunos temas se incluye un botón que puedes configurar para la página de Contacto, Agenda una cita o alguna otra opción importante. En caso de que no quieras ese botón, lo puedes ocultar.
En el pie de la página puedes elegir cambiar el logo por otra variación, añadir un menú distinto al del encabezado, colocar los enlaces de tus perfiles sociales, los enlaces a los términos y condiciones, además de la política de privacidad.
Si así lo prefieres, puedes añadir más bloques en el pie de página y reajustar el número de columnas o filas a tu elección.
Hasta aquí ya tienes la configuración necesaria para empezar a reconstruir tu sitio.
1. Importar la estructura de tu sitio web actual a HubSpot
Para tener orden vamos a importar la estructura de tu sitio web y de acuerdo con el documento que hiciste en la sección 1, vas a importar la estructura de las páginas que se deben conservar.
Nota: La importación de la estructura no trae el contenido, solo importa la url, siempre que existan el título de la página y la metadescripción.
Para iniciar con la importación de la estructura, accede a Importación de contenido.
En Importación de contenido, inicia una nueva importación de las páginas web.
Coloca el dominio de tu sitio web y asegúrate de que coincida http o https, de acuerdo con tu dominio. La mayoría es https://, pero para estar seguro, puedes comprobarlo abriendo tu sitio en el navegador.
Da clic en continuar y debes esperar unos minutos de acuerdo con el tamaño de tu sitio web.
En cuanto el estado cambie a listo para importar, con base en la auditoría que hiciste en la Sección 1, elige qué páginas se deben importar.
Antes de importar puedes elegir qué plantilla asignarle. Si aún no conoces las plantillas del tema elegido, puedes verlas en el previo de cada uno. De igual forma, puedes omitir la elección de la plantilla.
Cuando termines de elegir qué páginas vas a migrar, da clic en continuar y elige el dominio. En caso de que sea CMS Hub Professional, puedes añadir varios subdominios y elegir al que pertenece la importación.
Si solo es un dominio, selecciónalo y listo.
Es recomendable que importes las páginas en borrador; la casilla de sobre escribir eliminará páginas que hayas creado que tengan la misma url, entonces, si empezaste creando páginas, no marques la casilla.
2. Importar tu blog
Ahora realicemos la importación del blog. En caso de que no tengas un blog, es importante que sepas que estás perdiendo muchas oportunidades de negocio, ya que uno de los tantos beneficios de un blog es que atrae a potenciales clientes desde los resultados de búsqueda.
Dependiendo de la versión de CMS, puedes crear un blog o más de uno. Vamos a iniciar con la importación de tu blog, en la misma sección de Importación de contenidos.
Crea una nueva importación, pero ahora elige Importar Blog post.
En este caso, la importación de blog sí incluye el contenido. Puedes usar la opción de copia inteligente para que el robot de HubSpot haga su magia.
Completa los campos que te marca, empezando por la url de la página principal del blog. Esta suele ser donde se encuentra el listado de todas las entradas, seguido de la url de la entrada de blog más reciente.
Después, en el listado que te muestran, elige la plataforma que estás usando actualmente. Si no la conoces, puedes elegir No estoy seguro.
Ahora crea un nuevo blog en tu cuenta de HubSpot.
Posteriormente, completa los campos obligatorios.
En este punto, dado que en tu kit de marca elegiste un Tema, este se usará para el blog, por lo que no es necesario configurar nada más que completar los campos.
Una vez que crees el blog y todos los campos de la importación estén completos, da clic en Iniciar. Después, debes esperar un par de minutos.
Cuando la importación esté lista para revisar
Debes realizar un mapeo de los campos para alinearlos con los que necesitas en HubSpot:
Dependiendo de en dónde esté tu blog actualmente, aparecerán algunos campos. Elige los que apliquen y completa la importación.
Hasta aquí ya tenemos la estructura de las páginas y el blog importado, así que ahora vayamos al siguiente punto de la preparación.
4. Crea tus páginas
Para este punto es muy probable que la importación de la estructura de las páginas esté completa, por lo que vamos a ir a páginas web.
Aquí van a aparecer todas las páginas que se importaron en cuanto a la estructura.
Para empezar a completarlas, es necesario entrar. En caso de que no hayas elegido una plantilla durante la importación, al acceder a cualquier página te va a solicitar elegir una plantilla.
El número de plantillas disponibles dependerá del tema que hayas instalado. Elige la plantilla que más se adapte al contenido de la página que vas a crear.
Si ninguna plantilla tiene todos los elementos, no te preocupes, puedes elegir cualquier plantilla y ya dentro del editor de la página, quitar, añadir y editar secciones según lo requieras.
Todos los temas que hemos creado tienen secciones que puedes usar y que te ayudan a que la creación de una página sea mucho más ágil.
Para acceder a las secciones del tema debes dar clic en Home y posicionarte entre una sección y otra para visualizar el círculo de +.
El número y los módulos dentro de cada sección varía de acuerdo con el tema descargado.
Puedes fácilmente eliminar secciones completas o cambiar una sección de un columna a dos columnas o viceversa; simplemente arrastra un nuevo módulo y listo.
Para un mejor control, usa la pestaña de Contenido. Esto te va a permitir acceder a las opciones de estilos de las secciones, columnas y filas de forma más fácil.
Asimismo, puedes crear nuevas secciones solo con un determinado número de columnas y posteriormente, arrastrar los módulos necesarios. Para hacerlo, haz lo mismo que para elegir una sección, pero da clic en la pestaña Estructuras:
Es una manera más de crear secciones:
Recuerda que siempre puedes reordenar las secciones, columnas y filas.
Por último, cada tema tiene un determinado número de módulos, los cuales permiten mostrar contenido de varias formas y acomodos, así como estilos. En algunos módulos puede cambiar los estilos o alguna variación del módulo.
Otro punto importante y una característica de los temas que hemos creado es la posibilidad de editar la versión móvil.
En los temas gratuitos esto te ayuda a los estilos de secciones y columnas. En el caso de los temas Pro, ciertos módulos tienen estilos que se aplican a dispositivos móviles.
Para acceder a esta característica basta con dar clic en el icono móvil.
Esperamos que puedas crear páginas sorprendentes que enamoren a tus potenciales clientes con los temas que hemos hecho y el potente editor del CMS de HubSpot.
Recuerda publicar las páginas a medida que las completas.
Pasemos a la siguiente sección.
3. Conectar dominio
Para conectar el dominio debes completar los pasos desde Dominios. El paso a paso lo inicias dando clic en Conectar.
De acuerdo con la versión del CMS, puedes elegir un subdominio diferente para cada tipo de contenido: Páginas web, Páginas de destino y Blog.
En algunos casos, dependiendo del proveedor, puede realizar la conexión de forma automática únicamente conociendo permisos, pero depende del proveedor de tu dominio.
Si no es así, debes hacer los cambios en tu dominio de forma manual. Aquí tienes la guía de HubSpot para hacerlo.
Cuando tu dominio esté conectado completamente, HubSpot añadirá el SSL y podrá visualizarse tu nuevo sitio en HubSpot.
4. Añadir redireccionamientos
Para saber si requieres realizar este paso, consulta el Excel de la auditoría que realizaste en la Sección 1.
Los redireccionamientos se pueden configurar únicamente en las versiones CMS Starter o superiores.
Los redireccionamientos se configuran en caso de que una página se haya eliminado o se haya combinado con otra. Esto, para brindar una mejor experiencia de navegación a usuarios que anteriormente hayan visitado el sitio o en caso de que el enlace de la página que ya no va a existir se siga mostrando en los buscadores.
Puedes hacer el redireccionamiento desde la sección de Redireccionamiento de URLs.
Da clic en añadir nuevo redireccionamiento y completa los campos.
La URL original es la que ya no va a existir y la de redireccionamiento es a donde queremos que sea enviado. Puedes añadirlas una a una o realizar una importación.
5. Filtrar el tráfico interno
Por último, es importante filtrar el tráfico interno de la empresa.
Para hacerlo, se requiere primero comprobar que la IP es fija para añadir una sola o bien, añadir cada una de las IP de los miembros de la empresa.
Excluir el tráfico interno te va a permitir tener métricas más claras y realistas.
En caso de que no cuenten con una IP fija, puedes pedirle a todo el equipo que envíe la IP. Existen varias herramientas en línea que pueden proporcionar ese dato.
Ya que tengas las IP, añádelas en la sección Avanzada de seguimiento, en la sección de Excluir Tráfico:
Si es necesario, también puedes bloquear referencias que comúnmente se usan para realizar pruebas de desarrollo. Esto, en el segundo cuadro.
Puedes actualizar el listado de IP según sea necesario.
Por último, guarda los cambios y listo.
¡Ya puedes ir a celebrar! Tienes tu nuevo sitio web. Solo recuerda que debes regresar, ya que lo bueno aún está por suceder.
Ahora tienes un website en una herramienta que te permitirá ejecutar estrategias de forma más ágil.
