Esse código é aceitável ou prejudicial?

Ha pouco tempo comecei estudar sobre SEO, e hoje estou construindo um site e fazendo o máximo para otimiza-lo.

Porém criei um menu e gostaria de saber se posso usá-lo assim ou ele pode prejudicar meu site?

É uma espécie de 2° menu, 4 links lado a lado, com 1 foto cada (setadas pelo background no CSS)

Preciso usar o H2 para otimizá-las,

A tag Span uso para posicionar o texto.

Meu layout é esse aqui (reparem as 4 imagens): http://www.tigertools.com.br/layout/2.html

Qual a melhor solução para destacar meu 2° menu (4 imagens)

O Código que criei a principio foi esse (HTML 5):

<nav id="banner">
 <ul>
 <li><h2><a href="#" class="torneamento" title="Torneamento"><span>Torneamento</span></a></h2></li>
 <li><h2><a href="#" class="fresamento" title="Fresamento"><span>Fresamento</span></a></h2></li>
 <li><h2><a href="#" class="corteecanal"title="Corte e Canal"><span>Corte e Canal</span></a></h2></li>
 <li><h2><a href="#" class="furacao" title="Furação"><span>Furação</span></a></h2></li>
 </ul>
</nav>

---
CSS:

#banner {
overflow: hidden;
}

#banner ul {

font-family: AGForeignerBoldItalic;
font-size: 15px;
list-style: none;
margin: 0;
padding: 0;
}

#banner ul li {

float: left;
}

#banner ul li h2 a {

color: #fff;
display: block;
height: 269px;
margin-left: 5px;
text-decoration: none;
width: 221px;
}

#banner ul li h2 a span {

display: block;
padding: 233px 0 0 20px;
}

#banner .torneamento {

background: url(images/torneamento.jpg);
margin-left: 0;
}

#banner .fresamento {

background: url(images/fresamento.jpg);
}

#banner .corteecanal {

background: url(images/corteecanal.jpg);
}

#banner .furacao {

background: url(images/furacao.jpg);
}

Agradeço muito quem puder ajudar na elaboração desse código!