Open jsakamoto opened 1 year ago
@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:
- 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?
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)