Tekst źródłowy strony Optymalizacja witryny pod kątem wyszukiwarek internetowych

== Jak stworzyć stronę przyjazną wyszukiwarkom? ==
Na początku tego artykułu, chcę odpowiedzieć na to pytanie. Gdy coś jest w sieci internetowej, to najczęstszym i najważniejszym klientem jest bot wyszukiwarki. Aby dodać twoją stronę do indeksu, wyszukiwarki (jak. np. Google) wysyłają "roboty" do zindeksowania Twoich stron. Roboty "nie rozumieją" Javascript, obrazów, plików Flash i podobnych, które mogą czynić witrynę ładniejszą, ale są absolutnie bezużyteczne, jeśli chodzi do optymalizację pod kątem wyszukiwarek. Optymalizacja pod kątem wyszukiwarek (SEO, Search Engine Optimization) to obszerny temat. Można podchodzić do niego na wiele sposobów. SEO może się stać tematem odrębnego opracowania, ale tutaj chcę pomóc Ci uczynić swoje strony lepiej dostosowanymi do potrzeb wyszukiwarek, skupić się na odpowiedzi na pytanie, jak poprawić PR swojej strony (page rank).

Skoro już wiemy, jak działają wyszukiwarki, zobaczmy, w jaki sposób możemy skorzystać z tej wiedzy. W pierwszej kolejności skupimy się na obrazach. Grafiki nadają witrynie ładniejszy wygląd, ale równocześnie spowalniają ją. Witryna z dużą ilością obrazów wczytuje się o wiele wolniej niż witryna bez obrazów. Gdy użytkownik odwiedza stronę, przeglądarka musi otrzymać informacje niezbędne do jej wyświetlenia, w tym obrazy. Przeglądarka wyświetla witrynę i przechowuje różne jej części w pamięci podręcznej (buforuje). Pamięć podręczna działa jak dysk flash, ale wczytywanie z niej jest dziesięciokrotnie szybsze. W efekcie, im więcej obrazów jest w Twojej witrynie, tym więcej przeglądarka musi buforować w pamięci podręcznej. Trzy dołączone do standardowej  instalacji Joomla! szablony są zaprojektowane tak, aby odpowiadać na różne potrzeby i dlatego są stosunkowo powolne.

== Optymalizacja szablonu pod kątem wyszukiwarek ==
Teraz, przygotowanie. Ta część będzie nieco trudna. Nie musisz posiadać jakiejś specjalnej znajomości HTML czy CSS, ale musisz przeczytać ten fragment uważnie. Nie będę tu objaśniać podstaw tworzenia szablonów, a jedynie w jaki sposób spowodować szybsze wczytywanie dowolnego szablonu. 

Gdy przeglądarka ładuje strony, wysyła wiele żądań HTTP. Każda pozycja na stronie wczytywana jest w wyniku odrębnego żądania. Ponowne użycie raz wczytanych obrazków może znacznie przyspieszyć wczytywanie strony. <!--Now, be prepared. This part gets a little heavy. You can complete this with little or no knowledge of HTMl and CSS, but you need to read this carefully. For space's sake, I will not explain how to create a template from scratch, but merely explain how to take any template and help it to load faster. 

When a browser loads a page, it makes a number of HTTP requests. The browser must send out a different request for each item in a page.  By re-using images instead of creating new ones, you can make your page load faster.-->

'''Moduły i pozycje menu'''

Są najprawdopodobniej najczęściej używanymi rozszerzeniami w witrynie Joomla!. Zobaczymy, jak korzystać wielokrotnie z tego samego obrazu tła w poziomym menu i podstawowym module. Otwórz swój ulubiony program graficzny. Ustaw rozmiar obrazka: szerokość 1px i wysokość 55px. Ustawienia te przyspieszą wczytywanie. Pokoloruj swój pasek, jak chcesz, ale prosto. Mój jest cały czarny z wyróżnieniami (rozjaśnieniem) na górze. Zapisz go jako ''bar_background.png''. Następnie prześlij go do katalogu obrazków w swoim szablonie. Teraz przejdźmy do modyfikacji CSS. <!--These are probably the most used extensions in a Joomla site. Let's see how to use the same background image in a horizontal menu and a basic module. Open up your favorite image creator (mine is sadly Microsoft Paint, yeah I'm pretty cheap!). Set the image field to these settings: 1px in Width and 55px in Height. These settings will help in faster loading. Color your bar in any way you like, but keep it simple. Mine was just a basic black with highlights at the top. Save it as ''bar_background.png''. Then upload it to the image folder of your template. Now we get into some CSS editing.-->

