JustPaste.it

Podstawowe uwagi na temat optymalnego kodu html.

Podstawowa zasada to przejrzystość kodu i minimalizm.
Struktura kodu:

Podstawowa zasada to przejrzystość kodu i minimalizm. Możliwie jak najmniej tabelek. Formatowania elementów umieszczone w całości w clasach. Unikać wstawniania sztywnych styli (style="..."). Jeśli to możliwe nie stosować podówjego formatowania (class="..." align="..." niech wszystko będzie zawarte w klasie).

Wszędzie gdzie to możliwe nie stosować znaku "_" zamiast niego lepiej wstawiać "-". O tym była już mowa odnosnie symboli linków w edito. Ale to nie wszystko. Ta zasada tyczy się wszelkich innych tekstów, nazw, symboli (nazwy plików, nazwy ID, name, alt, title, klasy, itd.)

    przykład
        zły
<img height="9" src="images/obrazki_page/arrow_orange_small.gif" width="8" align="middle" alt="############" /></td>
        dobry
<img src="images/obrazki_page/arrow_orange_small.gif" height="9" width="8" align="middle" alt="############" /></td>

//Wazna kolejnosc! <img src="sciezka" class="" ewentualne inne formatowanie alt="koniecznie!" />

    przykład
        zły
<td width="6%" class="link_small" align="left">
        dobry
<td class="link_small"> //wyrównanie i szerokość zawarte w klasie o zmienionej nazwie)

    przykład
        zły
<a class="stopka_start" href='' style="display: block; float: right; padding-right: 2px;">
        dobry
<a href='' class="stopka-start">


Znaczniki <H1>, <H2>, <H3>
Zdecydowanie nie stosować tych znaczników do formatowania elementów graficznych. Nie jest to błąd ale traci można je znacznie lepiej wykorzystać. Tekst objęty znacznikiem <H1> to treść serwisu o największej wadze. Słowa kluczowe w nim zawarte mają największy priorytet dla robotów. Nie wskazane jest również przesadzanie z ilością tych elementów.

Optymalna ilość:
<H1> użyty jeden raz dla podstrony
<H2> i <H3> (np. tytuly aktualności, podtytuły stron) zależnie od ilości tekstu

Formatowanie
Znaczniki te mają swoje standardowe parametry. Zmienianie ich nie jest zabronione, ale należy się trzymać pewnych reguł. Jeśli formatujemy jakikolwiek znacznik H wielkość czcionki nie może być mniejsza od tekstu standardowego, analogicznie tekst w <H1> nie może być mniejszy niż w <H2>. Przykład właściwie użytego znacznika <H1> http://www.link7.pl/ " Darmowe linki..." //prosze nie zwracać uwagi na grafike:)//

Linki:

Częściowo było o tym wcześniej. Własciwe formatowanie <a sciezka klasa tytul target reszta> koniecznie tytul. Nawet ten sam tekst co anchor. <a href="" title="anchor">anchor</a> to w przypadku linków tekstwych. W przypadku linków graficznych ten znacznik jest jeszcze bardziej istotny, bo w przypadku duzego nasycenia grafiką anchor tekst stanowi treść strony w której powinny znaleźć się słowa kluczowe. Jeśli linkiem jest img to nazelzy wstawic zarówno tytuł jak i alt.

Bezwzględnie każda podstrona serwisu powinna zawierać link do strony głównej. Zazwyczaj jest to logo, ale dobrze by był również w stopce link tekstowy (oczwiście ze słowem kluczowym o ile nie jest to zbyt rażące).

Mapa serwisu. Ważne! Co prawda nie zawiera luźnego tekstu, ale w znacznym stopniu poprawia nawigację robotom wyszukiwarek i tym samym przyspiesza indeksowanie. Wpływa to pozytywnie na częstotliwość odwiedzin robotów, przez to ułatwia wyłapywanie zmian na stronie (o ile takie są), a to jako jeden z niewielu czynników wpływa poztywnie zarówno na pozycję i PR. Poprawa pozycji=więcej wejść, wysoki PR=wyższa cena linków sponsorowanych:)

Stopka jest jednym z najmniej widocznych elementów strony, ale  linki w niej są bardzo istotne i warto umieścić kilka do najczęściej aktualizowanych kategorii.
Dla przykładu jeden z portali budowlanych ma w swojej stopce taki kod:

<!-- / bot_links -->
                <div class="bot_links">
                    <ul class="c2">
                        <li><a href=''>############</a></li>
                        <li><a href=''>############</a></li>

                        <li><a href=''>############</a></li>
                        <li><a href=''>############</a></li>
                        <li><a href=''>############</a></li>
                        <li><a href=''>############</a></li>
                        <li><a href=''>############</a></li>
                        <li><a href=''>############</a></li>

                    </ul>
                    <br class="clearing" />
                </div>
                <br class="clearing" />
<!-- / bot_links -->


nawet napisali dla kogo są te linki:)
Tak na marginesie - komentarze to nie jest tekst którego roboty nie widzą.

Banerki prowadzące do podstron serwisu są dość częstym zabiegiem podnoszącym walory estetyczne, ale w menu jest już link do tej samej podstron więc dobrze do linku (baner) dodac rel="nofollow".

Menu z obrazków. Wysoce niewskazane.

Załączniki:

Szczególnie istotne są nazwy plików pdf. Dobrze jeśli w nazwie pliku jest słowo kluczowe. Roboty indeksują nie tylko nazwę ale i zawartość.

Jeśli gdzieś w serwisie pojawiają się linki "na sztywno" to wpisywać z www, albo przynajmniej wszystkie tak samo. Jak ognia unikać linków z i bez www.


CMS system Edito - najbardziej optymalny kod | Intranet - aplikacje internetowe Ideo