Share web content in Google+

4

Does anyone know how I can share content from my website on Google+? The problem is that it is content that is generated dynamically, I would like to do something like what Facebook does, which allows me to customize the title or image among other parameters.

Any idea how I can do it for Google+ without using the <meta> tags? I currently have something like that, this only shares the url, I would like to include the description and the image of an article.

<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>
    
asked by Agustin Acosta 17.03.2016 в 22:58
source

1 answer

6

According to the official Google Developers documentation , the URL can only be passed to you two parameters and none of them is description, title or image. The only parameters available today are:

  • url : the URL of the page to share. The value must be encoded ( urlencode ).
  • hl : the locale code (language-region pair) that Google+ will use on the share page.

You will have to choose to include some kind of metadata on the page so that the values you want to show when sharing. Although as explained on this other page , that metadata does not have to go on the meta tags %. I leave here a summary of the options mentioned there:

Use microdata from Schema.org

If the page is annotated with Schema.org microdata , the Google+ sharing dialog will use the name, image and description that you find in the types specified in schema.org. This is the recommended method on the Google page because they also use this microdata on their pages and searches.

The idea is that you add the itemprop attribute to the value: name (for the title of the page), description (for the label that contains the description), e image in the image that You want me to accompany the 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>

Or if you prefer to do it in the header, you could also do it using these tags:

<!-- 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">

Use the Open Graph protocol

I imagine that these are the meta tags that you mentioned in the question saying that you wanted to avoid. The basic idea for this method is to add the meta-information in the header using the meta tags specifying Open Graph properties ( og: ).

An example of how to do it, add this to your header:

<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." /> 

Use meta tags

Similar to the previous system, but without using Open Graph. Simply using the meta-tag for description, and the title of the page for post title. One problem with this method is that you can not specify the image , then Google will try to identify the most appropriate one to show when the page is shared.

So, you just have to make sure that the page has the following in the header:

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

Do nothing

If you can not (or do not want to) implement any of the above methods, then Google will process the page and choose everything for you that you decide is title, description and image more adept.

Needless to say, this method is not recommended because it's the worst: you lose control over how the page will look on Google+ and what the + Snippet looks like.

    
answered by 18.03.2016 / 02:31
source