Trailing slash on void elements has no effect and interacts badly with unquoted attribute values. (Fix for Jekyll Seo Tag plugin & HTML5)

Question

If I use the Jekyll SEO tag plugin to add metadata tags for search engines and social networks for improving the indexing of the Website, the plugin generates, in the resulting HTML page, a large number of lines which include void elements such as meta and link.

The Jekyll SEO tag plugin v2.8.0 or below, adds an end tag to each of these void elements as follow:

• <meta property="og:title" content="Website Title"/>
• <link rel="canonical" href="https://example.com"/>

However, when we validate the resulting HTML page with the W3C Markup Validation Service we receive the following message as outcome:

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

In fact, the following link element without trailing slash:

• <link rel=canonical href=https://example.com>

is different than the following element with trailing slash:

• <link rel=canonical href=https://example.com/>

In the second case (with the trailing slash), https://example.com/ becomes the value of the href attribute in the DOM.

Since https://example.com and https://example.com/ are two different URLs, this could lead to unexpected behaviours and issues if the page is manually amended at some stage, and quotes are removed (i.e.: HTML compression for performance optimizations).

How can I prevent Jekyll SEO tag plugin from adding the trailing slash?

Answer 1

For resolving the issue is possible to update the Jekyll SEO tag in the following way:

1. Open the Command Line Interface
2. Enter the following command: gem info jekyll

An output similar to the following result would be shown:

*** LOCAL GEMS ***

jekyll (4.x.x)
    Authors: Tom Preston-Werner, Parker Moore, Matt Rogers
    Homepage: https://jekyllrb.com
    License: MIT
    Installed at: <PATH>/ruby/3.2.0

From within the folder 3.2.0

1. Open the gems folder
2. Open the jekyll-seo-tag-2.8.0
3. Open the folder lib
4. Make a backup of the template.html file
5. Open the template.html file
6. Remove the trailing slash for each line containing the void elements accordingly
7. Save the amended template.html file

Rebuild the website with Jekyll, and review the page source of the HTML page from the Web browser. Now you will notice that void elements no longer contain the trailing slash.