Archivo mensual enero 2019

Poradw.es

Redirecciones 301 y archivo .htaccess

¿Qué es una redirección 301?

Resumidamente envía a los visitantes de una web a otra diferente automáticamente.

Ejemplo: Un visitante entra a web1.com y automáticamente es redirigido a web2.com.

¡AVISO! Las redirecciones 301 son permanentes. (Si buscas algo temporal, estas buscando una redirección 302)

¿Cómo hacer una redirección 301?

Para realizar una redirección 301 necesitamos tener acceso al fichero .htaccess de tu hosting o servidor.

¿Qué es el archivo .htaccess?

Es un archivo de texto que puedes editar en un bloc de notas o en otro editor. Se pueden configurar las políticas de acceso a los directorios y archivos de la web para realizar configuraciones cómo redirecciones.

¿Cómo editar el archivo .htaccess?

  1. A través de un cliente FTP: Puedes utilizar FileZilla por ejemplo o cualquier otro.
  2. Con el plugin SEO Yoast para WordPress: si tienes WordPress y tienes instalado el SEO Yoast también puedes editar el archivo htaccess. Para ello, desde el admin de WordPress, en la barra lateral izquierda ve a SEO > Herramientas > Editor de archivos. En ‘Editor de archivos’ verás que puedes editar tanto el Robots.txt como el htaccess. 
  3. A través del administrador de archivos de tu Hosting: donde puedes descargar y subir de nuevo el archivo, o usar el editor de código web online.

Tipos de redirecciones 301 y cómo hacerlas

  • De www a sin www / sin www a www. Puede darse el caso que existan dos versiones de tu web, una con ‘www’ (www.tuweb.com) o sin ‘www’ (tuweb.com). Si tu web tiene estas dos versiones estamos ante contenido duplicado. Puedes comprobar si tu web tiene las dos versiones o si de una redirige a otra. Para ello busca en tu navegador ambas versiones, si en lugar de redirigir de una versión a otra de forma automática, ambas ofrecen el mismo contenido, necesitas hacer una redirección 301.

-Si quieres redireccionar de una versión sin www a una versión con www, deberás utilizar esta regla en el htaccess:

<IfModule mod_rewrite.c>
RewriteCond %{HTTP_HOST} ^tunombrededominio.com [NC]
RewriteRule (.*) http://www.tunombrededominio/$1 [R=301,L,QSA]
</IfModule>

-Si quieres redireccionar de una versión con www a una sin www:

<IfModule mod_rewrite.c>
RewriteCond %{HTTP_HOST} ^www.ejemplo.com [NC]
RewriteRule (.*) http://ejemplo.com/$1 [R=301,L,QSA]
</IfModule>
  • De http a https / de https a http. Si tienes una web y acabas de instalar el certificado SSL es conveniente que toda tu web se muestre con https. Para ello debes incluir en tu htacces esta regla:
<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} off
RewriteRule (.*) https://www.ejemplo.com/$1 [R=301,L,QSA]
</IfModule>

-Si por el contrario, tenías tu web bajo el protocolo https pero has decidido quitarlo, debes redirigir a tu web en versión http. Para ello introduce:

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} on
RewriteRule (.*) http://www.ejemplo.com/$1 [R=301,L,QSA]
</IfModule>
  • Index/Home. Se trata de una duplicidad que ocurre en muchas webs y que se puede solucionar con una redirección 301. Por ejemplo, las webs www.ejemplo.com/index.html y www.ejemplo.com/home muestran el mismo contenido, manteniendo la URL tal cual que www.ejemplo.com. Las dos primeras webs con /index.html y /home deben redirigir automáticamente a www.ejemplo.com.

-Para ello, en el htacces indicaremos la siguiente regla:

Redirect 301 /index.html http://ejemplo.com

Redirect 301 /home http://ejemplo.com
  • Con / a sin /. Quizás sea algo que nunca has comprobado pero puede que en tu web tengas habilitadas las dos opciones. Si tu web es visible con el slash (/) al final y también sin él, estamos ante una duplicidad que puedes solucionar aplicando la siguiente regla:

-Para redireccionar de la versión con barra a la versión sin barra:

<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule (.*) http://www.ejemplo.com/$1/ [R=301,L,QSA]
</IfModule>

-Para hacerlo al contrario:

