CODEWITHSUNDEEP
htmlcssseosquarespacepage-title
Diana
Diana

Reputation: 127

How to fix squarespace H1 empty tag

For some reason squarespace only allows you to choose a title on your page or an image logo (not both), right now I'm using the company logo but on my SEO I get an empty H1 tag which makes sense since squarespace renders it as:

<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>

Upvotes: 0

Views: 1154

Answers (2)

J Grover
J Grover

Reputation: 1079

<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>

This code works by replacing the h1 with a div element. I wrote this because other solutions used jQuery and this is plain JavaScript. IMPORTANT: I had to place it inside of Website > Pages > Settings (Gear Icon) > Advanced. When I placed it in Website > Website Tools > Code Injection it did not work nor could i get any code that changes the DOM to work from there. Unfortunately this means I had to add the code to every page one by one.

Upvotes: 0

Diana
Diana

Reputation: 127

After several testing what I did is use the title without the logo and via css I created a background-image with the actual logo, making the title opacity to 0. -It solves my H1 empty tag problem.

Upvotes: 1

Related Questions