1317765 - Adding more OpenGraph/meta tags to Bugzilla HTMLs

Status: NEW

(bugzilla.mozilla.org :: General, enhancement)

Description

[Peter deHaan [:pdehaan]]

Re: https://github.com/mozilla/tippy-top-sites/issues/54

Tippy-Top-Sites is just some nonsense we have for adding better iconography for sites in Activity Stream.

Currently our https://bugzilla.mozilla.org/extensions/BMO/web/images/favicon.ico favicon is a 16x16 which doesn't seem to be rendering on Activity Stream.

Not sure if we want to add a higher res "apple-touch-icon" or something so we can have pretty bugzilla tiles in Activity Stream. The full set of rules we look for in the source can be found in https://github.com/mozilla/page-metadata-parser/blob/62edbb6f044515dd83d6093fec9c58d7b871f8a8/parser.js#L66-L79

Comment 1

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

:pdehaan, if you can specify which graph tags you think would be best for Activity Stream out of the ones you see, that would be great. 

Also I'd want to make sure if we're doing open graph tags we're hitting other use cases such as Slack.

Comment 2

[Peter deHaan [:pdehaan]]

I think the only one that Activity Stream will consume will be `apple-touch-icon` (for superior icon) and possibly `<meta name="description">` and/or `<meta property="og:description">` tags (for larger tile descriptions).

Plus, maybe check out https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254#.cchchs8s3

For Slack/OpenGraph/Facebook/Twitter, we'll want to confirm the basic Bugzilla homepage use case, and check out a few bug reports and submission pages to make sure they look good in previews. I think Facebook/Twitter have metadata validators which will show us some previews. Not sure about Slack though.

Comment 3

[Peter deHaan [:pdehaan]]

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fbugzilla.mozilla.org

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

It looks like Twitter isn't able to render anything useful since there isn't any Twitter meta tags available. Oodles more Twitter information at https://dev.twitter.com/cards/getting-started


https://cl.ly/1o2Z3A1v2n1p -- Random preview for Facebook/OpenGraph
https://cl.ly/3x0X0W0A2Z32 -- Random preview for Twitter
https://cl.ly/1J1o2P271a2Q -- Random preview for Slack

Comment 4

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Following Matt Haughey's example, I'd do something like

<!-— facebook open graph tags -->
<meta property="og:type" content="website" >
<meta property="og:url" content="https://bugzilla.mozilla.org/show_bug.cgi?id=1317765" >
<meta property="og:title" content="1317765 - Adding more OpenGraph/meta tags to Bugzilla HTMLs" >
<meta property="og:description" content="[[ 0th comment]" />
<meta property="og:image" content="[[ small bugzilla icon ]]" />

<!-— twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="[[ small bugzilla icon]]" >
<meta name="twitter:title" value="1317765 - Adding more OpenGraph/meta tags to Bugzilla HTMLs" >
<meta name="twitter:description" value="[[ 0th comment]]" >
<meta name="twitter:image" content="[[ small bugzilla icon]]" >
<meta name="twitter:url" value="https://bugzilla.mozilla.org/show_bug.cgi?id=1317765" >
<meta name="twitter:label1" value="Status" >
<meta name="twitter:data1" value="New" >
<meta name="twitter:label2" value="Resolution" >
<meta name="twitter:data2" value="---" >
<meta name="twitter:label3" value="Priority">
<meta name="twitter:data3" value="--">
<meta name="twitter:label4" value="Product">
<meta name="twitter:data4" value="bugzilla.mozilla.org">
<meta name="twitter:label5" value="Component">
<meta name="twitter:data5" value="General">

<!-- other metadata -->

<meta name="apple-touch-icon" value="[[small-retina-display-icon]]">

Comment 5

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Do you see any trouble adding that metadata to the HTML of a bug page, :dylan?

Comment 6

[Peter deHaan [:pdehaan]]

I don't think Twitter "summary_large_image" would be the first/best choice for Bugzilla issues (since it is not image heavy). Ref https://dev.twitter.com/cards/types/summary-large-image

What about just "summary"? https://dev.twitter.com/cards/types/summary

- `twitter:card` Required.
- `twitter:site` Required. The Twitter @username the card should be attributed to.
- `twitter:title` Required. A concise title for the related content. Max 70 characters.
- `twitter:description` required. A description that concisely summarizes the content as appropriate for presentation within a Tweet. Max 200 characters.
- `twitter:image` Optional. A URL to a unique [120px by 120px] image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages.
- `twitter:image:alt` Optional. A text description of the image conveying the essential nature of an image to users who are visually impaired.

https://dev.twitter.com/cards/markup

Not sure if `twitter:domain`, or `twitter:labelX` or `twitter:dataX` are supported. Closest I can figure, those are from their older, deprecated "product" card: https://dev.twitter.com/cards/types/product

Plus I guess we'd need to sanitize the twitter:title/description to make sure that the bugzilla title and 0th comment don't have double quotes which would terminate the meta tag attributes.

Comment 7

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

From Matt Haughy's Medium article, Slack is using the labelX and dataX tags.

Comment 8

[Dylan Hardison [:dylan] (he/him)]

(In reply to Emma Humphries ☕️ [:emceeaich] (UTC-8) +needinfo me from comment #5)
> Do you see any trouble adding that metadata to the HTML of a bug page,
> :dylan?

This will be very simple, and I will make it so un-auth'd users get bug_modal at the same time.

Comment 9

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

We could also re-use some old code. ctype=microsummary still generates the obsoleted microsummary/live-bookmark for a search request, and this could be reused to generate an OpenGraph summary metatag.

Comment 10

[Dylan Hardison [:dylan] (he/him)]

Add something like:


[% IF head_content
  [% head_content FILTER none %]
[% END %]
to 
https://github.com/mozilla-bteam/bmo/blob/master/template/en/default/global/header.html.tmpl#L271

and define head_content here:

https://github.com/mozilla-bteam/bmo/blob/master/template/en/default/list/list.html.tmpl#L47

You can define a variable containing a block of markup like this:

[% meta_tags = BLOCK %]
 <meta property="og:description" content="[% searchname FILTER html %] ([% bugs.size FILTER html %])">
[% END %]

so the call would look like

[% PROCESS global/header.html.tmpl
  head_content = meta_tags
....

Comment 11

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

(In reply to Dylan Hardison [:dylan] from comment #10)

Nice, I'm going to section your comment off into a separate ticket and assign it to myself.