--=REKLAMA=--

Optymalizacja witryny pod kątem wyszukiwarek internetowych

Z Joomla!WikiPL

Wersja Zwiastun (dyskusja | edycje) z dnia 03:58, 16 lis 2013

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)

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.

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.

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 → Szablony → [szablon] → 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 <div id="wrapper">:

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

Ta linia dodaje pojemnik na poziome menu. Przejdź teraz do edytora CSS i dodaj gdzieś pod koniec pliku poniższy kod:

#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;
}

Zrobione! Wyjaśnijmy działanie. Element #top_nav przechowuje wszystkie style pojemnika dodanego w pliku HTML. Zastąp tylko linię background:(your background image here) wpisem z adresem URL oraz innymi własnościami stylu. Składnia jest następująca:

background:url(../images/bar_background.png) repeat-x;

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.

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

.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;
}

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.

Opublikuj moduły Masz kod, co teraz? Teraz trzeba po prostu skonfigurować moduły. Przejdź na strone Rozszerzenia → 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ł.

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:

<?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);
}
?>

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".

© Ten materiał jest dokładnym albo swobodnym tłumaczeniem artykułu http://docs.joomla.org/Making_your_site_Search_Engine_Friendly udostępnionego na licencji JEDL na witrynie: Joomla! Official Documentation Wiki

Dziękujemy za wkład

» Stefan Wajda [zwiastun],