Google+ Sharing button ignores OpenGraph info #153

ahrenstein · 2015-06-19T13:55:59Z

Just launched my site with this theme last night. Everything is fantastic except that sharing with the Google+ button seems to ignore all of the OpenGraph info so the shared link reveals nothing other than the site name. Is there a good way to fix this?

Thanks

mmistakes · 2015-06-19T16:27:39Z

Not entirely sure what's going on. As far as I can tell the theme is doing everything right as per Google.

If the page contains Open Graph properties for the title, image, and description, they will be used for the +Snippet.

Which are included in the <head> of each page.

<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />

Not sure why Google is ignoring it in the snippet. I tested sharing one of theme's demo pages on Google+ and it pulls in the feature image, but seems to use the author name as page title and doesn't add the description. No idea why it's doing that because the OG data seems accurate to me.

ahrenstein · 2015-06-19T16:55:30Z

Hmmm so it's not just my site then. I'll keep looking into it as well.

mmistakes · 2015-06-19T18:20:18Z

Possible solution would be to update the post/page layouts to include schema.org microdata to help identify what content is what. Back in the day I included a lot of these tags in the markup but took them out because it over complicated things and it didn't really fit all use cases.

Probably wouldn't be too hard for you to add it to your own fork if that's something you're comfortable doing.

ahrenstein · 2015-06-19T18:55:17Z

Hmm I tried adding these tags to _includes/_open-graph.html but didn't see any changes in Google+'s behavior

<meta itemscope itemtype="http://schema.org/Article" />
<meta itemprop="headline" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
<meta itemprop="description" content="{{ page.excerpt | strip_html }}" />
<meta itemprop="image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/default-thumb.png{% endif %}" />

ahrenstein · 2015-06-22T14:16:50Z

@mmistakes could this issue be due to the aspect ratio of the image presented to Google+? https://developers.google.com/+/web/snippet/article-rendering

mmistakes · 2015-06-22T14:20:15Z

Could be. There's nothing stopping you from using a taller image if you
wanted to test that out. You could also modify the theme to use a different
image for the OG one if the feature image is giving you problems. I
purposely kept things simple knowing most people won't even assign a
feature image, let alone care if there's a unique OG image.

On Mon, Jun 22, 2015 at 10:16 AM, Matthew Ahrenstein <
[email protected]> wrote:

@mmistakes https://github.com/mmistakes could this issue be due to the
aspect ratio of the image presented to Google+?
https://developers.google.com/+/web/snippet/article-rendering

—
Reply to this email directly or view it on GitHub
#153 (comment)
.

ahrenstein · 2015-06-22T14:22:25Z

I might try and do that. I'm attempting to edit the Schema stuff back in now.

ahrenstein · 2015-06-22T14:39:02Z

Hmm even with a different image most of the articles seem to just display the author info.

mmistakes · 2015-06-22T14:53:34Z

I'm out of ideas. You could try running a page through their structured
data testing tool for errors, but I doubt you'll see any.
https://developers.google.com/structured-data/testing-tool/

I've never worried much about G+ since no one uses the thing ;-)

On Mon, Jun 22, 2015 at 10:39 AM, Matthew Ahrenstein <
[email protected]> wrote:

Hmm even with a different image most of the articles seem to just display
the author info.

—
Reply to this email directly or view it on GitHub
#153 (comment)
.

ahrenstein · 2015-06-22T14:58:07Z

Hmm the only structure that shows there is Person.

LOL most of my visitors use G+ primarily it turns out. (Including myself)
I'll report back here if I find a fix

mmistakes · 2015-06-22T15:13:49Z

One other thing that makes testing a royal pain.

If G+ is anything like Twitter and Facebook it caches the content used for sharing. It's entirely possible that any of the many changes you made fixed it, but if you're testing by sharing the same URL over and over again it's going to show the cached version no matter what you do.

