search

pivotal / blog

Pivotal Engineering Blog
https://engineering.pivotal.io/
40 stars 47 forks source link

Improve OpenGraph tags and include structured data #166

Closed textbook closed 7 years ago

textbook commented 7 years ago
osis commented 7 years ago

Thanks for the PR @textbook! To validate I'm pushing the app and using...

https://cards-dev.twitter.com/validator

Before

screen shot 2017-06-25 at 9 31 31 am

After

screen shot 2017-06-25 at 9 30 52 am

https://developers.facebook.com/tools/debug/sharing

Before

screen shot 2017-06-25 at 9 08 57 am

After

screen shot 2017-06-25 at 9 17 03 am

http://opengraphcheck.com/

Before

screen shot 2017-06-25 at 9 39 09 am

After

screen shot 2017-06-25 at 9 11 16 am

Slack Msg

screen shot 2017-06-25 at 9 45 19 am

And since you added structured data, https://search.google.com/structured-data/testing-tool

Before

screen shot 2017-06-25 at 9 34 02 am

After

screen shot 2017-06-25 at 9 33 22 am

This is awesome! Are you worried about that error that Google is throwing about the Image URL?

textbook commented 7 years ago

@osis thanks for taking a look. According the the schema.org docs the image can just be a URL, and Google's docs say the image is only required for AMP pages. Not sure why it thinks the logo URL is invalid, though.

osis commented 7 years ago

@textbook Okay cool, seems to be a warning anyways. There is a logo URL error but I think that's due to my lazy cf push. Verifying...

screen shot 2017-06-25 at 10 26 33 am
osis commented 7 years ago

@textbook Oddly enough, I don't think Google likes the ImageObject for the logo?

https://developers.google.com/search/docs/data-types/logo

screen shot 2017-06-25 at 10 35 41 am
textbook commented 7 years ago

@osis that is weird, because when I tried just putting the URL for the logo attribute I got "http://engineering.pivotal.io/images/logo.svg (The attribute logo.itemtype has an invalid value.)" from the structured data testing tool.

osis commented 7 years ago

@textbook Also confused since this page has an example of a logo that's an ImageObject. Also found this...

https://webmasters.stackexchange.com/questions/90233/why-is-my-itemprop-image-markup-incorrect

osis commented 7 years ago

Ah I see, it doesn't like the fact that it's a SVG.

screen shot 2017-06-25 at 10 51 43 am
textbook commented 7 years ago

Ah, yes, that must be it; per https://developers.google.com/search/docs/data-types/articles, "Images should be in .jpg, .png, or. gif format" (as an ImageObject). I'll re-inline the SVG to the main page and add a small PNG version of the logo to keep Google happy.

osis commented 7 years ago

Looks good! Let's merge and see how Google/others digests. Thanks @textbook!