HTML do SEO - zbiór praktycznych wskazówek i przepisów - blog Igor Kalmykov

  1. Małe wprowadzenie
  2. Ważne znaczniki SEO
  3. Nagłówki w tekście
  4. Zwykły tekst
  5. Atrybuty obrazu
  6. Linki
  7. Linki wewnętrzne i zewnętrzne
  8. Linki w nagłówkach

Wiele napisano o SEO (SEO - Search Engine Optimization, czyli optymalizacja strony) dla wyszukiwarek Wiele napisano o SEO (SEO - Search Engine Optimization, czyli optymalizacja strony) dla wyszukiwarek. Wiele napisano o HTML jako języku znaczników stron (HTML - Hypertext Markup Language, w języku rosyjskim - hipertekstowym języku znaczników). Istnieje również wiele sposobów korzystania z funkcji HTML do SEO, jednak pisanie wymaga znajomości składni HTML przez czytelników.

Niestety, nie wszyscy posiadają go na tyle, by zrozumieć porady „SEO-Schnick”, co oznacza znajomość HTML. Wszystko to jest całkowicie normalne, ponieważ ludzie, którzy nie należą do kohorty webmasterów, nie muszą znać ich konkretnego języka. Jednak nawet minimalne wykorzystanie tej wiedzy podczas tworzenia stron internetowych może znacznie podnieść je w wynikach wyszukiwarek.

Specyfikacja HTML sama w sobie jest dość obszerna i wielu z nich trudno było odczytać do końca. Na szczęście, jeśli weźmiemy pod uwagę tylko aspekt optymalizacji pod kątem wyszukiwarek, wystarczy zająć się mniej niż tuzinem tagów opisanych w tej specyfikacji. Pod względem objętości jest to w przybliżeniu jedno ziarno, jeśli porównamy całą specyfikację z całym workiem ziarna. W tym małym zbiorze wskazówek staramy się przyjrzeć tylko temu małemu ziarnu.

W tym małym zbiorze wskazówek staramy się przyjrzeć tylko temu małemu ziarnu

W mojej praktyce było więcej niż jeden przykład, w którym strony internetowe okazały się być w pierwszej dziesiątce Yandexu nie kosztem specjalnych sztuczek SEO, ale głównie dzięki kompetentnemu tworzeniu i porządkowaniu tekstu oraz wykorzystaniu maksimum wszystkich cech znaczników HTML.

Małe wprowadzenie

Prawdopodobnie nie wszyscy myśleli o tym, jak strony wewnętrzne są ułożone od wewnątrz, które otwieramy za każdym razem w przeglądarce podczas naszych podróży przez Internet Prawdopodobnie nie wszyscy myśleli o tym, jak strony wewnętrzne są ułożone od wewnątrz, które otwieramy za każdym razem w przeglądarce podczas naszych podróży przez Internet. Są one w ogólności uporządkowane, w każdym razie, w momencie, gdy przeglądarka ładuje je w gotowej formie. W rzeczywistości każda strona HTML jest zwykłym plikiem tekstowym i niczym więcej. Ale w tym momencie kończy się jego prostota. Samo słowo „hipertekst” oznacza obecność pewnych dodatkowych informacji w treści tekstowej, co powinno skłonić przeglądarkę do dokładnego wyświetlenia tekstu, obrazów i innych elementów w nich zawartych oraz gdzie je uzyskać, jeśli nie są tekstem. Wszystkie te „wskazówki” są ozdobione za pomocą specjalnych znaków tekstowych - znaczników znaczników hipertekstowych. Innymi słowy, te znaczniki znaczników html umożliwiają zdefiniowanie struktury wszystkich elementów strony i upewnienie się, że są one poprawnie wyświetlane w przyszłości.

Wizualnie znaczniki te pojawiają się w nawiasach ramkowych tworzących kombinację liter, na przykład znacznik < h 1> pochodzi od nagłówka słowa (w tym przypadku nagłówka pierwszego poziomu) lub < p > - od słowa p aragraph (akapit). Tutaj zbadamy tylko te znaczniki, które są najważniejsze z punktu widzenia możliwości ich wykorzystania do optymalizacji strony przez wyszukiwarkę.

Ważne znaczniki SEO

Sekcja nagłówków stron