<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*)/$ http://www.ejemplo.com/$1 [R=301,L,QSA]
</IfModule>

Redirección de página. Esta es bastante sencilla y puede utilizarse para dirigir de una página cualquiera a otra de destino.

Redirect 301 /pagina-antigua http://ejemplo.com/pagina-nueva

¡Recuerda! la URL que quieres que sea redireccionada debe indicarse como URL relativa, es decir, /laURL.

  • Redireccón de directorio. En el caso que cuentes con un directorio que quieres redireccionar a otro directorio con otro nombre, y a su vez mantener la misma estructura de los directorios y páginas que dependen de él:

-Para un directorio de primer nivel:

Redirect 301 /directorio-antiguo/ http://www.ejemplo.com/directorio-nuevo/

-Para subdirectorios:

Redirect 301 /directorio/subdirectorio-antiguo/ http://www.ejemplo.com/directorio/subdirectorio-nuevo/

Redirección de dominio. Imagina que quieres cambiar de nombre tu dominio, has comprado uno nuevo, quieres cambiar de .es a .com, etc.

Redirect 301 / http://www.ejemplo.com/

Redirección de IP. Es importante que la dirección IP de tu web dirija a la URL de tu dominio. Para ello debes hacer la siguiente redirección en tu htaccess.

IfModule mod_rewrite.c>
RewriteCond %{HTTP_HOST} ^190\.90\.190\.90
RewriteRule (.*) http://www.ejemplo.com/$1 [R=301,L,QSA]
</IfModule>

Recuerda indicar tu IP y tu web.

Errores 404. En toda web pueden darse errores 404 y aunque no sean errores críticos, hay que tenerlos controlados y en la medida de lo posible, redireccionarlos.

Redirect 301 /URL-error-404 / http://www.example.com/URL-destino

Ejemplos:¿Cuándo necesitas hacer una redirección 301?

Existen muchos casos pero nosotros te vamos a poner un par de ejemplos:

#Ejemplo 1: Productos descatalogados en Ecommerce

Imagina que en tu ecommerce tenías un producto bien posicionado, pero que por motivos de stock ya no lo vas a tener más a la venta. Esta página de producto puede ser redireccionada a otra página de un producto similar.

#Ejemplo 2: Cambio de estructura de URL

Estamos ante una web que cuenta con una estructura de enlaces que muestra las páginas de producto de la siguiente manera: www.laweb.com/category/producto. Se toma la decisión de que la nueva estructura sea www.laweb.com/producto, simplificando la URL.

Con este cambio será necesario una redirección 301, de lo contrario, las páginas con la URL antigua aparecerán con un error 404.

#Ejemplo 3: Landing pages

Se puede optar por redireccionar de una landing a otra en el caso de que la de origen haya quedado desfasada. De esta forma, sí tenemos una página con buena reputación ayudaremos a la nueva landing page a partir con ventaja.

¡Aclaración! Las “landing page” o páginas de aterrizaje son páginas en las que queremos que entren las visitas. (vendemos nuestro producto, ofrecemos servicios, ponemos publicidad, etc.).

#Ejemplo 4: Actualización de artículos antiguos o caducados

Si tienes un blog puede que tengas algunos artículos con muchas visitas pero que son antiguos y por ello ya no te generan tantas visitas. Por ello, crea un artículo completamente nuevo, añade la información de ese post antiguo, actualízala y añade nuevo contenido. Una vez que publiques el nuevo artículo, realizar una redirección 301 del artículo antiguo al artículo nuevo, de esta forma será mucho más fácil posicionar el más nuevo.

#Ejemplo 5: Cambios de dominio

En ocasiones las webs cambian de dominio, bien porque prefieren que se les identifique con otro, por motivos SEO o incluso por motivos de cambio del nombre de la marca.

#Ejemplo 6: Contenido duplicado por www o https

Puede ocurrir en todo tipo de webs. Sin saberlo, puede que tu web tenga contenido duplicado, por ejemplo, si tu web tiene versión con ‘www’ y sin ‘www’ y no existe una redirección, al ofrecer ambas web exactamente el mismo contenido, estaríamos hablando de contenido duplicado. Este tipo de duplicidades también puede ocurrir con el protocolo http y https.

Poradw.es

¿Cómo usar el editor Gutenberg?

