使用 .htaccess 在 HTML 头部插入链接和元标记答案

【问题标题】：Insert link and meta tags in HTML head using .htaccess使用 .htaccess 在 HTML 头部插入链接和元标记
【发布时间】：2021-08-23 07:35:30
【问题描述】：

我有几个 HTML 页面在 <head> 中使用以下标签。为了减小文件大小，我想使用.htaccess 添加标签：

<link type='image/x-icon' rel='shortcut icon' href='images/favicon.ico' />
<link rel='apple-touch-icon' sizes='180x180' href='apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>
<link rel='manifest' href='site.webmanifest'>
<link rel='mask-icon' href='safari-pinned-tab.svg' color='#000'>
<meta name='msapplication-tilecolor' content='#000' />
<meta name='theme-color' content='#ffffff' />
<link rel='stylesheet' href='css/styles.css' />

我尝试在线搜索，但没有找到任何可能的信息。如何使用.htaccess在每个页面的<head>中插入上面的标签？

【问题讨论】：

标签： html .htaccess tags

【解决方案1】：

.htaccess 过滤和修改 http 请求，而不是处理它们。要处理请求服务器端，您应该使用 php 等服务器端语言来更改 html 文件。

要减小文件大小，您应该使用内置压缩工具（在 .htaccess 中）。与缩小的 html 相比，这始终将 html 大小减少了 60% 以上。

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE [ ]
</IfModule>

并将 [ ] 替换为所需的内容类型

要在客户端添加相同的<head> 标签，您可以编写一个writeHead.js 文件来写入html 元素：How to add DOM element script to head section?。然后在你的<head>手动添加

<script type="text/javascript" src="writeHead.js">

最后注意，这个 js “阻止” DOM 加载，因为浏览器必须在加载其他元素之前完全加载文件。性能方面，最好保持 html 原样，而不是使用浏览器资源来生成您知道 100% 存在的元素。这将导致无形的文件大小节省，以换取可能有形更长的加载时间。

【讨论】：