DEV Community

Jess Chandler
Jess Chandler

Posted on

Is there a sweet spot between SEO and DRY for site headers?

Smart peeps - so, I have a question for you. Here's a hypothetical situation:

Situation

You have done it, you have built a website. Cleverly, you have a partials folder with a header and footer and you just include that on every page. But, now every single page has the same meta tags. This makes the search engine algorithms push your site into the land of boring repeat content - not good.

Solutions? <- this is where I want to put your thoughts!!!

NOTE: I will update this Solutions section with great answers from you guys!

Jekyll

I have addressed this in jekyll for static sites by including liquid tags in the header that draws directly from the YAML during the build process. It is smooth and easy.

In the /includes folder, I have a file called 'head.html' that is constructed like so:

<head>
  <!-- other head meta stuffs like width and utf-->

  <title>{{ site.name }}{% if page.title and page.url != "/" %} | {{ page.title }}{% endif %}</title>
  <meta name="description" content="{% if page.description %} | {{ page.description }}{% else %}{{ site.description }}{% endif %}">

   <!-- other head stuffs like twitter and css -->
</head>

This 'head.html' is included as part of most page layouts in the /layouts folder, like so (this is 'default.html':

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
    {% include header.html %}

    <div class="page-content">
      <div class="wrapper">
        {{ content }}
      </div>
    </div>
    {% include footer.html %}
  </body>
</html>

And then, in the pages, I can use YAML, like so:

---
layout: default
title: space invaders in the wild
permalink: /spaceinvaders/
description: a gallery of space invaders that I have seen
img: somedir/genericspaceinvader.png
---
## My super duper header
My super duper content

Now, this page will show up (to search engines...and eventually other humans) with the meta like:

  <title>ME: space invaders in the wild</title>
  <meta name="description" content="a gallery of space invaders that I have seen">

Perhaps not the best for SEO, but not the same as all 20,000 other pages showing up as : 'Me' with a description of 'my description' or whatever.

How do you do it for other sites? Is there a similar approach?

Top comments (2)

Collapse
 
ben profile image
Ben Halpern

How do you do it for javascript based sites? Is there a similar approach?

Would this be Node-based? If the entire HTML is constructed by the JS on the client it won't be possible to create proper meta tags as far as I know. If they are to be built on the server there are a few options.

Collapse
 
jessachandler profile image
Jess Chandler

I'm actually curious how people approach this for different site designs. I have the jekyll example...maybe I'll add code.