'''Modyfikacja szablonu'''

Pliki CSS wyglądają różnie, zależnie od używanego szablonu. Nie musisz się jednak tym przejmować, ponieważ stworzymy zupełnie nowe ustawienia. Zaloguj się na zaplecze witryny i przejdź na stronę '''Rozszerzenia &rarr; Szablony &rarr; [szablon] &rarr; Edytuj CSS'''. Zaznacz główny plik CSS (zwykle template.css) i rozpocznij edycję. Prawdopodobnie konieczne będzie również edytowanie pliku HTML. Otwórz więc zaplecze na innej karcie przeglądarki, powtórz te same kroki, z tym, że zamiast '''Edytuj CSS''' wybierz '''Edytuj HTML'''. W pliku HTML należy dodać linie poniżej linii &lt;div id="wrapper"&gt;:  <!--The CSS file will look different depending on which template your using, but we should not have to worry about any of that since we will create totally new setups. Login to the back-end of your site and got to Exstension>>Template Manager>>''your template''>>Edit CSS. Select the main CSS file (which is usually template.css) and you can begin editing. You will probably also need to edit your HTML file. So open up another tab and repeat the same steps above except choose to Edit HTML instead of CSS. In your html file, add this line below your <div id="wrapper"> line:-->
<source lang="php">
<div id="top_nav">

<jdoc:include type="modules" name="top" style="xhtml" />

</div>
</source>
Ta linia dodaje pojemnik na poziome menu. Przejdź teraz do edytora CSS i dodaj gdzieś pod koniec pliku poniższy kod:
<source lang="css">
#top_nav {
float:left;
width:100%;
height:55px;
padding:0;
margin:0;
background:(your background image);
text-align:right;
border-top:1px solid #444;
}

.moduletable_nav {
font:1em Georgia, Helvetica, Verdana, Arial, sans-serif;
text-align:right;
}

.moduletable_nav ul {
list-style:none;
white-space:nowrap;
float:left;
padding:0;
margin:0;
width:100%;
}

.moduletable_nav li {
float:left;
margin:0;
padding:0;
}

.moduletable_nav li a {
float:left;
display:block;
margin:0;
padding:7px 10px 6px 10px;
list-style-type:none;
border-right:1px solid #555;
border-bottom:none;
}

.moduletable_nav a:link, .moduletable_nav a:visited {
color:#ccc;
text-decoration:none;
margin:0;
}

.moduletable_nav a:hover, .moduletable_nav li#current a {
color:#eee;
background:#232323;
text-decoration:underline;
}
</source>
Zrobione! Wyjaśnijmy działanie. Element #top_nav przechowuje wszystkie style pojemnika dodanego w pliku HTML. Zastąp tylko linię <tt>background:(your background image here)</tt> wpisem z adresem URL oraz innymi własnościami stylu. Składnia jest następująca:
<source lang="css">background:url(../images/bar_background.png) repeat-x;</source>
Ustawienie ''repeat-x'' zapewni, że Twoj mały obrazek zostanie powtórzony w poziomie tyle razy, aby wypełnić cały pasek. Możesz zmienić kolor niektórych własności, aby odpowiadał Twoim potrzebom. Pamiętaj jedynie, aby dodać przyrostek '''_nav''' na końcu elementu  '''.moduletable'''. To będzie ważne później.<!--Okay, so what does all this mean? The #top_nav element holds all the styles for the container you just created in your html file. Replace this line: background:(your background image here) with the URL style. The syntax is: <source lang="css">background:url(../images/bar_background.png) repeat-x;</source>
The ''repeat-x'' will ensure that your skinny little image will reach all the way across the bar. You can change some of the color styles to suit your needs. Just make sure you add '''_nav''' at the end of the '''.moduletable''' element. It will become important later.  -->

Teraz musimy określić podstawowe własności modułu. Oto jego konfiguracja: 

<source lang="css">
.moduletable_box {
font:1em Georgia, Helvetica, Verdana, Arial, sans-serif;
border:1px solid #444;
border-top:none;
margin:0.5em 0 0.5em 0;
background:#fff;
}

.moduletable_box h3 {
padding:5px;
margin:0;
color:#eee;
background:#313131 url(../images/bar_background.png) repeat-x;
}

.moduletable_box li {
margin-left:1.5em;
list-style-type:disc;
color:#5a4e41;
}