I don't know how long it holds onto the cache or if there is a way to force it to use the new content on page. Might be worth looking into that just in case you partially fixed it when adding schema.org markup or using a different OG image.

ahrenstein · 2015-06-22T15:16:05Z

Hmmm I wonder if that could be a problem. I moved to Jekyll/Minimal
Mistakes from Wordpress, so while the URLs are different, the domain is the
same. Facebook certainly seems to show sharing differently when I test the
changes on a beta site vs the production one. (More broken on beta). I'll
look into Google caching.

Thanks!

-Matthew

On Mon, Jun 22, 2015 at 11:13 AM, Michael Rose [email protected]
wrote:

One other thing that makes testing a royal pain.

If G+ is anything like Twitter and Facebook it caches the content used for
sharing. It's entirely possible that any of the many changes you made fixed
it, but if you're testing by sharing the same URL over and over again it's
going to show the cached version no matter what you do.

I don't know how long it holds onto the cache or if there is a way to
force it to use the new content on page. Might be worth looking into that
just in case you partially fixed it when adding schema.org markup or
using a different OG image.

—
Reply to this email directly or view it on GitHub
#153 (comment)
.

mmistakes · 2015-06-22T15:20:08Z

My quick look doesn't seem like Google has an easy way to force the sharing
tool to grab the latest content.

Facebook's tool seems way more useful.
https://developers.facebook.com/tools/debug/og/object/
Throwing a few pages at it seem to display title, image, and excerpt as it
should. Which leads me to believe Google isn't respecting the OG tags and
doing something wonky. Which doesn't surprise me because that's how they
roll.

On Mon, Jun 22, 2015 at 11:16 AM, Matthew Ahrenstein <
[email protected]> wrote:

Hmmm I wonder if that could be a problem. I moved to Jekyll/Minimal
Mistakes from Wordpress, so while the URLs are different, the domain is the
same. Facebook certainly seems to show sharing differently when I test the
changes on a beta site vs the production one. (More broken on beta). I'll
look into Google caching.

Thanks!

-Matthew

On Mon, Jun 22, 2015 at 11:13 AM, Michael Rose [email protected]
wrote:

One other thing that makes testing a royal pain.

If G+ is anything like Twitter and Facebook it caches the content used
for
sharing. It's entirely possible that any of the many changes you made
fixed
it, but if you're testing by sharing the same URL over and over again
it's
going to show the cached version no matter what you do.

I don't know how long it holds onto the cache or if there is a way to
force it to use the new content on page. Might be worth looking into that
just in case you partially fixed it when adding schema.org markup or
using a different OG image.

—
Reply to this email directly or view it on GitHub
<
#153 (comment)

.

—
Reply to this email directly or view it on GitHub
#153 (comment)
.

ahrenstein · 2015-06-22T15:25:28Z

Oh Google, why must you make things difficult? :/

I'm going to give it some time for them to crawl the new site. Web master tools still shows the old home page on the non-www URL, so maybe they just haven't noticed the changes yet.

mmistakes · 2015-06-22T15:33:13Z

That's something different. When you share a URL thru Google+ it pulls
content right then from the page to use. If the page has previously
been shared it will use what it has cached. Twitter and Facebook work the
same way.

Facebook I'm pretty sure has a way to force it to use the lastest version
of a page when shared. Doesn't look like Google does. If you test sharing a
page you know has never been shared on G+ that will let you know if any of
your changes fixed it. Sharing a page previously shared won't since it's
just using old content prior to your fixes.

On Mon, Jun 22, 2015 at 11:25 AM, Matthew Ahrenstein <
[email protected]> wrote:

Oh Google, why must you make things difficult? :/

I'm going to give it some time for them to crawl the new site. Web master
tools still shows the old home page on the non-www URL, so maybe they just
haven't noticed the changes yet.

—
Reply to this email directly or view it on GitHub
#153 (comment)
.

ahrenstein · 2015-06-22T15:35:59Z

