¿Tu estrategia SEO gira solamente en torno a las keywords? Si es así, siento decirte que es posible que estés un pelín anticuado. Pero no te preocupes, en este artículo te voy a explicar una “super estrategia” para que puedas posicionar esas palabras clave que tienes atravesadas desde hace tiempo y que no logras rankear del todo.
Vamos a hablar de nada más y nada menos que de la estrategia de Topic Clusters o también conocida como navegación por Clusters. Éste método se ha puesto de moda en los últimos años, sobre todo con el auge del diseño web para móvil (mobile first design).
De hecho, más que una estrategia como tal, se podría definir como una forma de organizar los contenidos de forma muy efectiva en cuanto a la experiencia de usuario y al SEO se refiere.
Esta estrategia me ha permitido penetrar en sectores competidos y posicionar palabras clave que no hubiera podido posicionar de otra forma. Creo que es especialmente interesante a la hora de crear un blog y segmentar las categorías en clusters, como veremos a continuación.
Estrategia de clusters de navegación
El algoritmo de Google ha ido evolucionando a lo largo de los años y ha ido marcando las “reglas del juego” con las que los SEO hemos tenido que jugar.
Google siempre ha intentando valorar el contenido de tu sitio a través de parámetros como la fuerza del dominio, el número de visitas, el tiempo medio de la sesión, el ctr, porcentaje de rebote y otras muchas más variables.
A estas alturas, ya deberíamos saber que algunos criterios van perdiendo importancia poco a poco y que Google se centra cada vez más en el usuario y su comportamiento.
Pues bien, la estrategia de navegación por clusters es una forma de estructurar los contenidos de tu web que beneficia a los usuario que visitan tu web y al “algoritmo de Google”, así que todos salimos ganando.
Por un lado, centras tus esfuerzos en un conjunto de contenidos y “te especializas” en un nicho concreto. Cosa que agradece el usuario, ya que cada vez más, la gente busca información más específica.
Por otro lado, puedes crear una estructura de contenidos interconectada entre sí, a través de un enlazado interno y esto es muy positivo a ojos de Google. Véase en el siguiente ejemplo.
Como puedes ver es bastante sencillo de implementar a simple vista. Se trata de agrupar contenidos en segmentos y enlazarlos entre sí de una forma “lógica”.
Partes de Topic Cluster
Este método de agrupación tiene 3 componentes principales. Vamos a hacer un breve repaso de cada uno de ellos.
Pilar de contenidos
El pilar content o pilar de contenidos, es el centro de nuestro cluster. En definitiva, es aquella página que engloba las keywords más importantes y que cubrirá la mayoría de intenciones de búsqueda.
El objetivo de este tipo de páginas es posicionar esos contenidos que más nos interesan, junto con las keywords relacionadas.
Cluster de navegación
Los Clusters son páginas de nuestro blog/web que tienen el objetivo de potenciar esos contenidos pilar y abarcar temas relacionados con un mayor detalle. Esto además de los beneficios de enlazado interno que supone, ayuda a aumentar el CTR.
Enlazado de clusters
El enlazado de clusters tiene como objetivo potenciar aquellas keywords long tails que queramos posicionar, además de las palabras clave principales (del pilar content).
Enlazado Interno
Con este enfoque, profundizamos en un tema concreto, con la intención de que el usuario pueda navegar por los clusters y encuentre toda la información que necesite.
Esto nos irá muy bien para posicionar keywords long tail.
Enlazado externo (backlinks)
A mi personalmente me gusta realizar el enlazado interno y externo con variaciones de palabras clave y sinónimos, sin ser muy agresivo con el anchor text.
Por ejemplo, si estamos haciendo un cluster sobre ratones de ordenadores inalámbricos, podríamos usar las siguiente variaciones:
Ratón inalámbrico
Mouse inalámbrico
Periféricos inalámbricos
Cómo usar una estrategia de clusters para tu web
Veamos un ejemplo muy sencillo sobre como implementar este tipo de estrategia de una manera práctica.
Supongamos que tenemos un apartado de «becas» en nuestro blog.
Ejemplo de utilización:
En este ejemplo, hemos creado un cluster para englobar todo el nicho de becas.
Por un lado tenemos el pilar central, que englobaría aquellas main keywords o palabras clave principales que más nos interese posicionar.
Después, lo enlazamos con contenidos relacionados y con aquellas keywords long tails que queramos.
Por supuesto, todo esta conectado mediante un enlazado interno.
Ventajas y desventajas de estrategia de Clusters
En mi opinión, la estrategia de clusters de contenidos ofrece muchas más ventajas que desventajas. No obstante, como es lógico, tiene tanto aspectos positivos como negativos.
Ventajas de estrategia de clusters
Es una forma efectiva de penetrar en sectores competidos.
Debido a la facilidad de navegación entre clusters, consigues un aumento del CTR.
La estructura está mucho más organizada y optimizada gracias al enlazado interno, esto es realmente beneficioso para el SEO.
Debido al alto grado de especialización en un tema en concreto, ayudas a los buscadores a saber que eres una autoridad en un tema en particular.
Desventajas de estrategia de clusters
Difícil implementación en algunas páginas o blogs. Por ejemplo, blogs de noticias, periódicos o páginas con contenidos muy horizontales.
En ocasiones puede ser un poco complicado organizar una estrategia de linkbuilding efectiva en este tipo de estrategia.
Si tienes muchas categorías en tu blog puede suponer un alto coste de recursos.
Conclusiones
Aunque haya toda una ciencia detrás de la Navegación por Clusters es algo bastante lógico desde el punto organizativo de una página web y que se lleva haciendo desde hace años. Los primeros en ponerle nombre a este método fueron el equipo de Hubspot con el nombre de Topic Cluster.
Está claro que este tipo de estrategia es una buena forma de posicionar contenidos, incluso en sectores que hay mucha competencia. Como he comentado ya varias veces, es una buena forma de penetrar en segmentos de mercado competidos.
No hay que dejar de lado que, los clusters son una opción de navegabilidad en el diseño web en formato movil, siguiendo la tendencia mobile first design.
La navegación por clusters es más efectiva que centrar todos los recursos en una keyword determinada. Francamente, creo que ha llegado para quedarse (hasta que Google diga lo contrario).
Y hasta aquí los Cluasters de navegación. Ahora te toca a ti implementarla en tu sitio web.
¿Te has quedado con alguna duda? ¿Tienes alguna sugerencia? Déjalo en los comentarios, no seas tímid@.
Yepalei! David Zamora por aquí. En esta ocasión quiero hablar sobre un tema que interesa a todo el mundo, por lo menos a todas esas personas que tengan una página web en WordPress o trabajen con este CMS.
En este artículo veremos como hacer que nuestro WordPress cargue más rápido y lo vamos a hacer sin instalar ni un plugin.
A mi personalmente me gusta hacer todas las modificaciones posibles a través de código e instalando el mínimo de plugins posibles.
Algunas de las formas de optimización que veremos a continuación son a través de archivos, como htaccess y functions.php. Así que primero, veremos un poco por encima que son estos archivos.
Antes de ponernos manos a la obra, voy a comentar algunas cosas que deberías saber antes de empezar a optimizar tu wordpress.
El fichero htaccess es un fichero especial que permite definir directivas de configuración específicas de cada directorio en Apache Server.
En nuestro caso, cuando instalamos WordPress, ya se crea automáticamente, así que no hará falta crear este archivo manualmente.
¿Qué es functions.php?
El archivo functions.php es un archivo que se encuentra dentro de nuestra plantilla de WordPress y sirve para dotar de funciones específicas nuestro tema.
Se suele utilizar para crear, cambiar y modificar cosas específicas de nuestro theme.
Cómo Optimizar WordPress sin plugins
En esta pequeña guía he puesto algunos trucos que son relativamente fáciles de implementar. Se que hay muchas otras maneras de optimizar WordPress sin plugins. A continuación he puesto las que yo sé, las que considero más fáciles de hacer y que no requieren tocar muchas cosas.
Y bueno, una vez hecha esta pequeña clausula para cubrirme un poco las espaldas, empecemos con la optimización.
Optimizar imágenes en WordPress
Vamos a empezar con una facilita. A estas altura ya deberíamos saber que las imágenes son un punto crítico en la carga de nuestro WordPress y es indispensable que las sirvamos comprimidas para aligerar la carga de la web.
Además de reducir el tamaño de las imágenes, es conveniente que tengan el mismo tamaño que el que se va a mostrar en la web.
Sí, el tamaño si importa (o al menos eso dice Google)
Existen varias maneras de comprimir las imágenes, vamos a verlas a continuación.
Plugins para optimizar imágenes en WordPress
Encuentro bastante cómodo el hecho de automatizar este proceso mediante un plugin. Pero para ser sinceros, esta opción es la que menos me gusta, ya que prefiero subir las imágenes comprimidas directamente al servidor.
Los plugins más conocidos para comprimir imágenes son:
Compress JPEG & PNG images (de Tinypng)
Optimus
Smush
Imsanity
Imagify
Aunque estos plugins no son santo de mi devoción, los encuentro especialmente útiles especialmente a la hora de trabajar con varios redactores.
Comprimir imágenes con aplicaciones online
Con este tipo de aplicaciones no hace falta descargar nada y son gratuitas. Dejo una lista de las más comunes.
Tinypng
Compressor.io
Kraken
imagecompressor.com
Comprimir imágenes con Photoshop
Podemos comprimir nuestras imágenes con Photoshop. Esta es la forma que utilizo yo normalmente para comprimir las imágenes. Es un poco más manual que las demás maneras, pero me gusta afinar yo mismo la calidad de las imágenes en relación a la compresión.
Y por si alguien está pensando que esta es una forma demasiado manual de hacerlo y que nos puede llevar mucho rato, os dejo aquí una forma de hacerlo en modo “bulk” y comprimir todas las imágenes que quieras de forma automática.
Comprimir imágenes en Photoshop en lote
Si queremos optimizar muchas imágenes y no queremos hacerlo una por una, podemos hacerlo de la siguiente manera.
Grabamos una acción en Photoshop cambiando el tamaño de la imagen(Ctrl + I) y luego hacemos la compresión (Alt + Ctrl + Mayus + S).
A continuación, realizaremos la acción que hemos grabado en lote. Para hacer esto deberemos ir a Archivo > Automatizar > Lote.
Antes de realizar esta acción en lote, es recomendable revisar que todas las imágenes sean del mismo formato (png o jpeg).
Desactivar emojis de WordPress
Los emojis son esos símbolos que google enseña cuando le da la gana en las SERPS (parece que ya se ha aburrido de mostrarlos) y que si no utilizas en tu wordpress, puedes desactivarlos de manera sencilla.
El propio WordPress carga un script en el head de tu página o mejor dicho… carga el script en cada p**** (puñetera) página, para dar soporte a estos iconitos.
Entonces, para desactivar estos emojis y aligerar la carga de nuestro WordPress podemos agregar el siguiente código en nuestro functions.php:
(simplemente copia y pégalo debajo del todo de tu archivo functions.php)
Recomiendo hacer esto a través de FTP o desde nuestro panel de administración (Cpanel/Plesk), donde tengas acceso a los archivos de WordPress, concretamente, en el archivo functions.php de nuestro theme*.
Minimizar el código CSS
Nuestro theme de WordPress tiene una hoja de estilos (style.css) que sirve para determinar la apariencia de nuestro sitio. La estructura de CSS se compone de reglas y estas se componen de un selector, una propiedad y un valor:
Un selector {
Una propiedad: Y un valor;
}
Cómo ves, consta de 3 líneas de código por cada selector, como mínimo. Y si además, utilizamos una plantilla multipropósito, es probable que tengamos miles de líneas de código en nuestra hoja de estilos styles.css.
Así que lo mejor, es comprimir estas líneas de código para que ocupe menos espacio.
Puedes comprimir tu código CSS con cualquier minificador de CSS online como cssminifier.com o cualquier otro.
Una vez lo tengas minificado, sustitúyelo en tu hoja de estilos.
Antes de comprimir el código CSS de tu hoja de estilos es muy importante que hagas una copia de seguridad (cópialo en un block de notas mismo). De esta manera, si algo sale mal, siempre tendrás el código original a mano.
Especificar la Caché del navegador
La caché de navegador es un sistema de caché que está en el navegador y se activa cuando el visitante accede a tu página web.
Este sistema guarda información de la página en el navegador, como por ejemplo las imágenes y cuando el usuario vuelve a tu página web no hace falta que descargue estos archivos otra vez.
De esta manera, tu página irá más rápida. Tus visitantes y tu hosting te lo agradecerán.
Este sistema de cache se puede implementar fácilmente con un plugin de gestión de cache como W3 Total Cache, WP Rocket, Wp Fastes Cache, etc. pero si lo hiciera con un plugin, tendría que cambiar el titulo del post, así que vamos a hacerlo de forma “manual”, especificando la caché del navegador mediante htaccess.
Para ello nos dirigiremos al directorio principal de tu WordPress y abriremos el archivo htaccess (en un bloc de notas normalmente) y copiaremos y pegaremos el código que aparece a continuación.
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 week"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rdf+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/schema+json "access plus 0 seconds" ExpiresByType application/vnd.geo+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType image/x-icon "access plus 1 month" ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
ExpiresByType text/html "access plus 1 minute"
ExpiresByType text/javascript "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 months" ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType image/bmp "access plus 1 month" ExpiresByType image/webp "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month"
ExpiresByType text/plain "access plus 1 month" ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/manifest+json "access plus 1 week" ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType font/eot "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/font-woff2 "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType font/woff "access plus 1 month"
</IfModule> ## EXPIRES CACHING ##
¡Recuerda guardar los cambios!
ℹ️ Si no lo encuentras es porque el documento htaccess suele estar oculto por motivos de seguridad, así que deberás ir a las opciones de la carpeta y seleccionar mostrar los archivos ocultos.
Utilizar imágenes en formato vectorial (SVG)
Las imágenes en formato vectorial o SVG son archivos de imágenes que se componen de líneas y formas independientes definidos por atributos matemáticos. Sí, he hecho un remix de la definición de Wikipedia.
Este tipo de archivo (.svg) no está soportado por WordPress, así que dependeremos de agregar una función en nuestro functions.php (muy simple) o usar un Plugin para así poder usar este tipo de imagen.
Habilizar SVG mediante functions.php
Para habilitar las imágenes SVG en WordPress deberemos agregar un pequeño trozo de código PHP en nuestro archivo functions.php (de nuestro theme). De esta manera se podrán subir y ver en nuestra página web.
Copiar y pegar el código al final de tu hoja functions.php.
Habilitar SVG mediante plugin
Si he de ser sincero, creo que habilitar las imágenes SVG mediante un plugin es la mejor opción si usamos este tipo de archivos con regularidad, ya que nos permite visualizar en la biblioteca de medios, entre otras cosas útiles.
Si utilizas el plugin de Contact Form 7 te voy a enseñar un truco para que tu WordPress vaya un pelín más rápido.
Me encanta este plugin, es fácil de configurar y “bastante liviano”. Además es muy versátil, ya que lo puedes integrar muy fácilmente en cualquier sitio de tu página web.
El problema de Contact Form 7 es que carga los propios scripts y archivos CSS del plugin en todas y cada una de las páginas de nuestro WordPress. Esto no es necesario, ya que solamente debería cargar estos archivos en las páginas de tu WordPress donde haya un formulario.
Para no cargar en todas las páginas los archivos de Contact Form 7 podemos escribir esta función en nuestro archivo functions.php de nuestra plantilla:
// Cargar archivos contactf7 solo en páginas que tengan el formulario
Ventajas y desventajas de Optimizar WordPress sin plugins
Hacer las cosas sin plugins puede parecer muy «guay» pero como todo en esta vida, tiene su parte buena y su parte mala.
A continuación, un pequeño análisis sobre las ventajas y desventajas que supone optimizar WordPress sin plugins.
Ventajas de Optimizar WordPress sin plugins
Tu WordPress cargará un poquito más rápido, ya que no contendrá tanto código sobrante.
Es una buena manera de empezar a aprender desarrollo web.
No requiere actualizaciones.
Menos riesgo de vulnerabilidades (sobre todo si utilizas plugins que no se actualizan constantemente).
Desventajas de Optimizar WordPress sin plugins
No es tan fácil como instalar un plugin.
Necesitas conocimientos en diseño y desarrollo web.
Si no sabes lo que estás haciendo puedes causar errores graves en tu WordPress.
Conclusiones sobre Optimizar WordPress sin plugins
Como ya he comentado en alguna ocasión, a mi no me gusta cargar WordPress con muchos plugins y procuro instalar los menos posibles.
Me gusta hacer mis propios plugins yo mismo, mediante código o por lo menos intentarlo.
Pero he de admitir, que esto de hacer tus propios plugins queda muy bien, pero no siempre es lo más recomendable.
A veces es mejor utilizar un plugin, especialmente si es alguna funcionalidad un poco compleja.
Así que si no lo ves claro, ¡No te líes! Y recuerda, antes de hacer cualquier cambio… ¡Haz una copia de seguridad!
Y hasta aquí este artículo sobre cómo optimizar WordPress sin plugins. Espero que te haya sido de utilidad y ya sabes, nos vemos en los comentarios de abajo.
Hola! Me llamo David Zamora y en este artículo te explicaré el proceso que utilizo para hacer páginas para clientes y todo lo que he ido aprendiendo durante mi experiencia como diseñador y desarrollador en estos largos años como freelance.
Antes de empezar, me gustaría decir que lo que voy a contar a continuación puede que no le funcione a todo el mundo. Aunque creo firmemente en mi método (cada vez más perfeccionado) quizás a otras personas les funcione de otra manera.
Sea como sea, a mi me ha funcionado bastante bien y estoy seguro que a mucha gente que empieza como freelance le puede interesar.
Como crear una página web desde cero
Como ya sabrás, existen muchas maneras de hacer una página web, en este caso nos centraremos en el proceso de creación de páginas con un dominio propio y de forma gratuita.
Crear una página web gratis con dominio propio
Vamos a ver un poco por encima las opciones más comunes que hay para hacer una página web con un dominio propio.
Crear página web en WordPress
Que voy a explicar de WordPress que no sepamos ya. Actualmente, más del 30% de todas las páginas web están hechas con este CMS (casi nada) y creo que es una de las soluciones más versátiles para crear cualquier tipo de página web. Además, no hace falta saber programar, puedes usar cualquier builder tipo elementor para maquetar una página.
Crear página web en HTML
Cuando se habla de hacer una página web en HTML, no solo nos referimos al lenguaje de marcado html, sino que también nos referimos a las hojas de estilo CSS, JavaSscript, lenguajes de backend como PHP o Python y la utilización bases de datos.
Además de implementar todo lo anterior y que funcione, la página web ha de quedar visualmente atractiva y le ha de gustar al cliente.
Siempre puedes utilizar algún framework o plantilla, para mitigar un poco la carga de trabajo y no empezar desde 0.
Crear una página web en HTML es una de las mejores soluciones que hay si quieres algo completamente personalizado y a medida. Eso sí, esta opción es mucho más costosa que crear una página en WordPress u otro CMS.
Crear una página web con Wix u otra plataforma similar
Nunca me he planteado hacer una página web con Wix o una aplicación similar para un cliente. No digo que no se pueda hacer, pero estas aplicaciones suelen estar orientadas a usuarios finales y no a diseñadores/desarrolladores. Además suelen estar muy limitadas a nivel de diseño y funcionalidades.
Pasos para crear una página
Una vez ya tengas decidido todo el tema técnico, ahora “solamente” quedará abordar todo el proceso con el cliente.
Me hubiera encantado que me hubieran explicado estos pasos cuando empecé, así que creo que estos conejos te pueden ser de utilidad, especialmente si estás empezando.
Bueno vamos al lío!
Para empezar a crear páginas web a clientes y para empezar cualquier cosa diría yo, hay que planificarse. La planificación nos va a ahorrar mucho tiempo y mucho dinero. Así que lo primero que te aconsejaría es apuntarte las cosas. Apuntar que es lo que tienes que hacer y cómo lo vas a hacer.
A mi, lo de apuntar las cosas en un papel no me funciona muy bien, prefiero utilizar cualquier aplicación como Google Drive, Trello, Todolist, etc. Realmente da igual donde te lo apuntes, siempre y cuando puedas tenerlo a mano cuando lo necesites.
Vamos al lío.
Primera Reunión
Si exacto, lo has adivinado, la primera reunión es la más importante de todas. Aquí intervienen un montón de factores para que se produzca la venta. Habrá un montón de factores externos que no podemos controlar, pero hay muchos otros factores que sí podemos controlar, incluso utilizar en nuestro propio beneficio. La primera reunión con un cliente es un tema del que se podría hablar largo y tendido. Pero como Ivan de seodelnorte me ha pedido que sea breve y que no me enrolle mucho (siento haberme enrollado un poco más de la cuenta), os voy a decir los puntos más importantes para mi (intentaré ser breve).
Apuntarse las cosas
Apúntatelo todo, no te imaginas la de veces que me han intentando hacer la “trece catorce”. Diciendo una cosa al principio y luego querer otra cosa diferente. Siempre que puedas deja constancia por escrito, si hace falta, puedes enviar otro email posterior a la reunión para confirmar todo lo comentado en la reunión.
No utilices el móvil
Esto es algo personal, pero creo que lo mejor es no utilizar el móvil para tomar notas de la reunión. Queda un poco mal que el cliente esté hablando y tú estés escribiendo en el móvil, ya que no tiene manera de saber si estás tomando apuntes o estás enviando algún meme por Whatsapp.
En mi caso, utilizo una libreta. “¡Pero si antes has dicho que no escribías notas en papel!” Efectiviwonder, no utilizo notas en papel, pero si tomo notas en mi libreta o block de notas en las reuniones. Siempre he tenido la sensación de que a la gente le gusta que tomes notas mientras ellos hablan (toma neuromarketing).
Conoce el negocio de tu cliente
Tenemos que saber qué es lo que quiere exactamente nuestro cliente. No todo el mundo quiere crear una página web bonita y ya está. Quizás tenga necesidades específicas como la captación de leads, venta de productos, etc.
En definitiva, cuantos más detalles sepas del negocio de tu cliente menos te costará saber lo que busca exactamente y arrancar con una idea inicial.
Cobrar una parte antes de empezar
En estos tiempos de incertidumbre, por llamarlo de alguna manera, es importante pedir una paga y señal.
“Tranquilo ya me pagarás cuando puedas” esta frase es uno de los peores enemigos de los freelancers.
Si el cliente se niega o se muestra reticente en este aspecto, es muy probable que tengas problemas para cobrar después. Y si él no muestra una serie de garantías, créeme que no te interesa trabajar con esa persona.
Evidentemente, tienes que ofrecer unas garantías tú también.
Planteamiento
Plantearemos cómo vamos a hacer la página web. Es decir, definiremos cual es su estructura, secciones, categorías, etc. También haremos benchmark de la competencia, para saber qué es lo que funciona y lo que no. Si se te ocurre algo muy obvio que nadie hace, siento decirte que a lo mejor es porque no es la mejor solución. Es por eso, que siempre conviene hacer un poco de espionaje… digo, me refiero al “estudio de la competencia”.
MockUp de la página
Una vez tengamos clara la estructura de la web y lo que queremos, realizaremos el mockup de la página. Esto se puede hacer de muchas formas. A mi personalmente, me gusta hacer primero un boceto en papel, ya que siempre es más rápido que utilizar cualquier aplicación.
Una vez tengamos el sitio web plasmado en papel, empezaremos a hacer el MockUp que usaremos como Breafing para mostrar al cliente.
Esta es una de mis partes favoritas. Yo suelo usar AdobeXD o Photoshop para hacer el mockup del diseño, pero hay un montón de aplicaciones gratuitas que te pueden servir, como Pencil Project.
Una vez finalizado el MockUp se le entrega al cliente para su validación. Es importante no pasar al siguiente paso antes de recibir el okey por parte del cliente.
Reconozco que soy un poco purista de los mockups, pero en ocasiones, este paso no es estrictamente necesario. Si hacemos una página web informativa de 400€ pues obviamente, no creo que haga falta hacer un mockup.
Diseño de la página
Una vez tengamos validado el diseño por parte del cliente, pasaremos a la maquetación del sitio web. Plasmaremos el diseño del Mockup que hemos hecho.
Evidentemente, realizaremos el diseño de la página en un servidor local o de pruebas para poder trabajar mucho más rápido.
Yo suelo usar Visual Studio Code para escribir el código, para proyectos sencillos que no “requieren backend”. Si por el contrario tengo que hacer algo con WordPress o PHP, utilizo Wamp server + Visual Studio Code.
Desarrollo web
Por si alguien no lo sabe, cuando hablamos de desarrollo web nos referimos a la programación, normalmente con PHP, JavaScript o Python, en caso de una página web.
La fase del desarrollo de la página web se suele hacer después del diseño. Se trata de implementar todas las funcionalidades del sitio como formularios de contacto, login de usuarios, sistema de comentarios, etc.
En el caso de WordPress, implementaremos los plugins necesarios para que la página tenga las funcionalidades que el cliente necesita.
Si necesitas comprar algún plugin para hacerle la web a un cliente, recomiendo no cobrarlo directamente e incluirlo en la factura como gastos suplidos*. Así te evitas tener que explicarle al cliente que es un plugin, cómo funciona, para qué sirve, etc…
Revisiones y validación del cliente
Una vez terminado tanto el diseño, como la parte funcional de la web, se lo enseñaremos al cliente para que lo vea y lo pueda testear.
Para no complicarnos la vida, una de las opciones más rápidas es subir el sitio web en un servidor de pruebas (online) o en un subdominio.
Si tu diseño no contiene backend, es decir si está hecha con html, css y js, puedes enseñarle la página web al cliente con una aplicación como netlify.
Desplegar
Me gusta la palabra “desplegar” para referirme a esta fase, y creo que queda mejor que decir “subir la página al servidor”. Pero si quieres parecer un super-profesional-programer, puedes utilizar el término “deploy” para hacer referencia a este proceso.
Aquí es donde vamos a subir la página web al servidor, crearemos las bases de datos necesarias y prepararemos en definitiva, su lanzamiento para que esté online.
Finalización de proyecto (Cobrar)
Esta es la fase donde coges el dinero y echas a correr.
Ahora en serio, después de el largo proceso que supone la creación de una página web, seguro que estarás impaciente para cobrar el duro trabajo de freelance que has hecho. Llegados a este punto, es posible que el cliente se haga un poco el loco, no te preocupes es normal, en estos casos recomiendo tener un poco de paciencia.
Puestos a dar consejos, te voy a dar otro que he aprendido después de algunos años como freelance: Normalmente, “cuanto más insistas en cobrar, menos caso te harán”.
Entonces, ¿Significa esto que no le tengo que decir nada al cliente? No, por supuesto que tienes que decírselo. De hecho creo que la mejor manera de hacerlo es de forma directa y respetuosa, pero sin hacerse pesado.
Indexación
Cuando hayas cobrado y ya tengas el fajo de billetes en tu mano, ya podrás indexar con tranquilidad la página web de tu cliente.
Lo que suelo hacer yo es abrirle una cuenta de Google Search Console e indexar el sitio. Esto no es obligatorio, pero es algo que se agradece, bueno a mi no me lo han agradecido nunca, pero lo hago porque así el cliente ve la página web en google más rápido.
Y aquí termina el proceso de creación de una página web como freelance, más o menos resumido…
Ahora vamos a contestar algunas preguntas típicas que la gente suele hacerse cuando empieza en como freelance.
Se puede crear una página web gratis
Por supuesto que sí, la opción más sencilla es utilizar un CMS como WordPress, que no requiere conocimientos en programación y es fácil de aprender. Con WordPress puedes hacer páginas web muy completas sin gastarte ni un céntimo.
También puedes hacer una página web gratis con HTML, CSS, JavaScript, PHP, etc. y cualquier lenguaje de programación.
¿Cuánto vale hacer una página web?
El precio de una página puede variar en función de muchos factores. Pero después del tocho de artículo que has leído, imagino que no te valdrá con un simple “depende”. Así que, a continuación voy a intentar explicar de forma muy resumida los principales tipos de páginas web y sus costes de mercado.
Antes de nada, quiero recalcar que no vamos a hablar de todos los costes derivados de una página web, como las fotografías, logo, texto, etc. Veamos pues los principales tipos de diseños web que puedes encontrar en cualquier agencia de diseño web o marketing digital en general.
Diseño WordPress
El diseño de páginas web en WordPress es la opción más común. Es una solución económica y relativamente fácil de implementar.
Puedes usar cualquier tipo de plantilla para su diseño o utilizar plugins de maquetación como Elementor, Divi, Beaver Builder, etc. Si tienes poco presupuesto, es una de las mejores opciones.
El precio de mercado de una página web hecha en WordPress es de 500€ a 1000€ aproximadamente.
Ventajas
Es fácil de instalar.
Facilidad de administración (ideal para que el cliente pueda autogestionar).
Es de código abierto.
Es gratis.
Contras
Nivel de personalización y funcionalidades un poco limitadas.
Contiene código sobrante.
Riesgo de vulnerabilidad (especialmente si no se configura adecuadamente).
WordPress a medida
Un WordPress a medida es una solución más personalizada que un wordpress tradicional. Normalmente no se utiliza una plantilla comercial, sino un desarrollo con un Starter theme o una solución a medida desde cero. Si quieres ver un buen ejemplo de este tipo de diseño, échale un al artículo de Cómo crear un Theme para WordPress a medida.
El precio de mercado de un diseño WordPress a medida, es a partir de 1000€.
Ventajas
Mayor nivel de personalización.
Menos código sobrante (CSS, Scripts, etc).
Carga de la web más rápida.
Contras
Riesgo de vulnerabilidad (aunque un poco menor que con WordPress tradicional).
Mayor coste que WordPress con plantilla estándar.
Requiere conocimientos avanzados (HTML, CSS y PHP.
Página web a medida (html)
Como hemos comentado anteriormente, cuando hablamos de webs a medida o en html, nos referimos a páginas hechas con un frontend (HTML, CSS y JS) y con un backend (PHP, Python, MySQL, etc).
Se podría decir que esta es la opción más profesional, pero también más costosa que hacer una web con WordPress.
El precio de un diseño a medida suele ser a partir de los 1500€ – 2000€ (aproximadamente).
Ventajas
Página más rápida.
Es más seguro.
Es más rápido.
Máximo nivel de personalización.
Contras
Requiere más trabajo.
Es bastante más caro que otras opciones.
Requiere conocimientos amplios en diseño y desarrollo web.
Conclusión final
No quería acabar el artículo sin comentar algunas conclusiones que creo que son interesantes, especialmente para aquellas personas que quieran iniciarse en el diseño web.
Lo primero que le diría a alguien que empieza, es que no subestime el diseño web.
Existe una parte técnica de la que todo el mundo habla, pero también hay otras partes, como la estética, de la que no se suele hablar tanto y en ocasiones es más complicada. Una vez tienes la parte técnica y la parte estética dominada, es decir, páginas web funcionales y con un diseño atractivo, has de empezar con tratar a los clientes, que es todo un mundo ¡En ocasiones, te tendrás que armar de paciencia!
Otro consejo que considero importante, es que creo que es mejor un WordPress bien optimizado que no un «diseño a medida mediocre» en HTML. Esto puede parecer una tontería pero a día de hoy sigo viendo algunas páginas web a medida sin certificado SSL o cargando un montón de librerías y peticiones externas que hacen que la página vaya lenta.
Bueno, pues hasta aquí la lluvia de consejos.
Aunque parezca mentira, este artículo es solo un resumen de lo creo que hay que hacer para realizar una página web como freelance desde cero y tener el control de la situación.
Ahora si, me despido, pero no sin antes animarte a que pruebes las cosas por ti mismo y encuentres lo que mejor te funciona por ti mismo.
⬇️ Si te has quedado con alguna duda o quieres dar tu opinión ⬇️
Mi nombre es David Zamora y llevo desde el año 2013 enganchado al SEO y todo lo que lo rodea. Actualmente tengo un pequeño blog, davidzamora.blog donde escribo pocas veces, pero muy intensamente.
Desde mis inicios, empecé a crear mis primeras páginas con Joomla y al poco tiempo, descubrí WordPress y empecé a hacer mis primeros nichos.
Después de descubrir este CMS, empecé a hacer mis primeras páginas con WordPress para clientes. Eran diseños sencillos, normalmente páginas corporativas o blogs muy simples, no solía cobrar más de 500€ por página web.
Por mis ansias de mejorar y de complicarme la vida, empecé a buscar maneras de mejorar mis diseños. Quería hacer páginas web más personalizadas y que en general, estuvieran mejor optimizadas.
La idea era buscar la manera de hacer páginas web en WordPress que fueran livianas, con tiempos de carga rápidos y a la vez con un diseño propio y atractivo.
A todo esto, hay que añadir que también buscaba la manera de mejorar mis conocimientos en diseño y desarrollo web.
Después de un tiempo perfeccionando el método, pasé de cobrar 500€ por una página a cobrar hasta 3500€ por una página a medida en WordPress.
Esto lo hice gracias a la flexibilidad de este CMS, que te permite crear tu propio theme personalizado de WordPress.
Como habrás podido observar, he dicho método y no técnica o truco. Esto no es ningún truco sencillo, de hecho, a mi me costó tiempo implementarlo de forma correcta.
Atención: Este post está orientado a personas con conocimientos en diseño web.
¿Qué es lo que vas a ver en este artículo?
A continuación, voy a explicar como hacer tu propio theme de WordPress con la ayuda de un starter theme. De esta forma puedes hacer tus páginas web de forma completamente flexible y personalizada. Además, puedes crear tus propias plantillas y venderlas.
Un starter theme, es una plantilla que contiene solo el “esqueleto” de la página. Nos permite tener una estructura con la que poder trabajar de forma ágil para poder personalizarlo como queramos. También nos puede servir como framework.
Esto lo haremos mediante Html, css y un poco de php.
Cuando empecé a hacer mis propios themes no tenía ni idea de programación. Bueno, actualmente utilizo php y js de forma simple, para hacer scripts o plugins, que me permiten agregar funcionalidades a WordPress. Así evito instalar muchos plugins. Pero he de reconocer, que actualmente no soy ningún experto en programación.
Con esto quiero decir que si yo he podido hacerlo sin tener ni idea de programación, cualquiera puede hacerlo también (siempre y cuando tengas unos conocimientos mínimos).
Cómo crear un theme WordPress desde cero
Para crear nuestra propia plantilla usaremos el Starter theme de Underscores. Esta plantilla ha sido creada por el equipo de Automattic, que es la misma empresa desarrolladora del propio CMS de WordPress.
Es posible que pienses que crear tu propio theme son ganas de complicarte la vida y quizás tengas toda la razón.
No obstante, creo que son cuatro los motivos por los que me gusta crear mis propios themes de WordPress y por los que creo que puede ser interesante para SEOs, Diseñadores Web o Agencias de Marketing.
Nivel de personalización y flexibilidad
El nivel de personalización es mucho mayor que en cualquier theme de WordPress. Con los conocimientos necesarios, puedes crear diseños completamente exclusivos.
También puedes crear cualquier tipo de funcionalidades que se adapten a las necesidades de tu nicho o de tu cliente con mayor facilidad que con un theme tradicional.
Nivel de optimización
Como le suele pasar a muchos SEOs, yo también estuve obsesionado con la optimización de los tiempos de carga. Y por mi experiencia, este tipo de themes cargan más rápido que la mayoría de plantillas comerciales de WordPress.
Aquí dejo un test de velocidad de la página de davidzamora.blog. No es la página que está más optimizada (prefiero hacer más marca que seo en este caso) pero creo que puede ser un ejemplo de diseño a medida en WordPress que está bastante optimizado.
Esto se debe a que este starter theme no carga tantos scripts, ni hace tantas peticiones, como en algunas plantillas de WordPress.
Actualmente utilizo este tipo de plantillas para mis nichos, suelen estar bastante más optimizados que los de la competencia y cargan más rápido.
Para aprender
Siempre me ha gustado mejorar lo que hago y el diseño web no es una excepción. Además, siempre he disfrutado creando mis propios diseños y esto me ha servido para poder desarrollar páginas a medida en html, css, js y php.
Creo que empezar con Underscores es una buena opción si te interesa el desarrollo web.
Para ganar más dinero
Ahora puedo cobrar bastante más por hacer diseños web en WordPress.Como he comentado antes, he llegado a cobrar 3500€ por una página a medida, con este método.
¡Ojo! Esto no significa que siempre cobre 3.500€ por cada página que hago (ojalá).
¿Qué herramientas utilizaremos?
Antes de ponernos manos a la obra, necesitamos montar nuestro entorno de desarrollo. Utilizaremos dos programas que creo que son obligatorios para cualquier diseñador web.
Un servidor local
Utilizaremos un servidor web local (en nuestro ordenador) para desplegar la instalación de WordPress y poder trabajar con el theme de forma mucho más directa que en un hosting. Puedes utilizar cualquier servidor, como Xampp, WampServer, Mamp, etc.
Yo suelo utilizar WampServer, que es el que más me gusta de los que he probado.
Un IDE o Editor de código
Para escribir código es indispensable que lo hagas desde un editor de código/texto o un IDE (entorno de desarrollo integrado). Yo utilizo Visual Studio Code, pero puedes utilizar el que tu quieras.
Underscores Theme
Utilizaremos el propio theme de underscores, que por cierto viene preparado para usar Woocomerce si queremos y también para trabajar con preprocesadores CSS como SASS.
Underscores es uno de los themes que más me gustan para diseñar una plantilla en WordPress, aunque hay un montón starter themes.
Recuerda descargártelo de la página oficial underscores.me
¿Hace falta crear un child theme de WordPress?
Un starter theme tiene los archivos necesarios que hacen de base, es decir, viene con las mínimas funcionalidades y estilos posibles para que lo puedas usar como «lienzo en blanco». Así que realmente no hace falta crear un child theme de WordPress ya que un starter theme tiene una estructura muy simple.
¿Utilizar Bootstrap para crear un theme en WordPress?
Si estás acostumbrado a utilizar bootstrap en tus proyectos, puedes utilizarlo en cualquier starter theme como Underscores. Para utilitzar boostrap en tus themes de WordPress puedes hacerlo mediante un enqueue a través del archivo functions.php.
Puedes utilizar la cdn de bootstrap o descargarte los archivos localmente y apuntar la ruta del archivo en el enqueue.
Yo personalmente prefiero trabajar siempre con flexbox y css grid para maquetar en CSS. En cuanto al JavaScript, suelo crear pequeños scripts y utilizo librerías para cosas concretas.
Guía para crear un theme de WordPress con Underscores
Esta será una guía básica sobre cómo hacer tu propio theme. También puede servir si utilizas otro starter theme parecido, la estructura siempre es más o menos la misma, tratándose de WordPress.
Aunque parezca mentira, lo único que se necesita para crear una plantilla de WordPress son dos archivos, elindex.phpy la hoja de estilos styles.css. Con estos dos archivos ya podrías crear tu propio theme, por ejemplo, de una landing page.
En este caso, al ser un theme completo, tendrá muchas más partes.
A continuación, veremos las partes más importantes y explicaré cómo lo hago yo.
Vamos al lío.
Functions.php
El archivo functions.php se encarga de almacenar las funciones propias de la plantilla. Underscores ya viene con la mayoría de funciones necesarias para que no tengamos que tocar mucha cosa. En este archivo es donde podremos hacer un enqueue para agregar las fuentes que queramos usar. Quedaría algo así:
El header, que es la parte superior de una página web, suele incluir el logo y el menú de navegación. Creo que es una parte un poco complicada de hacer si no sabes CSS o JS, ya que deberás hacer el menú de navegación responsive. Por ese motivo, recomiendo que uses algún tipo de boilerplate o plantilla.
Aquí os dejo el template que aparece en su mismo repositorio del archivo header.php.
Si no quieres complicarte mucho la vida, simplemente copia y pega el código en el archivo header.php.
Footer.php
Haciendo un poco de repaso, el footer es el pie de página, donde suelen ir los créditos, enlaces de interés y algún que otro enlace blackhat (es broma). En este archivo vamos a diseñar nuestro pie de página, que se verá en todas las páginas que tengamos en nuestro WordPress.
Aquí podemos cargar cualquier script que queramos utilizar, como Google Analytics.
Ejemplo de pie de página simple (html y css).
Single.php
El archivo single.php se encarga de mostrar el loop de contenido de los posts. Hablando en cristiano, se encarga de mostrar la parte “dinámica” de un post. Aquí podemos configurar donde queremos mostrar la foto destacada, si queremos mostrar la categoría, el autor, etc.
Lo que suelo hacer en este archivo es maquetar el encabezado de los artículo a mi gusto.
Además, luego le suelo añadir algún que otro widget en la parte inferior. Por ejemplo, un pequeño plugin en php que muestra artículos relacionados.
Page.php
El archivo page.php tiene la misma funcionalidad que el archivo single.php, pero en este caso, para las páginas de WordPress.
Podemos crear una página manualmente creando un archivo con el nombre de la página en el directorio de nuestro theme.
Por ejemplo, template-pagina-contacto.php para crear una página de contacto.
Y después declararemos en el propio archivo que se trata de una plantilla:
Le podemos poner el nombre que queramos Tampleate Name:<nombre de la página>.
Index.php
El index.php se podría considerar como el pilar de la plantilla y en este caso, se utiliza como archivo estándar a mostrar. Es decir, si alguna página no tiene una plantilla asignada, permite que se muestre el loop igualmente.
CSS – Hoja de Estilos
La hoja de estilos o styles.css es el archivo donde vamos a escribir todo el código css para la maquetación del theme. La hoja de estilos de Underscores viene bastante pelada, con cuatro elementos.
Recomiendo usar Normalize.css para tener algunos estilos predefinidos y así no tener que empezar desde cero. (Simplemente copias el código CSS y lo pegas en el archivo styles.css de tu plantilla.
Este archivo se encarga de mostrar la página principal de nuestro sitio. Es importante no confundir el archivo front-page.php con el archivo home.php. El archivo home.php se encarga de mostrar el blog.
Archive.php
A través del archive.php podemos personalizar las páginas de categorías, taxonomías y etiquetas.
Voy a dejar por aquí la jerarquía de plantillas que utiliza WordPress, por si a alguien le interesa el tema.
He de decir, que la primera vez que vi este diagrama no entendí ni un mojón. Pero, una vez ya sabía un poquito del tema, este mismo diagrama me ha servido de ayuda. Así que si no entiendes nada al principio, tranquilo, es normal.
Antes de hacer el diseño de tu theme
Antes de hacer el diseño de la página siempre hago un pequeño MockUp. Para mí, hacer primero un esbozo de la página es fundamental y me ahorra un montón de trabajo. Creo que para planificar el diseño es algo esencial.
Desplegar en servidor / hosting
Una vez tengo el theme completamente diseñado y desarrollado en el servidor de pruebas lo importo con algún plugin como All in one WP Import. Si la página es muy pesada, por ejemplo, en el caso de migraciones, recomiendo usar otro plugin como Duplicator. Si no, a malas siempre lo puedes hacerlo a mano.
Por cierto, si no sabes que hosting contratar, te recomiendo trollihosting.
Bonus tip:
Evidentemente, cuesta más trabajo hacer una página de esta manera, pero hay algunos trucos muy sencillos para agilizar este tipo de diseños. Una cosa que funciona muy bien es tener una plantilla predefinida con algunos archivos ya maquetados, como por ejemplo, el header (así nos ahorramos todo el tema del menú responsive), el footer, el blog, páginas de categorías, etc.
Conclusión
Y hasta aquí uno de mis métodos para cobrar más dinero por un diseño WordPress, con el que he podido facturar 3.500€ por una página web en WordPress.
Supongo que te habrás dado cuenta de que no es algo fácil. Hacer una plantilla personalizada con un starter theme requiere su tiempo. Por eso recomiendo mirar el repositorio de github de underscores, donde aparece toda la documentación.
Este método me ha ayudado mucho a mejorar como diseñador web y me ha servido para aprender algunos principios básicos de PHP y de desarrollo en WordPress. De hecho, me atrevería a decir que ha sido el precursor de mis inicios como desarrollador web.
¿Te has quedado con alguna duda? Pregúntame lo que quieras en los comentarios, seguro que Ivan está agradecido (por el engagement y eso) y yo te contestaré encantado, un saludo!
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies
![Lee más sobre el artículo Cómo optimizar WordPress sin plugins [Guía 2021]](https://www.seodelnorte.com/wp-content/uploads/2021/05/Guia-optimizar-wordpress-sin-plugins.png)
![Lee más sobre el artículo Cómo crear un Theme para WordPress a medida [Guía 2021]](https://www.seodelnorte.com/wp-content/uploads/2021/04/Banner-Como-crear-un-theme-de-wordpress.jpg)
