WebAir | web. for passion » How CSS Lists can Help the SEO

How CSS Lists can Help the SEO

Posted by WebAir Srl, In Tutorial, Webdesign, Webmarketing-SEO

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.

Google controls more than 200 parameters to give our website a positon in search results. Among these is the organization of the internal links from our website. We want to show you how to get a better scan of our site by Googlebot to be indexed in better way simply by using the CSS Lists.

We know that each site requires a Sitemap page bringing together all the internal links of our website. Do not confuse this with the XML Sitemap, this will be a web page structured as all the other pages (html, php, asp, ...) of our site. It 'good practice to call it Sitemap (example: sitemap.html). What many do not know is that if every page of our site include an Html Navigation List form, Googlebot understand much better that it is a menu that contains internal links to our site. This will be useful for a SEO that wants be first in Google using this and others tecniques and rules.

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.