.moduletable_box a:link, .moduletable_box a:visited {
color:#006600;
text-decoration:none;
border:none;
}

.moduletable_box a:hover {
text-decoration:underline;
}
</source>
Ten fragment stworzy niewielki pojemnik, pomocny w przyspieszeniu wczytywania. Podobnie jak poprzednio - możesz zmienić inne własności stylu, pamiętając o przyrostku  '''_box''' na końcu. <!--This will create a nice little box that helps the site load quicker. Again, you can change the styles and keep the '''_box''' suffix at the end.-->

'''Opublikuj moduły'''
Masz kod, co teraz? Teraz trzeba po prostu skonfigurować moduły. Przejdź na strone '''Rozszerzenia &rarr; Moduły'''. Otwórz do edycji moduł '''Menu witryny'''. W parametrach modułu po prawej stronie ustaw następujące opcje:
* '''Styl menu''': Lista
* '''Podrzędne zawsze''': Nie
* '''Przyrostek klas CSS modułu''': _nav (w sekcji parametrów rozszerzonych).
Upewnij się, że wyświetlanie tytułu jest wyłączone (po lewej stronie: '''Pokaż tytuł''' - Nie) i zapisz nowe ustawienia. Następnie stwórz nowy moduł. Kliknij w przyborniku przycisk '''Nowy''' i wybierz z listy opcję '''Własny kod HTML''' [''Custom HTML'']. Nazwij menu, jak chcesz. Następnie wykonaj te same kroki co poprzednio, z tym że parametrowi '''Przyrostek klas CSS modułu''' ustal wartość '''_box''', dodaj jakiś tekst modułu, opublikuj go i zapisz. Otwórz swoją stronę frontową i... bingo! Zobaczysz nowe menu i moduł. 
<!--You have the code, now what? Now you get to do the easy part, configure the modules. Go to Extensions>>Module Manager. You should already have a module published called ''Main Menu''. Open this one for editing. Once it is open, there will be some parameters on the right, set the '''Menu Style''' to '''List''', '''Always show sub-menu items''' to '''no''', and the '''Module Class Suffix''' to '''_nav''' (note: the last one will be under the Advanced Parameters section). Oh, and make sure you have the '''Show Title''' set to '''off'''. Save that and then create a new module.  Hit the "New" button and choose the Custom HTML option. Name the menu whatever you like. Follow the same steps above except set the Module Class to '''_box'''. Add some text to the module and publish and save it. Open up your front-end and bingo! You should see your new menu and module.-->
== Konfiguracja witryny ==
Skoro już wiemy, jak zmniejszyć ilość wczytywanych obrazów, skupmy się na zmniejszeniu rozmiaru wczytywanych skryptów. Jednymi z największych plików w Twoim Joomla! są pliki języka skryptowego JavaScript. Pliki te o tyle przyczyniają się do poprawy wyglądu witryny, co obniżają jej dostępność, w tym dla wyszukiwarek, i spowalniają ładowanie stron. Aktualnie nie ma w Joomla! prostego sposobu "wyłączania" plików biblioteki JavaScript - mootols. Jeśli ich nie potrzebujesz, możesz skorzystać z poniższego kodu, by wyłączyć wszystkie pliki JavaScript:

<source lang="php">
<?php
// Remove mootool sripts for guest and registered
$user =& JFactory::getUser();
if ($user->get('guest') == 1 or $user->usertype == 'Registered') {
    $headerstuff = $this->getHeadData();
    $headerstuff['scripts'] = array();
    $this->setHeadData($headerstuff);
}
?>
</source>
Umieść ten kod w swoim głównym pliku szablonu (index.php) tuż przed instrukcją "<jdoc:include type="head" />".

'''Gzip'''
Joomla has a great built in Gzip function. This will compress your site before it is sent out, making the site load even faster! Login to the back-end and go to Site>>Global Configuration>>Server. There will be a parameter named GZIP Page Compression. Make sure the button is set to "yes".

{{Jdocs|http://docs.joomla.org/Making_your_site_Search_Engine_Friendly}}
{{Nawigacja|Administrator|
  [[Logowanie się administratorów na zaplecze]]|
  [[META-DATA - informacje dla wyszukiwarek]]|
}}
<noinclude>
[[Kategoria:Optymalizacja]]
[[Kategoria:Administratorzy]]
[[Kategoria:Nowicjusze]]
[[Kategoria:Projektanci]]
[[Kategoria:Optymalizacja pod kątem wyszukiwarek]][[Kategoria:Proste adresy internetowe]]
</noinclude>