CODEWITHSUNDEEP
htmldomseojekylljekyll-extensions
Goemon Code
Goemon Code

Reputation: 103

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

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:

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:

is different than the following element with trailing slash:

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?

Upvotes: 1

Views: 4063

Answers (1)

Goemon Code
Goemon Code

Reputation: 103

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.

Upvotes: 2

Related Questions