observablehq / framework

A static site generator for data apps, dashboards, reports, and more. Observable Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis.
https://observablehq.com/framework/
ISC License
2.56k stars 122 forks source link

HTML Structure and SEO #1763

Closed mcmcclur closed 1 month ago

mcmcclur commented 1 month ago

As of V1.12, Framework produces HTML without the standard structure of

<!DOCTYPE html>
<html>
  <head>
    ...stuff...
  </head>
  <body>
    ...more stuff...
  </body>
</html>

Framework produces just the required DOCTYPE, stuff, and more stuff. This is in strict compliance with the HTML specification, as I read it, but still counter to every introduction to HTML I've ever seen. In addition, I think it causes problems with meta-tags and SEO.

I bring up this issue because I've noticed that HTML generated by Framework does not work well LinkedIn. In particular, the Open Graph meta tags appear to be ignored. You can check how things will look when you post a link to LinkedIn using their post inspector. You can also link those results. For example, here's the post inspector's analysis of my Mark on Framework blog front page:

https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fmcmcclur.observablehq.cloud%2Fmark-on-framework%2F

I get a warning that I should add an og:image meta-tag and no image appears in the output. If you examine the page source, though, there is an og:image meta-tag that points to an image on the server.

My guess is that LinkedIn looks for the og:image meta-tag within a head element. To test this, I generated a more recent post on my other Framework generated blog. This time, I ran it through the post inspector before linking to it on LinkedIn. Again, the image was missing. So..., I manually edited the HTML to add the additional html, head, and body tags. Then, the og:image tag was picked up, as you can see:

https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fblog.wncviz.com%2Fposts%2FMisc%2Fhurricanes%2F


Here are a few tangential comments:

mbostock commented 1 month ago

This was fixed in #1732 and will be available in the next release.