Pre-rendered contents have invalid formatted void elements with a trailing slash

[jsakamoto]

Split from #13 from @nakigoe

---

HTML that is generated has errors according to https://validator.w3.org/nu/ Trailing slash on void elements has no effect and interacts badly with unquoted attribute values. The automatically generated trailing slash inside HTML tags prevents images from displaying when sharing the website on social networks (LinkedIn)

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0"/>
<title>Blazor WebAssembly .NET 7 Starting Template</title>
<meta name="description" content="Blazor WebAssembly .NET 7 production-ready starting template, coming from GitHub Actions and Vercel. Compression, linking, pre-rendering and analytics enabled."/>
<base href="/"/>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="css/app.css" rel="stylesheet"/>
<link href="nakigoe.styles.css" rel="stylesheet"/>
<link rel="image_src" href="https://nakigoe.org/_SRC/nakigoe-academy-night-2048.jpg" type="image/jpeg"/>
<meta name="image_width" content="2048"/>
<meta name="image_height" content="2048"/>
<meta property="og:image:secure_url" content="https://nakigoe.org/_SRC/nakigoe-academy-night-2048.jpg"/>
<meta property="og:image" content="https://nakigoe.org/_SRC/nakigoe-academy-night-2048.jpg"/>
<meta property="og:image:type" content="image/jpeg"/>
<meta property="og:image:width" content="2048"/>
<meta property="og:image:height" content="2048"/>
<meta name="theme-color" content="#260040"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#260040"/>
<meta name="msapplication-navbutton-color" content="#260040"/>
<meta name="msapplication-TileColor" content="#260040"/>
<meta name="msapplication-TileImage" content="_SVG/icon.svg"/>
<link rel="icon" href="_SVG/icon.svg" sizes="any" type="image/svg+xml"/>
<link rel="apple-touch-icon-precomposed" href="_SVG/icon.svg" sizes="any" type="image/svg+xml"/>
<link rel="apple-touch-startup-image" href="_SVG/icon.svg" type="image/svg+xml"/>

[jsakamoto]

@nakigoe After some research, I've been no confidence that the trailing slash in the HTML "void" elements cause preventing of showing OGP images on SNS sites.

First, the HTML standard says the trailing slash in the HTML "void" elements is valid and has no side effects.

See also: https://html.spec.whatwg.org/#start-tags

13.1.2.1 Start tags Start tags must have the following format:

6. Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/), which on foreign elements marks the start tag as self-closing. On void elements, it does not mark the start tag as self-closing but instead is unnecessary and has no effect of any kind. For such void elements, it should be used only with caution — especially since, if directly preceded by an unquoted attribute value, it becomes part of the attribute value rather than being discarded by the parser.

The HTML Checker you told me about also reports those ending trailing slash meta elements as just information of "it has no effect", not a warning or error because the checker is based on the HTML standard. If I had to say that unquoted attribute values can cause problems, but such attribute values must not happen in this context.

Second, in fact, LinkedIn looks to handle OGP meta elements of websites correctly even if the meta elements in those websites end with a trailing slash, "/>". See the following screenshots.

All of the meta elements of the site "https://jsakamoto.github.io/" end with a trailing slash. And the GitHub repository page "https://github.com/jsakamoto/BlazingStory" is more confusing. Some meta elements on that page end with a trailing slash, but others do not. Regradless of that, LinkedIn looks to show its OGP image. (By the way, the "og:image" meta element on that GitHub repository page ended with a trailing slash.)

So there is a possibility the problem you reported that SNS sites never show the OGP image of your site will not be fixed even if I made this prerendering library generate HTML void elements without trailing slash.

I believe I can change the behavior of this library as I mentiond above, but I'd like to concern it well before starting something. What do you think about it?