Oh I see. I've clicked the share button a few times, but never actually
shared it since I saw the snippet would be broken upon sharing. Also seeing
as how the beta site is a different sub domain, I doubt any of those posts
have been shared before. I just that server off when not actively working
on this.

-Matthew

On Mon, Jun 22, 2015 at 11:33 AM, Michael Rose [email protected]
wrote:

That's something different. When you share a URL thru Google+ it pulls
content right then from the page to put use. If the page has previously
been shared it will use what it has cached. Twitter and Facebook work the
same way.

Facebook I'm pretty sure has a way to force it to use the lastest version
of a page when shared. Doesn't look like Google does. If you test sharing a
page you know has never been shared on G+ that will let you know if any of
your changes fixed it. Sharing a page previously shared won't since it's
just using old content prior to your fixes.

On Mon, Jun 22, 2015 at 11:25 AM, Matthew Ahrenstein <
[email protected]> wrote:

Oh Google, why must you make things difficult? :/

I'm going to give it some time for them to crawl the new site. Web master
tools still shows the old home page on the non-www URL, so maybe they
just
haven't noticed the changes yet.

—
Reply to this email directly or view it on GitHub
<
#153 (comment)

.

—
Reply to this email directly or view it on GitHub
#153 (comment)
.

mmistakes · 2015-06-22T15:39:40Z

That's probably enough for it to pull the page and cache the content for sharing regardless if you actually shared it or not. Try a page you haven't done that with to double check. Other than that this is just Google being Google.

I've never had much luck with schema or microformats or microdata. Anytime I think I have it right something else breaks, which is a big reason I ripped most of it out of the theme leaving it up to someone else who has an actual clue.

Open Graph is Facebooks baby which could explain why G doesn't necessarily pickup things all the time.

ahrenstein · 2015-06-22T17:00:48Z

I tested reverting some of the changes from this commit e2e01bd I made a few modifications. I pushed it to the live site, and I'm going to let Google index over the next couple of days and then test sharing. If you're interested, an example URL would be https://www.ahrenstein.com/blog/using-simple-bank/

Thanks

mmistakes · 2015-06-22T17:19:36Z

Looks like that did the trick! I randomly went to one of your posts and used the Google+ share button and this is what I'm seeing.

G+ was getting tripped up by something, either schema related or maybe the .article class. Their parser must be way less forgiving than FB's and Twitter's.

ahrenstein · 2015-06-22T17:32:38Z

Actually that post seems to be the one and only post that was working
before I opened the bug report. At least I know the changes haven't broken
that post yet.

-Matthew

On Mon, Jun 22, 2015 at 1:19 PM, Michael Rose [email protected]
wrote:

Looks like that did the trick! I randomly went to one of your posts and
used the Google+ share button and this is what I'm seeing.

[image: untitled-1]
https://cloud.githubusercontent.com/assets/1376749/8287941/1b04ffbe-18e1-11e5-8fd0-722a0beb47d1.jpg

G+ was getting tripped up by something, either schema related or maybe the
.article class. Their parser must be way less forgiving than FB's and
Twitter's.

—
Reply to this email directly or view it on GitHub
#153 (comment)
.

mmistakes · 2015-06-22T18:28:25Z

There were a couple other older posts that seemed to work. I bet they were
shared back in the day and Google is using cached share data for them,
which is why they work.

On Mon, Jun 22, 2015 at 1:32 PM, Matthew Ahrenstein <
[email protected]> wrote:

Actually that post seems to be the one and only post that was working
before I opened the bug report. At least I know the changes haven't broken
that post yet.

-Matthew

On Mon, Jun 22, 2015 at 1:19 PM, Michael Rose [email protected]
wrote:

Looks like that did the trick! I randomly went to one of your posts and
used the Google+ share button and this is what I'm seeing.

