如何阻止Jekyll SEO Tag插件为void元素添加尾部斜杠？

使用Jekyll SEO Tag插件为网站添加搜索引擎及社交网络元数据标签以提升索引效果时，该插件生成的HTML页面中会包含大量<meta>、<link>等空元素代码行。Jekyll SEO Tag插件v2.8.0及更低版本会为这些空元素添加尾部斜杠，示例如下：

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

使用W3C标记验证服务验证页面时，会收到提示：

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

更关键的是，不带尾部斜杠的<link rel=canonical href=https://example.com>与带尾部斜杠的<link rel=canonical href=https://example.com/>存在差异：后者中https://example.com/会成为DOM里href属性的值。由于https://example.com和https://example.com/是两个不同的URL，若后续手动修改页面（如为优化性能进行HTML压缩）移除引号，可能引发意外行为及问题。

请问如何阻止Jekyll SEO Tag插件添加尾部斜杠？

以下是几种可行的解决方案：

1. 升级插件到最新版本 #

Jekyll SEO Tag v2.9.0及以上版本已经修复了这个尾部斜杠的问题，默认不再为<meta>、<link>等空元素添加尾部斜杠。操作步骤：

• 在项目的Gemfile中，将插件版本指定为>= 2.9.0，比如：gem "jekyll-seo-tag", ">= 2.9.0"
• 运行命令bundle update jekyll-seo-tag完成升级
• 重新构建项目，生成的HTML空元素就不会带尾部斜杠了

2. 自定义插件输出模板（不升级的情况下） #

如果因为项目依赖限制无法升级插件，可以通过覆盖插件的默认模板来修改输出：

• 在你的Jekyll项目根目录下，创建_includes/seo.html文件
• 复制对应版本Jekyll SEO Tag插件的官方模板代码
• 修改模板中所有空元素的结尾，把/>替换为>，比如将<meta property="og:title" content="{{ page.title }}"/>改成<meta property="og:title" content="{{ page.title }}">
• 在你的页面模板中，用{% include seo.html %}替换原来的{% seo %}标签，即可使用自定义模板生成不带尾部斜杠的元数据标签

3. 构建后批量处理HTML文件 #

如果前两种方法都不适用，可以在Jekyll构建完成后，用工具批量移除HTML文件中的尾部斜杠：

• Linux/macOS：使用sed命令批量替换，在项目根目录运行：

  find _site -name "*.html" -exec sed -i '' 's/\/>//g' {} \;
  

• Windows：可以编写PowerShell脚本，或者使用第三方批量替换工具，遍历_site目录下的所有HTML文件，将/>替换为>

内容的提问来源于stack exchange，提问作者Goemon Code