MetaTags básicos para compartir en las Redes Sociales

A continuación los metatags básicos para compartir vuestras páginas en las redes sociales, y que aparezca el título, descripción y imagen correctamente al compartir en las principales redes sociales (google+, facebook…).

El protocolo Open Graph mediante los metas del head se encarga de compartir contenido en las principales redes sociales como son google+ y facebook.

Pasos a seguir:

1. Añadir el siguiente prefijo a la etiqueta html:

<html prefix="og: http://ogp.me/ns#">

2. Insertar los siguientes metas y title dentro de la etiqueta head:

<title>Título de la página</title>
<meta name="description" content="Descripción de la página" />

<!-- Open Graph -->
<meta property="og:title" content="Título de la página" />
<meta property="og:image" content="http://tuweb.com/imagen.jpg" />
<meta property="og:description" content="Descripción de la página" />

Y si quieres usar las “Twitter Cards” para dar formato enriquecido en los tweets… añade estas también:

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Título página">
<meta name="twitter:description" content="Descripción de la página">
<meta name="twitter:site" content="@jorge_maiden">
<meta name="twitter:creator" content="@jorge_maiden">
<meta name="twitter:image" content="http://www.tuweb.com/imagen.jpg">

Observaciones:

1. El título de la página se recomienda que no sobrepase los 60-70 caracteres, y la descripción los 150-160 caracteres.
2. La imagen de Twitter Card que sea de un mínimo de 200×200 pixeles.
3. Entra en ogp.me para conocer todos los metas de open graph que existen.

WordPress: buscar por diferentes “Post Type”

Si necesitáis crear varios formularios de búsqueda para diferentes Post Type en WordPress basta con añadir un input hidden de nombre “post_type” con el valor de este en el formulario de bísqueda.

Este es un ejemplo de típico de formulario para buscar en todo el WordPress:

<form method="get" action="<?php bloginfo('url'); ?>/">
    <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="<?php _e('Search'); ?>...">
    <button type="submit"><?php _e('Search'); ?></button>
</form>

Y por ejemplo, para buscar solo dentro de un determinado “Post Type”, basta con añadir el siguiente input hidden dentro del form anterior:

<input type="hidden" name="post_type" value="MI-POST-TYPE" />

(*) Edita “MI-POST-TYPE” por el nombre del tuyo/s.

De esta forma podemos crear diferentes formularios de búsqueda para buscar en cada Post Type que tengamos.

CSS3: Texto vertical

Ejemplo para mostrar un texto de “forma vertical” utilizando CSS3, utilizando especialmente las propiedades transform (para rotar el elemento contenedor 90º) y transform-origin (para cambiar la posición a vertical del elemento transformado)

.vertical-text {
  float: left;
  margin-left: 30px;

  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);

  -webkit-transform-origin: left top 0;
  -moz-transform-origin: left top 0;
  -ms-transform-origin: left top 0;
  transform-origin: left top 0;

  background: #000;
  color: #fff;
  padding: 10px;
}

Ejemplo:

LOREM IPSUM

CSS3: Recortar textos con puntos suspensivos (…) automáticos

Método para añadir al final del texto 3 puntos suspensivos cuando no hay más espacio en el elemento contenedor, sin utilizar html, php, javascript… solo con CSS.

Usando especialmente las propiedades text-overflow:ellipsis (para recortar la cadena con puntos suspensivos) y white-space:nowrap (para manejar los espacios en blanco y los saltos de línea).

.cortar{
  width:200px;
  height:20px;
  padding:20px;
  border:1px solid blue;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.cortar:hover {
  width: auto;
  white-space: initial;
  overflow:visible;
  cursor: pointer;
}

Ejemplo:

Chanante ipsum dolor sit amet, tollina elit to sueltecico ea enim cobete enratonao. Gaticos eiusmod, nisi, ju-já aliqua. Enim ad nostrud nui tempor quis nuiiiii chavalada adipisicing cartoniano zagal ut aliqua.

Yoast WordPress SEO: eliminar rel=”canonical”

Código php para eliminar el rel=”canonical” que inserta por defecto el plugin SEO de Yoast en el HEAD de tu documento.

Copia y pega el siguiente código php en el archivo functions.php de tu tema:

add_filter( 'wpseo_canonical', '__return_false' );