Gutenberg es el nuevo editor de la plataforma WordPress. Disponible a partir de la versión WordPress 5.0 o descargando el plugin de Gutenberg donde podrás personalizar páginas webs a base de bloques, que puedes añadir sin tener conocimientos de programación.

¿Cómo funciona? ¡Empecemos desde 0! Opciones generales:

editor Gutenberg
  1. Permite añadir nuevos bloques, texto, imágenes, video… (lo iremos viendo)
  2. Botón de deshacer/ hacer.
  3. Aquí añadimos el titulo de nuestra entrada.
  4. Aquí irá el contenido de nuestra entrada.
  5. Te da acceso a la configuración del Documento. Si está publicado o no, elige el autor de la entrada, categoría, etiquetas, imagen destacada de la entrada, escribe un extracto de tu entrada…
  6. Te da acceso a la configuración del bloque donde estas (que estas editando).
  7. Opciones de Vista previa (antes de publicar) Guarda el documento y publícalo.

¡Una vez que ya hemos explicado un poco cómo funciona la interfaz de Gutenberg toca explicarla en profundidad!

1.Ejemplo: Escribiremos una entrada en Gutenberg (Solo texto) e iremos explicando paso a paso las herramientas que tenemos disponibles.

A. Haz clic encima de “Añadir Titulo” y empieza a escribir, nosotros hemos puesto como titulo “Título del Documento”.

B. Escribe el contenido de tu entrada.

B.1. Cambia el tipo de bloque y transformalo de Párrafo a Lista, Encabezado, Cita… Te dejamos las opciones aquí:

  • B.2. Alinear el texto a la izquierda | centro | derecha.
  • B.3. Selecciona el texto que necesites y haz clic en esta opción para ponerlo en negrita.
  • B.4. Selecciona el texto que quieras y haz clic en esta opción para ponerlo en cursiva.
  • B.5. Coge el texto que necesites, haz clic en “la cadena” e introduce el enlace/URL que quieras añadir.
  • B.6. Tachado. Tacha el texto que elijas.
  • B.7. Más opciones.
  • B.7.1. Ocultar ajustes del bloque. Oculta los ajustes que aparecen en la barra lateral derecha (Documento y Bloque). Si clicas esta opción, dale a los 3 puntitos (Más opciones / B.7.) y >Mostrar Ajustes del Bloque
  • B.7.2. Duplicar. Duplica el bloque que estes editando.
  • B.7.3. Insertar antes. Inserta un bloque encima del bloque que estas editando.
  • B.7.4. Insertar después. Inserta un bloque debajo del bloque que estas editando.
  • B.7.5. Editar como HTML. Edita el bloque donde estas en HTML clicando esta opción, una vez que has finalizado de editar en HTML, haz clic en los 3 puntitos (Más opciones)> “Editar visualmente” para editar el bloque como antes.
  • B.7.6. Añadir a los bloques reutilizables. Esta opción permite guardar el bloque (en este caso párrafo) que has creado en la opción Añadir bloque (Añadir bloque) > Reutilizable para que lo utilices cuando quieras.
  • B.7.7. Quitar bloque. Eliminar el bloque actual.


¡Editemos nuestra entrada con el menú de la derecha de Gutenberg!

Documento

En la parte de la derecha tenemos un menú para editar el documento y el bloque, ¡empecemos!

  • C.1. Estado y visibilidad. Esta opción hace referencia a la visibilidad del Documento: En azul indica la opción en la que está predeterminada, haciendo clic encima de la opción predeterminada que está en azul puedes cambiarlo.
  • Dentro de Estado y Visibilidad tienes la Opción de Publicar, donde te pondrá que una vez hagas clic en la parte superior derecha( donde pone “Publicar…”), se publicará inmediatamente o en la fecha en la que has indicado en esta configuración. calendario
    En este mismo apartado también tienes opciones de:
    • Si quieres “Fijar en portada” la entrada o si prefieres que lo haga WordPress por defecto.
    • Si la entrada queda pendiente de revisión. (Esto es, creas una entrada pero aún tienes que revisarlo antes de duplicarlo)
    • El autor del artículo.
  • C.2. Enlace permanente. Aquí podrás editar el nombre de tu entrada, en el apartado “URL”. Y ver cómo se visualizará en el apartado “Vista Previa”.
  • C.3. Categorias. Si tienes categorías, elige la categoría que quieres que aparezca tu entrada, Ejemplo: “Noticias”, “Novedades”, “Artículos Técnicos”.
  • C.4. Etiquetas. Escribe las etiquetas que diferencian a esa entrada de otras. Ejemplo: “WordPress”, “Gutenberg”.
  • C.5. Imagen destacada. Añade una imagen destacada para que los usuarios de tu sitio visualicen el artículo con una imagen antes de entrar en el.
  • C.6. Extracto. Escribe un extracto para que los usuarios de tu sitio tengan una ligera idea de que va tu entrada.
  • C.7. Comentarios. Elige si deseas permitir comentarios en esa entrada, así como pingback y trackbacks.

