Pracując w firmie, w której SEO poświęca dużo uwagi, jeśli chcesz, nie chcesz mnie, ale musisz nauczyć się pisać strony internetowe, aby były, powiedziałbym, „SEO jest korzystne”, to znaczy, że układ ma z góry znaczny potencjał. promocja witryny. Jaki jest układ SEO i kwestie związane z semantyką, które omówię w kolejnych artykułach, a teraz porozmawiajmy o tym, jak zaczyna się ten właśnie układ SEO - o prawidłowym układzie strony.
Nie jest tajemnicą dla nikogo, że w kręgach SEO istnieje przekonanie, że im bliżej html kodu dokumentu znajdują się słowa kluczowe, tym większa jest ich waga w oczach wyszukiwarek. Zauważ, powiedziałem, „im bliżej początku kodu html”, a nie „im wyżej są na stronie”, „im bliżej górnej granicy strony”, itd.
Główna różnica polega na tym, że na stronie html słowa kluczowe powinny być umieszczone w wyraźnie oznaczonym miejscu (najczęściej jest to kolumna centralna / prawa / lewa), podczas gdy w kodzie powinny być dokładnie na początku! Już czujesz różnicę? Jeszcze nie? Potem idziemy dalej.
Załóżmy, że projektant narysował nam w przybliżeniu dwukolumnowy układ tej treści:
zoptymalizowany układ SEO
Natychmiast określ, że nagłówek nie ma na celu uwzględnienia słów kluczowych. Jeśli tak nie jest (jak na przykład w portalu http://101.ru/, gdzie słowa kluczowe znajdują się tylko w nagłówku i umieszczane na karcie), kwestia układu zoptymalizowanego pod kątem SEO znika sama. Pożądane jest również, abyśmy wcześniej znali wysokość nagłówka, która w większości przypadków jest zwykle wykonywana. Pod optymalizacją SEO w naszym układzie, główna kolumna zostanie obliczona, jak to często bywa.
Pierwszą rzeczą, która przychodzi do głowy, jest typowy schemat składu: wrapper -> header -> sidebar -> main-column -> footer, zgodnie z którym kod dokumentu html będzie wyglądał następująco:
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main- kolumna "> Słowa kluczowe są tutaj! </ div> <div id =" footer "> </ div> </ div> </ body>
Wrapper potrzebujemy tutaj, aby zachować całą strukturę i umieścić w środku. Dzięki temu nasza strona będzie zawsze skupiona na monitorze o dowolnej wielkości.
Główne pytanie dla nas brzmi: „Jak sprawić, aby blok z tekstem„ główna kolumna ”znajdował się w kodzie dokumentu HTML tak blisko, jak to możliwe, tagu <body>, a najlepiej podążać zaraz za nim?”
Nawet przy minimalnej wiedzy css, zgadnij, jak zmienić pasek boczny i główną kolumnę w niektórych miejscach. Używamy do tego modelu pływającego i właściwości float. Aby to zrobić, zmieniamy główne kolumny i miejsca na pasku bocznym w kodzie dokumentu.
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "header"> </ div> <div id = "main-column"> Słowa kluczowe są tutaj! </ Div> <div id = "sidebar"> </ div> <div id = "footer"> </ div> </ div> </ body>
Lista css w tym przypadku będzie następująca:
1 2 3 #wrapper {margin: 0 auto; szerokość: 1000px; } # main-column {width: 700px; float: dobrze; } #sidebar {width: 300px; float: left; }
Dzięki własności „float” osiągnęliśmy to, że podnieśliśmy nasz blok o słowa kluczowe o jeden krok bliżej do <body>, co nie jest złe i jest minimalnym wykorzystaniem układu SEO . Jednocześnie jego wizualna lokalizacja na stronie nie uległa zmianie.
Ale nie zatrzymujmy się na małym i kontynuujmy. Na tym etapie nasze pytanie brzmi: „Jak zrobić, że główna kolumna nadal będzie pierwszą w kodzie po <body>.
To tutaj przychodzi nam na myśl inna wielka właściwość zwana pozycją: absolut.
Idea jest następująca : tworzymy wrapper względny (pozycja: względna), tak że wszystkie potomne elementy pozycjonowane absolutnie (pozycja: bezwzględna) są pozycjonowane względem swojej pozycji. Nagłówek jest również umieszczany w dowolnym miejscu w kodzie, a my ustawiamy go w absolutnym położeniu, dzięki czemu zostanie przybity do lewego górnego rogu opakowania. W przypadku opakowania określamy wewnętrzne górne wcięcie równe wysokości nagłówka. Nagłówek umieszczony w naszej liście przed stopką, ponieważ Dla użytkownika ważniejsze jest wyświetlanie elementów nagłówka na stronie tak szybko, jak to możliwe, a nie stopka. Nie dotykamy reszty listy, w wyniku czego otrzymujemy: wrapper -> main-column -> sidebar -> header -> footer.
W tym przykładzie wykonania nagłówek można w zasadzie wstawić w dowolne miejsce - w tym. a nawet między główną kolumną a bocznym paskiem, ponieważ w każdym przypadku jest on umieszczony z lewego górnego rogu opakowania. Dlatego, jeśli jest pożądane, aby załadować nagłówek bezpośrednio po głównej kolumnie, a dopiero potem pasek boczny i wszystko inne, możesz to zrobić.
Jeśli stopka jest zaprojektowana na 100% szerokości ciała, a opakowanie ma stałą szerokość, stopka zawsze może zostać usunięta z jej granic.
Lista wersji ostatecznej:
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "main-column"> Słowa kluczowe są tutaj! </ Div> <div id = "sidebar"> </ div> <div id = "header"> </ div> <div id = "footer"> </ div> </ div> </ body>
Ostatnie css:
1 2 3 4 5 #wrapper {margin: 0 auto; szerokość: 1000px; pozycja: względna; padding-top: 100px; } # main-column {width: 700px; float: dobrze; tło: # a5f0e6; dopełnienie: 40px 0; } #sidebar {width: 300px; float: left; tło: # d1e5f1; dopełnienie: 40px 0; } #header {position: absolute; po lewej: 0; top: 0; wysokość: 100px; tło: # b0e8f4; } #footer {background: # b0e8f4; dopełnienie: 40px 0; }
Dzięki układowi SEO osiągnęliśmy, że w naszym kodzie nasze bloki idą w parze z numeracją na rysunku i nie zauważyły żadnej zmiany wizualnej strony html:
Układ SEO
Sprawdzone: IE6 / 7, FF3, Safari3, Chrome.
Podsumowujemy zalety tej metody:
- Możliwy bonus SEO od wyszukiwarek.
- Wygodna sekwencja ładowania dla użytkownika: użytkownik z reguły zwraca uwagę na nagłówek, co do zasady, tylko kilka razy, dopóki się nie nauczy. Ponadto 99% uwagi skupia się wokół głównej kolumny, dlatego też po przejściu do następnej strony właściwe jest wyświetlenie użytkownikowi przede wszystkim kolumny głównej, bez opóźniania go przed załadowaniem nagłówka, paska bocznego i innych rzeczy ... Ten układ to właśnie robi. Przykład, który możesz zobaczyć na tym blogu.
- Elastyczność: nagłówek można umieścić po niemal każdym bloku strony wewnątrz opakowania, to znaczy możemy zarządzać kolejnością ładowania bloków na stronie. Jeśli stopka ma 100%, a opakowanie ma ustaloną szerokość, może zostać wyjęte z opakowania. To samo dotyczy nagłówka. Po prostu wyjmując go z opakowania, stracimy możliwość umieszczenia go między blokami wewnątrz opakowania, aw każdym razie nagłówek będzie musiał zostać załadowany ostatnim blokiem na stronie, ale ogólnie jest to uzasadnione poświęcenie.
http://blogto4ka.ru
Polecam również czytanie
Już czujesz różnicę?Jeszcze nie?
Główne pytanie dla nas brzmi: „Jak sprawić, aby blok z tekstem„ główna kolumna ”znajdował się w kodzie dokumentu HTML tak blisko, jak to możliwe, tagu <body>, a najlepiej podążać zaraz za nim?