[image: untitled-1]
<
https://cloud.githubusercontent.com/assets/1376749/8287941/1b04ffbe-18e1-11e5-8fd0-722a0beb47d1.jpg

G+ was getting tripped up by something, either schema related or maybe
the
.article class. Their parser must be way less forgiving than FB's and
Twitter's.

—
Reply to this email directly or view it on GitHub
<
#153 (comment)

.

—
Reply to this email directly or view it on GitHub
#153 (comment)
.

ahrenstein · 2015-06-22T18:40:28Z

Oh that's interesting.

ahrenstein · 2015-06-23T19:17:23Z

I fixed it. I added this code the the if statements in the top 5 lines of the files in _layouts

 itemscope itemtype="http://schema.org/Article"

I also modified the _includes/_open-graph.hrml file and added this code at the top of the file

<!-- Google Plus -->
<meta itemprop="name" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta itemprop="description" content="{{ page.excerpt | strip_html }}">
{% if page.image.feature %}
<meta itemprop="image" content="{{ site.url }}/images/{{ page.image.feature }}">
{% else %}
<meta itemprop="image"  content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/default-thumb.png{% endif %}">
{% endif %}

Then the magic fix that may or may not make the above changes necessary is that Google+ will ignore most/all of the meta data randomly if the image it grabs is outside a certain aspect ratio. I had a 19:5 aspect ratio at 1900x500 pixels. Once I changed it to a 5:2 ratio at 1900x760 pixels the sharing seems to work on all articles now. If you want to verify just the image size change on the site you tested with, and let me know if that works, I'd greatly appreciate it. Avoiding Schema changes would be nice if possible.

Thanks for all the help!

ahrenstein · 2015-06-24T13:54:12Z

I tested it without the Schema.org stuff. Doesn't always work. I can create a pull request for that if you want me to add it. I made just enough changes to fix the Google+ snippet without screwing with other social network sharing.

ahrenstein · 2015-06-24T17:48:12Z

Merge request #154 will fix this

Closes mmistakes#153

Fixexc

…tton-text Change button copy on theme preview

mmistakes added the Type: Bug label Jun 19, 2015

ahrenstein closed this as completed Jun 24, 2015

ahrenstein mentioned this issue Jun 24, 2015

Make social sharing a 600x600 pop-up #154

Closed

cjmadsen pushed a commit to cjmadsen/cjmadsen.github.io that referenced this issue Dec 7, 2016

Add Lagom demo url

7c83b05

Closes mmistakes#153

theRealSuperMario added a commit to theRealSuperMario/therealsupermario.github.io that referenced this issue Jul 18, 2020

Merge pull request mmistakes#153 from pesser/fixexc

06a6391

Fixexc

koyumi0601 pushed a commit to koyumi0601/koyumi0601.github.io that referenced this issue Jul 31, 2023

Merge pull request mmistakes#153 from jacobherrington/change-theme-bu…

900639b

…tton-text Change button copy on theme preview

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Google+ Sharing button ignores OpenGraph info #153

Google+ Sharing button ignores OpenGraph info #153

ahrenstein commented Jun 19, 2015

mmistakes commented Jun 19, 2015

ahrenstein commented Jun 19, 2015

mmistakes commented Jun 19, 2015

ahrenstein commented Jun 19, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

ahrenstein commented Jun 23, 2015

ahrenstein commented Jun 24, 2015

ahrenstein commented Jun 24, 2015

Google+ Sharing button ignores OpenGraph info #153

Google+ Sharing button ignores OpenGraph info #153

Comments

ahrenstein commented Jun 19, 2015

mmistakes commented Jun 19, 2015

ahrenstein commented Jun 19, 2015

mmistakes commented Jun 19, 2015

ahrenstein commented Jun 19, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

mmistakes commented Jun 22, 2015

ahrenstein commented Jun 22, 2015

ahrenstein commented Jun 23, 2015

ahrenstein commented Jun 24, 2015

ahrenstein commented Jun 24, 2015