4

¿Alguien sabe cómo puedo compartir contenido de mi pagina web en Google+? El problema es que es contenido que se genera dinámicamente, me gustaría hacer algo como lo que hace Facebook, que me deja personalizar el título o la imagen entre otros parámetros.

¿Alguna idea de cómo puedo hacerlo para Google+ sin usar los tags de <meta>? Actualmente tengo algo así, esto sólo me comparte la url, me gustaría incluir la descripción y la imagen de un artículo.

<a class="btn btn-default fa fa-google-plus" href="https://plus.google.com/share?url=http://mipagina.com/mipaginaseccion/articulos.php" data-size="large" target="v" onclick="window.open(this.href, this.target, 'width=400,height=400'); return false"></a>

1 respuesta 1

6

Según la documentación oficial de Google Developers, a la URL sólo se le pueden pasar dos parámetros y ninguno de ellos es descripción, título o imagen. Los únicos parámetros disponibles a día de hoy son:

  • url: la URL de la página a compartir. El valor debe estar codificado (urlencode).
  • hl: el código del locale (pareja idioma-región) que usará Google+ en la página de compartir.

Tendrás que optar por incluir algún tipo de metadata en la página para que los valores que quieres se muestren a la hora de compartir. Aunque como se explica en esta otra página, esa metadata no tiene por qué ir en las etiquetas meta. Dejo aquí un resumen de las opciones que menciona allí:

Utilizar microdata de Schema.org

Si la página está anotada con microdata de Schema.org, el diálogo de compartir de Google+ usará el nombre, imagen y descripción que encuentre en los tipo especificados en schema.org. Éste es el método recomendado en la página de Google porque ellos también usan esta microdata en sus páginas y en las búsquedas.

La idea es que añadas el atributo itemprop con el valor: name (para el título de la página), description (para la etiqueta que contenga la descripción), e image en la imagen que quieras que acompañe al post:

<!-- actualiza la etiqueta body para que incluya itemscope e itemtype. -->
<body itemscope itemtype="http://schema.org/Product">
  ...
  <h1 itemprop="name">Esto será el título</h1>
  <img itemprop="image" src="http://mi.web.com/imagen.jpg" /> <!-- ésta será la imagen -->
  <p itemprop="description">Este párrafo será la descripción.</p>

O si prefieres hacerlo en la cabecera, también podrías hacerlo usando estas etiquetas:

<!-- actualiza la etiqueta html para que incluya itemscope e itemtype. -->
<html itemscope itemtype="http://schema.org/Product">

  <head>

    <meta itemprop="name" content="Esto será el título">
    <meta itemprop="description" content="Este párrafo será la descripción.">
    <meta itemprop="image" content="http://mi.web.com/imagen.jpg">

Utilizar el protocolo Open Graph

Me imagino que estas son las etiquetas meta que mencionabas en la pregunta diciendo que querías evitar. La idea básica para este método es añadir la meta-información en la cabecera usando las etiquetas meta especificando propiedades Open Graph (og:).

Un ejemplo de cómo hacerlo, añade esto a tu cabecera:

<meta property="og:title" content="Esto será el título" />
<meta property="og:image" content="http://mi.web.com/imagen.jpg" />
<meta property="og:description" content="Este párrafo será la descripción." /> 

Utilizar etiquetas meta

Parecido al sistema anterior, pero sin necesidad de usar Open Graph. Simplemente usando la meta-etiqueta para descripción, y el título de la página para título del post. Un problema de este método es que no se puede especificar la imagen, entonces Google intentará identificar la más adecuada para mostrar cuando se comparta la página.

Así, sólo tendrías que asegurarte de que la página tenga lo siguiente en la cabecera:

<title>Esto será el título</title>
<meta name="description" content="Este párrafo será la descripción." />

No hacer nada

Si no puedes (o no quieres) implementar ninguno de los métodos anteriores, entonces Google procesará la página y elegirá todo por ti los que decida son título, descripción e imagen más adeacuados.

Ni que decir tiene, este método no está recomendado porque es el peor: pierdes control sobre cómo se verá la página en Google+ y cómo se verá el +Snippet.

4
  • Hola Alvaro, pero cómo quedaría construido el link para compartir ? Por lo que he leído, el protocolo Open Graph también me serviría para compartir en facebook...
    – MNibor
    Commented el 19 ene. 2018 a las 13:58
  • 1
    @MNibor el enlace en un href sería algo como: https://plus.google.com/share?url={URL} (donde {URL} es la página que quieras compartir en Google+. OpenGraph es muy útil porque funciona con Google+, Facebook, Skype... y muchos otras redes sociales y programas de mensajería. Y no necesitas un enlace especial, solo compartir la URL en ellas y ya se encargarán de leer los datos de OpenGraph y mostrarlos.
    – Alvaro Montoro
    Commented el 19 ene. 2018 a las 14:29
  • si si... fue agregar las lineas de OG y reconoció todo de forma impecable... tengo problemas con las fotos, pero creo que es por la resolución mala de algunas me parece
    – MNibor
    Commented el 19 ene. 2018 a las 15:15
  • 1
    @MNibor ¿Qué tamaño tienen? Con OpenGraph puedes poner más de una imagen con diferentes dimensiones (en cuyo caso no sé cuál se elegirá). En este enlace de Facebook puedes ver recomendaciones para el tamaño de las imágenes.
    – Alvaro Montoro
    Commented el 19 ene. 2018 a las 15:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.