Pomoc - VI. Dostosowanie szablonu do wymogów wyszukiwarek internetowych

Start

Programowanie

Poprawny szablon dla Joomla!

VI. Dostosowanie szablonu do wymogów wyszukiwarek internetowych

Poprawne szablony dla Joomla! Cz. VI

Mamy więc podstawowy zarys serwisu. Nie wygląda on jeszcze ciekawie. Więc wprowadzimy nieco zmian. Zoptymalizujemy również szablon dla wyszukiwarek internetowych. Joomla stoi przed pewnym wyzwaniem w porównaniu ze statyczną stroną internetową, ale techniki, które opiszemy tutaj mogą polepszyć wyniki indeksowania (przeszukiwania) Twojej Joomla!.

Kilka zasadniczych zmian w arkuszu CSS dla Joomla

Najpierw uczynimy tekst czytelniejszym. Wprowadzimy dwie małe zmiany do CSS Joomla.

body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%; /* nie zmniejszaj */ 
 
}

Zauważ: Opuściliśmy styl zastosowany do "html,body", ponieważ nie chcemy dwukrotnie deklarować rozmiaru czcionki.

To rozwiązanie nadaje asortymentowi czcionek bardziej sensowny rozmiar. Przypomnij sobie, co mówiliśmy o wymiarowaniu czcionek w artykule , Czysty szablon dla Joomla. Wybrałem także bezszeryfową (sans-serif) rodzinę czcionek: *Verdana, Arial, Helvetica, sans-serif*. Na stronach WWW stosujemy zasadę przeciwną do zalecanej na stronach papierowych. Na stronach papierowych czcionki szeryfowe (np. Times New Roman) są łatwiejsze do czytania, na stronach internetowych - przeciwnie.

Następnie wycentrujemy stronę.

body {
text-align:center; /* dla IE */
}
 
#wrapper {
position:relative;
width:85%;
margin:0 auto;
}

W porządku. Tutaj wycentrowaliśmy stronę i nieco ją rozszerzyliśmy. To jest layout Joomla CSS o zmiennej szerokości kolumn. Główna część strony zawsze będzie miała szerokość 85% okna przeglądarki. Będzie przeskalowana zależnie od rozdzielczości ekranu.

Teraz, wprowadzimy kilka drobnych zmian szerokości kolumn. To ważne, aby kolumny nie zachodziły na główny obszar, burzyłyby bowiem layout w oknie przeglądarki.

#leftcontent { 
 
width:175px;
}
#centercontent {
margin-left: 190px; /* wiecej niz szer. #leftcontent na odstep od centralnej kolumny*/
margin-right:165px; /*mniej, niz szer. #rightcontent na odstep od centralnej kolumny*/
}
#rightcontent {
width:150px;
}

Zmniejszyłam szerokość obu bocznych kolumn i powiększyłem marginesy. Zauważ: zrobiłem niewielki odstęp między kolumnami bocznymi i centralną.

Dodajmy jeszcze kolor, C00 - ciemniejszy od czerwonego i biały - fff:

body {
.....
background-color: #C00;
......}
#wrapper {
background-color:#fff;
}

Optymalizacja dla wyszukiwarek internetowych (Joomla SEO)

Tak, to dobry moment. Zabierzmy się za optymalizacją Joomla! dla wyszukiwarek

Im coś jest w kodzie xHTML bliżej początku, tym większe ma znaczenie dla silników przeszukujących i przynosi lepsze efekty w rankingach stron. Niestety, witryna Joomla generuje mnóstwo kodu na początku.

W efekcie Twoja główna zawartość (środkowa kolumna) jest zepchnięta w dół. Ale z pomocą przychodzi CSS. Przypomnij sobie z poprzedniej części, że boczne kolumny spozycjonowaliśmy bezwzględnie, używając position: absolute. Dzięki temu można je umieścić w dowolnym miejscu dokumentu źródłowego, pamiętając jedynie, aby były umieszczone w głównym bloku (kontenrze) obejmującym - wraper. Umieścimy je więc po bloku głównej zawartości. Więcej, jeśli chcesz i jeśli masz w nim sporo kodu technicznego - możesz stworzyć kontener na nagłówek (header) i przesunąć go w dół, poniżej obszaru głównej zawartości.

<p><body>
<div id="wrapper"></p><p><div id="centercontent">
<div class="insidecenter">
<?php mosMainBody(); ?>
</div></div></p><p><div id="header">
<?php mospathway() ?>
<?php mosLoadModules('top');?>
</div></p><p><div id="leftcontent">
<?php mosLoadModules('left');?>
</div></p><p><div id="rightcontent">
<?php mosLoadModules('right');?>
</div></p><p></div></p><p><?php mosLoadModules('bottom');?>
<?php include_once('includes/footer.php'); ?>
 
<p><a
href="http://validator.w3.org/check?uri=http%3A%2F%2Flivesite.compassdesigns.net%2F"
target="_blank" title="W3C Joomla Design">Valid
xhtml?</a></p></p><p></body>
</html></p>

Dodaliśmy tę regułę (przeczytaj o kodzie XHTML wyżej), aby umieścić centralną kolumnę poniżej

.insidecenter {
padding: 100px 0 0 0;
}

Ostatnie, ale nie mniej ważne - przesuwamy stopkę {footer} poniżej bloku wraper, umieszczając ją wewnątrz kolorowego tła strony.

Teraz dodajemy tytuły strony

<div id="header">
<h1><span><?php echo $mosConfig_sitename; ?></span></h1>
<h2><span><?php echo $mosConfig_live_site; ?></span></h2>
 
<?php mospathway() ?>
<?php mosLoadModules('top');?>
</div>

Zauważ, że nazwa i URL witryny znajdują się w znacznikach nagłówków (H1, H2). Rezultatem są dwa efekty. Po pierwsze, to dobra praktyka oddająca strukturę dokumentu. Czyli zwiększa dostępność witryny. Po drugie, pomaga w indeksowaniu Joomla w wyszukiwarkach, ponieważ coś, co znajduje się w nagłówku, ma nieco większą wagę niż słowa kluczowe.

Mamy teraz uporządkowany kod źródłowy szablonu Joomla, z odpowiednią niewielką poprawką na potrzeby SEO .

A Joomla SEO template