Sekcja nagłówka strony znajduje się między znacznikami < head > ... </ head > na samym początku. To, co znajduje się w tej sekcji, zazwyczaj nie jest widoczne wizualnie, ale jest bardzo ważne. Spójrzmy na to, co ważne, przede wszystkim na SEO. W przypadku korzystania z CMS (Content Management System - system zarządzania treścią) do zarządzania witryną, zawartość tej sekcji można edytować za pomocą dedykowanych pól, zwykle dostarczanych przez poszczególne moduły (na przykład w WordPress jest to moduł All in One SEO Pack i inne, i w Drupal - moduły Nodewords (D6), Metatagi (D7) i inne.

  1. <title > ... </ title > - pomiędzy tymi tagami znajduje się tytuł strony, ale nie ten, który widzimy na samej stronie, ale „usługa”, widoczna na przykład w linii statusu przeglądarki, a jednocześnie bardzo czytelna dla wyszukiwarek. Dlatego w tym tytule wielu próbuje umieścić jak najwięcej słów kluczowych odzwierciedlających znaczenie treści na stronie. Jak się okazało, jest wiele subtelności w wypełnianiu tego tagu, o którym można przeczytać, na przykład w witrynie devaka.ru.
  2. Metatag opisujący treść strony:
    <meta name = ” description ” content = ” Powinien być krótki opis zawartości strony, z której wyszukiwarki bardzo chętnie korzystają ” />
  3. Metatag z listą słów kluczowych i / lub fraz:
    <meta name = ” keywords ” content = ” Tutaj piszemy rozdzieloną przecinkami listę słów kluczowych i użytych fraz, które odnoszą się do treści strony ” />

W rezultacie ta część nagłówka strony może wyglądać tak w kodzie strony (w kodzie usunięto fragmenty instrukcji ładowania arkuszy stylów, JavaScript itp.):

<head>

<title> Tworzenie N-stron w mieście - StudioDesignSuper -Puperstudio </ title>

...

<meta name = "description" content = "Studio projektowe w mieście N: tworzenie stron internetowych, tworzenie stron internetowych, projektowanie stron internetowych, obsługa stron internetowych, promocja, projektowanie graficzne, rozwój tożsamości korporacyjnej." />

<meta name = "słowa kluczowe" content = "tworzenie stron internetowych w mieście N, projektowanie w mieście N, strona internetowa miasta N, utrzymanie strony internetowej, promocja strony internetowej, programowanie stron internetowych" />

...

</ head>

Bardzo ważne jest wymyślenie i poprawne zapisanie treści znacznika opisu . Praktyka pokazuje, że wyszukiwarki bardzo często wolą wyświetlać fragmenty (z fragmentu angielskiego - fragment, część, fragment) - część tekstu do 150 znaków, którą wyszuka wyszukiwarka wraz z linkiem do strony w wynikach, znaleziony opis w tym tagu. W przypadku jego nieobecności (a czasem nawet z opisem) każdy fragment tekstu zawierający słowa kluczowe można wyciągnąć jako fragment. Dlatego też bardzo pożądane jest nie tylko krótkie i jasne opisanie w treści treści strony, ale także użycie w tym opisie słów kluczowych, których promocja jest przeznaczona dla tej strony.

Nagłówki w tekście

Tekst strony powinien wykorzystywać „poprawne” nagłówki, aby pomóc czytelnikowi i wyszukiwarkom szybko „uchwycić” strukturę dokumentu i znaczenie następujących po nim sekcji. Dobrze jest, jeśli słowa kluczowe użyte w <title> ... </ title> pojawią się w nagłówkach sekcji na stronie.

Aby zdefiniować nagłówki, znaczniki to < h 1> ... </ h 1> , < h 2> ... </ h 2> , < h 3> ... </ h 3> itd., Gdzie litera h pochodzi od nagłówka słowa (nagłówek), a liczba oznacza poziom kursu - im większa liczba, tym niższy poziom.

Zwykły tekst

Główny tekst jest zazwyczaj podzielony na akapity. Aby to zrobić, użyj znacznika < p > ... </ p > . Z reguły używane są wcięcia akapitów, które ułatwiają czytelnikowi czytanie tekstu. Z kolei robotom wyszukującym łatwiej jest analizować tekst, gdy zostanie on podzielony na pewne fragmenty semantyczne.

Słowa kluczowe użyte w tekście są pogrubione przy użyciu tagu <strong> ... </ strong> lub kursywą przy użyciu znacznika < kursywa > ... </ kursywa > . To nie tylko ułatwia czytelnikowi zrozumienie znaczenia materiału, ale także daje podpowiedź robotom wyszukującym dokładnie, o którym temacie znajduje się tekst strony.

Atrybuty obrazu

Na początek warto pamiętać, że wszystkie obrazy są plikami binarnymi przechowywanymi na serwerze oddzielnie od naszej strony i są na niej wyświetlane tylko dlatego, że kod strony zawiera specjalny znacznik, który jest postrzegany przez przeglądarkę jako polecenie pobrania pliku graficznego z określonego adresu i wyświetlenia jest we właściwym miejscu i przy pewnych parametrach. Ten tag ma następującą strukturę:

<img src = ”[Ścieżka do pliku obrazu] / [Nazwa pliku z obrazem]” alt = ”...” />

Skróty img oznaczają obraz (obraz), src - źródło (źródło) i alt - alternatywę (alternatywnie. W tym przypadku jest to tekst, który powinien być wyświetlany na stronie, jeśli nie można wyświetlić obrazu). Możliwości wprowadzania informacji znajdują się tutaj w tagach src i alt :

  1. Jako nazwa pliku bardzo pożądane jest nie używanie obrazu jpg lub zdjęcia -1.jpg , ale zawsze , gdy to możliwe, jako znaczących słów, na przykład, foto -bolshogo -divana- baron .jpg lub stol -derevyannyi -razmer -80x 85.jpg (rosyjski nazwy zapisane w transliteracji) .
  2. Krótki, ale pouczający opis obrazu w obrazie przy użyciu słów kluczowych powinien zostać umieszczony w tym atrybucie, roboty wyszukiwania będą musiały je indeksować. Jeśli nie możesz w ogóle nic wymyślić, umieść co najmniej pusty atrybut alt = "", jego obecność jest tutaj koniecznie nawet bez zawartości.

Linki

Jest to chyba najbardziej znany i zrozumiały atrybut strony, bez którego nie byłoby żadnych witryn ani Internetu, jednak jest wiele subtelności w ich użyciu. Oto struktura kodu łącza:

<a href = ”[Adres page]” title = ”Opis linków”> Link tekstowy </ a>

Tutaj, odpowiednio, a - kotwica (kotwica), href - hiperłącze (hiperłącze) i tytuł (tytuł) - tytuł, podpowiedź dla linku. Zamiast tekstu łącza może znajdować się obrazek.

Cóż, kiedy nazwa strony w linku jest znaczącym słowem lub frazą, w której słowa są rozdzielone myślnikiem. Często CMS ma możliwość automatycznego generowania tych nazw poprzez transliterację nagłówków stron, ale nic nie stoi na przeszkodzie, aby to zrobić ręcznie lub automatycznie poprawić wynik.

Tekst linku jest również bardzo pożądany, aby nadać mu sens, dodać do niego słowa kluczowe lub wyrażenia, które następnie można znaleźć za pomocą wyszukiwarki na stronie, na którą wskazuje ten link.

Wiele osób zapomina wypełnić atrybut title = "..." w tagu linku. W rzeczywistości ten atrybut nie tylko ułatwia życie odwiedzającym witrynę, pokazując bardziej szczegółowy opis zawartości strony adresowanej do wskaźnika myszy podczas umieszczania kursora nad linkiem myszy, ale także umożliwia dodanie dodatkowych słów kluczowych do tej podpowiedzi, która wyglądałaby na zbędną i nieodpowiednią w widoku. linki tekstowe strony.

Linki wewnętrzne i zewnętrzne

Wyszukiwarki „szanują” witryny pod kątem linków wewnętrznych (linki do innych stron własnej witryny) i odwrotnie - nie faworyzują witryn zewnętrznych, zwłaszcza jeśli jest ich dużo. Ma to swoją własną logikę: im więcej linków wewnętrznych na stronie, tym większe prawdopodobieństwo, że informacje na stronie są wystarczająco kompletne, dobrze zorganizowane, a zatem przydatne dla użytkowników. Ponadto obecność dobrze umieszczonych linków wewnętrznych stymuluje odwiedzających witrynę do poruszania się po nich, te kliknięcia śledzą wyszukiwarki i odpowiednio dostosowują ocenę witryny: im więcej kliknięć, tym większe prawdopodobieństwo, że witryna może naprawdę dostarczyć cennych informacji odwiedzającym.

I odwrotnie, im więcej linków zewnętrznych na stronie, tym bardziej, zgodnie z wyszukiwarką, staje się podobny do innego śmieciowego katalogu linków, które są w Internecie bez niego.

Dlatego w przypadku korzystania z linków zewnętrznych, jeśli nie są to oczywiście linki do witryn znajomych lub partnerów, zaleca się użycie jednego atrybutu wskazującego, że robot wyszukiwania nie powinien zwracać uwagi na łącze i nie próbować poruszać się po nim: rel = ” nofollow („ no follow ”- przetłumaczone z angielskiego jako„ nie podążaj za mną ”). Teraz ten atrybut jest rozumiany przez Google i Yandex.

Na przykład kod dwóch łączy - wewnętrznych i zewnętrznych:

Wewnętrzny:

<a title = "Więcej o firmie ..." href = "/about-us"> O nas </a>

(zwróć uwagę, że adres nie jest bezwzględny, ale względny, z katalogu głównego witryny, który jest oznaczony przez „/”)

I zewnętrzne:

<a href = "http://mail.yandex.ru/" rel = "nofollow"> Poczta Yandex </a>

Jeśli na stronie jest wiele linków zewnętrznych, możesz zamknąć odpowiedni blok w tagach < noindex > ... </ noindex > lub „poinstruować” wyszukiwarki, aby w ogóle nie indeksowały go w pliku robots.txt.

Linki w nagłówkach

Czasami używaj linków wewnątrz nagłówków. Często sam CMS, tworząc listę krótkich komunikatów materiałowych, korzysta z linków wewnątrz nagłówków. Zwiększa to odpowiednio wagę tekstu, który zawierają. Należy pamiętać, że kod łącza powinien być umieszczony w kodzie tagu tytułu, a nie odwrotnie. Poniżej znajduje się przykład takiego linku:

<h2> <a title = "Facebook social network (Facebook) uruchamia funkcję Timeline na całym świecie."

href = "/ it-news / 111216-4"> Facebook rozpoczął uruchamianie funkcji osi czasu na całym świecie </ a> </ h2>

Nietrudno zgadnąć, że dla pomyślnej promocji Twojej strony, samo użycie odpowiednich możliwości HTML nie wystarczy, jest wiele innych ważnych aspektów Nietrudno zgadnąć, że dla pomyślnej promocji Twojej strony, samo użycie odpowiednich możliwości HTML nie wystarczy, jest wiele innych ważnych aspektów. W celu sprawnego wejścia w temat mogę polecić kilka linków:

  1. SEO: Search Engine Optimization od A do Z ” to systematyczny podręcznik, podręcznik i encyklopedia jednocześnie kompilowane przez moderatora forum w oparciu o analizę ponad 50 najlepszych blogów SEO i wybór najbardziej przydatnych (z mojego punktu widzenia) artykułów (ponad 200) dla optymalizatorów. Można tam również znaleźć listę linków do blogów autorów - ćwiczących i odnoszących sukcesy optymalizatorów SEO, w których można znaleźć wiele przydatnych i przydatnych.
    http://www.sbup.com/seo-forum/poiskovaya_optimizaciya_v_obshih_chertah/seo_poiskovaya_optimizaciya_ot_a_do_ya/
  2. SEO News to świetna strona ze stale pojawiającymi się nowymi i przydatnymi materiałami. Polecam subskrybować ich twitterową taśmę.
    http://www.seonews.ru/
  3. Ogromna ilość innych zasobów na ten temat ...

* * *

Jeśli chodzi o rozwój HTML, świat nie stoi w miejscu. W tej dziedzinie można powiedzieć, że ma miejsce prawdziwa rewolucja i programiści stron internetowych stopniowo zaczynają przechodzić na standard HTML5, którego obsługa pojawiła się w większości nowoczesnych przeglądarek. Oprócz różnego rodzaju efektów wizualnych i ogromnej liczby nowych funkcji, w piątej wersji standardu dodano wiele nowych znaczników do znaczników semantycznych dokumentów internetowych, ale ten temat dotyczy następnej historii.

PS Ten post został napisany w 2012 roku i wcześniej był słyszany jako e-książki w formacie pdf . Teraz dostępny w formacie HTML.

Podobny