1

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?

Goemon Code
  • 73
  • 1
  • 10
  • That warning can safely be ignored. "Trailing slash on void elements has no effect" -- OK fine, it doesn't hurt anything. "interacts badly with unquoted attribute values" -- In this case the attribute values are quoted. There is nothing to fix here. – Stephen Ostermiller May 09 '23 at 13:46
  • As clearly stated this fix is for Jekyll SEO tag + HTML5 if certain conditions are met. One of the most common situations is the use of some too aggressive HTML compression processes (either manual or automatic) which may remove too many quotes. As you certainly know, the W3C HTML checker would not highlight any error or warning if the link element is used without quotes (i.e.: `` ). – Goemon Code May 11 '23 at 23:02

1 Answers1

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.

Goemon Code
  • 73
  • 1
  • 10