SEO-related tweeks: OG and TwitterCard descriptions

[janajaeger]

Problem Description

Currently, we get suitable meta descriptions for Google by chopping of any characters beyond the 150th of the abstract. This however, isn't good enough for TwitterCards and Open Graph descripions.

Twitter supports up to 120 chars. OG only accepts up to 65 chars. We are currently getting penalized for TwitterCards and OG :(

Proposed fix

• limit any abstract to a maximum of 150 chars (make it a validation issue!) -> use abstract as search meta description
• chop off abstract text after 119/120 chars -> Use for TwitterCard description. Check whether stylesheets adds ... by default (I suspect it does that already.)
• Use the title contents for OG, Twitter and page titles. Enforce chop after 55 chars -> check whether 55 is enforced currently. Recycle title string for OG description.

Related information

• Getting Started Guide
• OpenGraph protocol
• Suggested values and structure
• DOCTEAM-782

---

toms: added "related information" section

[janajaeger]

As discussed in today's tools meeting, we need the following (roughly). Feel free to tweak this:

In the short term:

• Make the stylesheets grab the content of the abstract element and chop it off after 119 chars plus ellipse. Use this to generate the TwitterCard and search descriptions.
• For OpenGraph descriptions, let the stylesheets duplicate the page title.
• For Twitter and meta titles, check whether the current limit of 55 chars is enforced and enforce it if it isn't.

In the mid/long term:

• Create a new element called something like "seo-abstract" that is sourced to generate TwitterCard and search descriptions. Limit this to 150 chars and implement the above mentioned 119-chars-chop for Twitter.
• rest as above

Also, in the long term, maybe consider to create a Smart Docs extension for Geekodoc for things that we need on top of the standard Geekodoc and that maybe enforces a few more things. Smart Docs will need to contain a few more meta tags than the legacy XML files.

[tomschr]

Ahh, that's interesting! Just found the following paragraph in the Twitter developer's guide (emphasize by me):

When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.

They give the following example:

A mix of Twitter and Open Graph tags to define a summary card

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

Maybe that helps us to minimize the markup?

[janajaeger]

Nope, it won't. Notice that the OG description is far too long. Would have been nice, though.

[tomschr]

Right, the OG description is too long. However, if we cut it to the minimum, it would work, right.

I don't understand why this procedure is recommended in the Twitter development guide if it doesn't work? It's an official guide at least!

[tomschr]

The XSLT stylesheets should match to these elements in https://github.com/SUSE/doc-modular/blob/jjaeger_template-overhaul/templates/xml/assembly.xml#L60-L62