如何修复squarespace H1空标签

Question

出于某种原因，squarespace 只允许您在页面上选择标题或图像徽标（不能同时选择两者），现在我正在使用公司徽标，但在我的 SEO 中，我得到一个空的 H1 标签，这是有意义的，因为 squarespace 呈现它如：

<h1 id="logoImage" class="tmpl-loading logo-image"><a href="/"><img src="//static1.squarespace.com/static/52fe4d7be4b029ff09165036/t/57e0298ed1758e6d441ad15c/1493665228848/?format=1500w" alt="Am-Finn Sauna and Steam"></a></h1>

• 有人找到了这个的环岛吗？可以两者兼得吗？

Answer 1

经过多次测试，我所做的是使用没有徽标的标题，并通过 css 创建了带有实际徽标的背景图像，使标题不透明度为 0。 -它解决了我的 H1 空标签问题。

Answer 2

<script>
  document.addEventListener('DOMContentLoaded', function() {
      const div = document.createElement('div');
      const a = document.querySelector('#logoImage a');
      const aStr = a.outerHTML;
      div.innerHTML = aStr;
      const h1 = document.getElementById('logoImage');
      h1.replaceWith(div);
  });
</script>
<style>
  div#logoWrapper img {
       max-width: 250px;
  }
</style>

这段代码有效！我写这个是因为其他解决方案使用 jQuery，而这是纯 JavaScript。重要提示：我必须将其放置在网站 > 页面 > 设置（齿轮图标）> 高级中。当我将它放在“网站”>“网站工具”>“代码注入”中时，它不起作用，也无法从那里获得任何更改 DOM 的代码。不幸的是，这意味着我必须将代码逐一添加到每一页。 Squarespace 是否会阻止代码注入字段的 DOM 操作？将此代码放在那里会更理想，这样就可以将其添加到单个位置并影响所有页面。谢谢