How the CSS Lists can Help the SEO

Google controlla più di 200 parametri per assegnare al nostro sito web una posizione all’interno dei risultati delle ricerche. Tra questi parametri c’è l’organizzazione dei link del nostro sito web. Vogliamo mostrarvi come sia possibile ottenere una migliore scansione del nostro sito da parte di Googlebot così da essere indicizzato in maniera migliore semplicemente usando le Liste CSS.

Sappiamo che in ogni sito è necessaria una pagina Sitemap che raggruppi tutte i link interni del nostro sito. Attenzione a non confondere questa Sitemap con la Sitemap XML, questa sarà una pagina web strutturata come tute le altre pagine (html, php, asp, …) del nostro sito. E’ buona prassi chiamarla Sitemap (esempio: sitemap.html). Quello che molti non sanno è che se in ogni pagina del nostro sito inseriamo una navigazione html sottoforma di lista Google capisce molto meglio che si tratta di un menu di navigazione contenente link interni al nostro sito. Ciò sarà utile ad un SEO che vuole essere primo in Google usando questa e altre tecniche e regole.

CSS Lists Example

CSS

.text-menu {
color: #FFFFFF;
font-size: 0.85em;
padding: 0px;
margin: 0px;
text-align: right;
width: 70%;
}

.text-menu ul {
 margin: 0px;
 list-style-type: none;
 list-style-position: inside;
}

.text-menu li {
 display: inline;
 float: right;
 width: auto;
 padding-left: 6px;
}

You can customize width, padding, margin and why don’t to add a background for a unique style?

In this example we have used the display attribute with inline value.

HTML

<div class="testomenu">
 <ul>
 <li><a href="#" title="WebSite Name">WebSite Name</a></li>
 <li><a href="#" title="Link1">Link1</a></li>
 <li><a href="#" title="Sitemap">Sitemap</a></li>
 <li><a href="#" title="Contact us">Contact us</a></li>
 </ul>
</div>

Dont’t forget the title attribute in <a> tags!

about the example…

Display values:

block

to generate a block box.

inline-block

to generate a block box, which itself is flowed as a single inline box.

inline

to generate one or more inline boxes. (used in the example)

list-item

to generate a principal block box and a list-item inline box.

none

to not appear in the formatting structure. Not use it in the menu list, otherwise google does not follow it. Googlebot is as a person. If you don’t see a link you can’t visit it, Googlebot too.

run-in

With run-in you create either block or inline boxes, depending on context.

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption

to behave like a table element.

Resouces about Lists (from W3C):

List Style Type

List Style Image

List Style Position

List Style

CSS Lists Showcases

Graphic-all Design

B&Q Online

Odopod

Rainfall

Powerfulcms

Giving to MIT

Kupferwerk

De La Salle School

Big S Web Design

Itv News

Guildhall

Extras

eQuality Solutions

Mobiluck

Porter’s Carpet & Furniture

Green Circle Shopping Center

Down Syndrome Centre

kkmedia

Need more about CSS and SEO? Follow us on Twitter! Every day News and Resources  not published in our blog.

Correlated Articles

• Using Backgrounds with CSS2.1 and CSS3 (1)
• Mixing CSS3 and jQuery… How to CSS3 Effects via jQuery (26)
• Best CSS Resources to Become a CSS Guru (6)
• Dark Side of CSS: Selectors (1)
• SEO Tips – How to Avoid Duplicate Pages? (10)