Duplicate/stripped metadata (and other HTML meta-related) elements!?

Question

Duplicate/stripped metadata (and other HTML meta-related) elements!?

galopin opened this issue 10 months ago · comments

Describe the bug

This is a mild issue but it ought to be reported.

A few months ago, I noticed something weird at the DOM level with metadata and link elements in Observable notebooks… It has not been corrected since and I can replicate it consistently.

Some metadata and external resource link elements are duplicated while others are stripped!?

To Reproduce

For example, open the Arc diagram notebook.
Check notebook HTML code in Sources pane:

<!-- 8< snipped >8 -->
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="apple-touch-icon" href="https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png"/>
<link rel="icon" type="image/png" href="https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png" sizes="512x512"/>
<link rel="search" type="application/opensearchdescription+xml" href="https://static.observablehq.com/opensearch.bf5e25ab3eef28bb53ee52e7f57ea5210eb03b2edb9f7c51328d4b7ed874497a.xml" title="Observable"/>
<title>Plot: Arc diagram / Observable | Observable</title>
<link rel="canonical" href="https://observablehq.com/@observablehq/plot-arc-diagram" class="jsx-89ba54f59fad5733"/>
<link rel="alternate" type="application/rss+xml" title="Observable | Observable" href="https://api.observablehq.com/documents/@observablehq.rss" class="jsx-89ba54f59fad5733"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://observablehq.com/@observablehq/plot-arc-diagram"/>
<meta property="og:site_name" content="Observable"/>
<meta name="twitter:site" content="@observablehq"/>
<meta name="title" content="Plot: Arc diagram"/>
<meta property="og:title" content="Plot: Arc diagram"/>
<meta name="description" content="This diagram places nodes in a vertical line with circular arcs for links. Unlike other network visualizations such as a force layout, the appearance (and usefulness) of an arc diagram is highly dependent on the order of nodes."/>
<meta property="og:description" content="This diagram places nodes in a vertical line with circular arcs for links. Unlike other network visualizations such as a force layout, the appearance (and usefulness) of an arc diagram is highly dependent on the order of nodes."/>
<meta property="og:image" content="https://static.observableusercontent.com/thumbnail/30be0c64141c70e64726f56e4d468222629824075cae7f3ff0aeab3b4e06bead.jpg"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="author" content="Observable"/>
<meta name="article:author" content="https://observablehq.com/@observablehq"/>
<meta property="article:published_time" content="2023-08-11T03:15:58.066Z"/>
<meta property="article:modified_time" content="2023-08-11T07:24:55.525Z"/>
<meta name="next-head-count" content="9"/>
<!-- 8< snipped >8 -->

BTW, note the uppercased S in the charset attribute which declares the document's character encoding. It has no impact but it should be lowercased ;)

Inspect <head> element in Elements pane:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="apple-touch-icon" href="https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png">
<link rel="icon" type="image/png" href="https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png" sizes="512x512">
<link rel="search" type="application/opensearchdescription+xml" href="https://static.observablehq.com/opensearch.bf5e25ab3eef28bb53ee52e7f57ea5210eb03b2edb9f7c51328d4b7ed874497a.xml" title="Observable">
<title>Plot: Arc diagram / Observable | Observable</title>
<link rel="canonical" href="https://observablehq.com/@observablehq/plot-arc-diagram" class="jsx-89ba54f59fad5733">
<link rel="alternate" type="application/rss+xml" title="Observable | Observable" href="https://api.observablehq.com/documents/@observablehq.rss" class="jsx-89ba54f59fad5733">
<meta property="og:type" content="article">
<meta property="og:url" content="https://observablehq.com/@observablehq/plot-arc-diagram">
<meta property="og:site_name" content="Observable">
<meta name="twitter:site" content="@observablehq">
<meta name="title" content="Plot: Arc diagram">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="apple-touch-icon" href="https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png">
<link rel="icon" type="image/png" href="https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png" sizes="512x512">
<link rel="search" type="application/opensearchdescription+xml" href="https://static.observablehq.com/opensearch.bf5e25ab3eef28bb53ee52e7f57ea5210eb03b2edb9f7c51328d4b7ed874497a.xml" title="Observable">
<link rel="canonical" href="https://observablehq.com/@observablehq/plot-arc-diagram" class="jsx-89ba54f59fad5733">
<link rel="alternate" type="application/rss+xml" title="Observable | Observable" href="https://api.observablehq.com/documents/@observablehq.rss" class="jsx-89ba54f59fad5733">
<meta name="next-head-count" content="7">

Some metadata and link elements with charset="utf-8", name="viewport", rel="apple-touch-icon"†, rel="icon"†, rel="search"†, rel="canonical"† and rel="alternate"† attributes are duplicated!?

Metadata elements with property="og:title", name="description", and property="og:description" attributes and subsequent elements have vanished.

† This phenomenon occurs in Safari but not in Edge. On the other hand, every Open Graph metadata element is stripped in Edge!?

Compare the output…

Expected behavior

I expect the output of metadata to be roughly the same between the HTML source code and DOM rendition!?

CobusT · Answer 1 · Mon Sep 25 2023 08:37:31 GMT+0800 (China Standard Time)

Thanks.

The uppercase S in charSet was fixed it seems.
I am not sure why we don't see the og:title and og:description properties in the elements pane, but when you check the page here those properties seem to be there.

We will investigate the duplicate meta tags and links.

Michaël Guitton · Answer 2 · Fri Sep 29 2023 20:14:00 GMT+0800 (China Standard Time)

See also this old but still relevant post: The Open Graph and Sharing Tags

One thing that seemed silly was the duplication of the article description. Since these use different attributes, I decided to try combining them onto a single element. At first, this didn't work. Twitter wouldn't pull in the description.

<meta property="og:description" 
      name="description"
      content="…" />

By specifying the property attribute before the name attribute, the Twitter Card validator was pulling in the description. Other Open Graph validators also seem to be okay with this approach.