Самый важный и простой шаг — лечение дивянки использование html5 тегов для разметки страницы.

Вот здесь Вадим Макеев расскажет Вам, как и почему стоит использовать html5 теги.
А вот здесь Ричард Кларк расскажет Вам, как и почему не стоит использовать html5 теги.
А потом ещё можете прочитать вот эту статью, чтобы окончательно запутаться и уйти на бэк-энд.

Но если вам это интересно настолько, что вы понимаете, что между SEO и семантикой не очень-то много общего, то можете ещё почитать вот эти статьи.

Кстати, обязательно читайте комментарии к статьям, они тоже очень полезны.

P.S. После просмотра этих видео вы поймете, почему картинка под спойлером очень крутая.

Потому что надо фон сместить.

.overlay {
  top: 0;
  left: 0;
}

Нет, не норм.

В спецификации написано:

The cite element represents the title of a work... (Элемент cite представляет название работы...)

И там же поясняют:

A person's name is not the title of a work... (Имя человек это не название работы...)

Я бы разметил так:

<article>
  <footer>
    <p>Nick</p>
    <p><time datetime="2014-09-19">19 сентября 2014 год</time></p>
  </footer>
  <p>Так может быть оформлен комментарий в блоге.</p>
</article>

Можно и нужно оборачивать одинаковые элементы в списки.