search

chrsmithdemos / html5rocks

Automatically exported from code.google.com/p/html5rocks
0 stars 0 forks source link

Properly set OGP per page #831

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
All individual pages indicates same title and description on Google+ / Facebook 
post.
Properly setting og:title and og:description is required.

Original issue reported on code.google.com by agek...@google.com on 20 Feb 2012 at 1:46

GoogleCodeExporter commented 9 years ago 
A few things I have noticed.
- H5R Tutorials do have Microdata set for Google+ to properly fetch title and 
description
- H5R Updates don't have Microdata set (shows same title and description as top 
page)

Here's suggestions:
- Use Open Graph Protocol so that Facebook will also properly understand what's 
on content.
- Apply same for Updates pages, etc if possible.

Original comment by agek...@google.com on 20 Feb 2012 at 3:04

GoogleCodeExporter commented 9 years ago 
I recently fixed the title issue for updates.html5rocks.com. Can you check
that it did the trick? If not, please reopen.

http://code.google.com/p/html5rocks/source/detail?r=6868484ef48a89eb59c06960e500
9e81a947024d

Original comment by ericbide...@html5rocks.com on 14 Mar 2012 at 4:42

GoogleCodeExporter commented 9 years ago 
Works better but adding description and in image will be preferable in addition 
to open graph protocol support.
I will try to find time to work on this.

Original comment by agek...@google.com on 28 Mar 2012 at 5:40

GoogleCodeExporter commented 9 years ago 
More concrete proposal:

OGP:
1. add 'xmlns:og="http://ogp.me/ns#"' to html tag as attribute
2. add following:
<meta property="og:type" content="article"> // type of this content (fixed to 
"article")
<meta property="og:title" content="***"> // title of the article
<meta property="og:description" content="***"> // short description of the 
article
<meta property="og:image" content="***"> // relevant image to show up beside 
social post
<meta property="og:url" content="***"> // canonical url of the page
<meta property="og:site_name" content="HTML5Rocks">

Microdata:
1. add 'itemprop="description"' attribute on relevant tag
2. add 'itemprop="image"' attribute on relevant tag

Will try to address this but if you can fix it soon, that might be better!

Original comment by agek...@google.com on 3 Apr 2012 at 7:02

GoogleCodeExporter commented 9 years ago 
If those <meta> tags don't need to live in the <head>, you can stick them in 
the templates/tutorial.html template. Otherwise, I supposed they could live in 
templates/base.html, but not all of that data
will be available on every page (namely, non-article pages).

Original comment by ericbide...@html5rocks.com on 3 Apr 2012 at 3:48