Bloque

Ahora editemos el bloque, una vez que hemos elegido el bloque que queremos editar, un vídeo, una imagen… tenemos más opciones para editarlo en el apartado bloque de la parte superior derecha. (En nuestro caso veremos un ejemplo con el bloque de párrafo).

Como veis nos indica que lo que estamos editando es un bloque de Párrafo.

  • Ajuste del texto. Nos mostrará el tamaño y tipo de la fuente que vamos a utilizar en la entrada y si queremos capitalizar la letra de nuestro párrafo.
  • En Ajustes de color podremos elegir el Color de fondo que deseamos para nuestro párrafo y el color del texto del mismo.
  • En Avanzado tenemos un apartado CSS, para meter CSS en nuestra entrada (este apartado esta dedicado a aquellos usuarios que tienen conocimientos de HTML y CSS).

¡Hablemos de los bloques!

  1. Bloques Más utilizados: Son aquellos que más usas (o los últimos que has usado).
  2. Elementos integrados.
    1. Imagen integrada. Elige este bloque si necesitas integrar texto con imágenes.
  3. Bloques comunes
    1. Párrafo. Insertar párrafos en tu entrada.
    2. Imagen. Insertar imágenes.
    3. Lista. Elige este bloque para insertar una lista de elementos.
      • Ejemplo Lista 1
      • Ejemplo Lista 2
    4. Encabezado. Elige este bloque para poner títulos o subtítulos.
    5. Galería. Insertar una galería de imágenes.
    6. Cita.

      Ser o no ser, esa es la cuestión

      William Shakespeare
    7. Audio. Inserta audio.
    8. Fondo. Añade una imagen de fondo a ese bloque para escribir por encima de ella.
    9. Archivo. Arrastra un archivo, sube uno nuevo o elige un archivo de tu biblioteca.
  4. Formatos
    1. HTML personalizado. Agregue lineas de html personalizadas para su entrada.
    2. Código. Agregue lineas de código personalizadas para su entrada.
    3. Clásico
    4. Preformateado
      Esto es un texto preformateado.
    5. Párrafo de Cita
    6. Tabla. Te permite insertar una tabla para organizar los contenidos dentro de una entrada de WordPress.
    7. Verso
      "Prueba de verso"
  5. Elementos de Diseño
    1. Botón
    2. Columnas. Inserta columnas.
    3. Medios y texto
    4. Más. Este elemento es una barra horizontal que pone “Leer Más”, es el reemplazante de la clásica etiqueta leer más.
    5. Salto de página
    6. Separador. Inserta una línea horizontal en medio del contenido. Es algo que ya se podía hacer con el editor clásico, con la diferencia de que ahora nos permite elegir entre tres tipos de separador.
    7. Espaciador. Un bloque que lo único que hace es dejar un espacio en blanco de la altura exacta que nosotros queramos. Y es tan fácil de ajustar como arrastrarlo desde el borde inferior.
    8. Widgets
      1. Shortcode
      2. Archivos
      3. Categorias
      4. Últimos comentarios
      5. Últimas entradas
  6. Incrustados. Incrusta videos, posts, publicaciones… eligiendo este tipo de bloque desde:
    1. YouTube
    2. Incrustado
    3. Twitter
    4. Facebook
    5. Instagram
    6. WordPress (entre otros)
  7. Reutilizable. Explicado en el apartado B.7.6. En este apartado guardas los bloques que has guardado tú para (como bien indica el nombre del apartado) reutilizar el contenido o el estilo que necesites.

¡Y eso es todo de momento! ¡Iremos ampliando la información sobre Gutenberg! ¡Hasta la próxima!