HTML для SEO - зборнік практычных саветаў і рэцэптаў - Блог Ігара Калмыкова

  1. невялікае ўступленне
  2. Важныя для SEO тэгі
  3. Загалоўкі ў тэксце
  4. звычайны тэкст
  5. атрыбуты малюнкаў
  6. спасылкі
  7. Унутраныя і знешнія спасылкі
  8. Спасылкі ў загалоўках

Шмат ужо напісана пра SEO (SEO - Search Engine Optimization, або аптымізацыя (сайта) для пошукавых сістэм), шмат напісана і пра HTML як мова разметкі старонак (HTML - Hypertext Markup Language, па-руску - мова гіпертэкставай разметкі) Шмат ужо напісана пра SEO (SEO - Search Engine Optimization, або аптымізацыя (сайта) для пошукавых сістэм), шмат напісана і пра HTML як мова разметкі старонак (HTML - Hypertext Markup Language, па-руску - мова гіпертэкставай разметкі). Нямала ёсць і пра тое, як выкарыстоўваць магчымасці HTML для SEO, аднак напісанае на ўвазе веданне ситаксиса HTML чытачамі.

Нажаль, далёка не ўсе валодаюць ім у дастатковай ступені, каб зразумець парады «СЕО-шнікаў», які прадугледжвае веданне HTML. Усё гэта цалкам нармальна, бо людзям, якія не ўваходзяць у кагорта вэб-майстроў, зусім не абавязкова ведаць іх спецыфічны мову. Аднак нават мінімальнае выкарыстанне гэтых ведаў пры стварэнні вэб-старонак здольна вельмі нават прыкметна прыпадняць іх у выніках выдачы пошукавых сістэм.

Сама па сабе спецыфікацыя па мове HTML вельмі шырокая і наўрад ці была прачытана да канца многімі. На шчасце, калі браць толькі аспект пошукавай аптымізацыі, цалкам дастаткова будзе разабрацца з менш чым дзясяткам тэгаў, апісаных у гэтай спецыфікацыі. Па аб'ёме гэта прыкладна як адно зярнятка, калі параўнаць ўсю спецыфікацыю з цэлым мяшком збожжа. У гэтым невялікім зборніку саветаў мы якраз і паспрабуем разгледзець бліжэй толькі гэта адно маленькае зярнятка.

У гэтым невялікім зборніку саветаў мы якраз і паспрабуем разгледзець бліжэй толькі гэта адно маленькае зярнятка

У маёй практыцы быў не адзін прыклад, калі сайты аказваліся ў TOP 10 Яндэкса не за кошт якіх-небудзь адмысловых SEO-хітрыкаў, а шмат у чым дзякуючы пісьменнаму складанні і структуравання тэксту і выкарыстанне па максімуме ўсіх магчымасцяў HTML-разметкі.

невялікае ўступленне

Магчыма, не ўсе задумваліся пра тое, як уладкованыя знутры старонкі сайтаў, якія мы кожны раз адкрываем ў браўзэры падчас сваіх падарожжаў па прасторах Інтэрнэт Магчыма, не ўсе задумваліся пра тое, як уладкованыя знутры старонкі сайтаў, якія мы кожны раз адкрываем ў браўзэры падчас сваіх падарожжаў па прасторах Інтэрнэт. Ўладкованыя яны, увогуле-то, проста, ва ўсякім разе, у той момант, калі іх ужо ў гатовым выглядзе загружае да сябе браўзэр. Па сутнасці справы, любая HTML-старонка - гэта звычайны тэкставы файл і нічога больш. Але на гэтым яе прастата, нажаль, сканчаецца. Ужо само слова «гіпертэксту» мае на ўвазе наяўнасць нейкай дадатковай інфармацыі сярод тэкставага зместу, якая павінна падказаць браўзэру, як менавіта адлюстроўваць які змяшчаецца ў іх тэкст, малюнкі і іншыя элементы і дзе іх узяць, калі яны не з'яўляюцца тэкстам. Усе гэтыя «падказкі» аформленыя з дапамогай спецыяльных тэкставых сімвалаў - тэгаў гіпертэкставай разметкі. Іншымі словамі, гэтыя тэгі html-разметкі дазваляюць вызначыць структуру ўсіх элементаў старонкі і забяспечыць у далейшым іх правільнае адлюстраванне на ёй.

Візуальна гэтыя тэгі выглядаюць у выглядзе дужак, якія атачаюць тое ці іншае літарнае спалучэнне, напрыклад, тэг <h 1> адбыўся ад слова header (загаловак 1-га ўзроўню ў дадзеным выпадку) або <p> - ад слова p aragraph (параграф). Тут мы разбяром толькі тыя тэгі, якія найбольш важныя з пункту гледжання магчымасці іх выкарыстання для пошукавай аптымізацыі старонкі.

Важныя для SEO тэгі

Раздзел загалоўкаў старонкі

Раздзел загалоўкаў старонкі размяшчаецца паміж тэгамі <head> ... </ head> у самым яе пачатку. Тое, што размешчана ўнутры гэтага падзелу, звычайна не відаць візуальна, аднак мае вельмі вялікае значэнне. Разбяром тое, што важна, перш за ўсё, для SEO. У выпадку выкарыстання CMS (Content Management System - сістэма кіравання кантэнтам) для кіравання сайтам змесціва гэтага падзелу даступна для рэдагавання праз спецыяльна выдзеленыя поля, якія прадстаўляюцца, як правіла, асобнымі модулямі (напрыклад, у WordPress гэта модуль All in One SEO Pack і іншыя, а у Drupal - модулі Nodewords (D6), Metatags (D7) і іншыя).

  1. <title> ... </ title> - паміж гэтымі тэгамі размяшчаецца загаловак старонкі, але не той, які мы бачым на самай старонцы, а «службовы», бачны, напрыклад, у статуснай радку браўзэра, і пры гэтым вельмі ахвотна чытаны пошукавымі сістэмамі. Менавіта таму ў гэты загаловак шматлікія імкнуцца змясціць як мага больш ключавых слоў, якія адлюстроўваюць сэнс змесціва на старонцы. Як аказалася, у запаўненні гэтага тэга ёсць шмат тонкасцяў, пра якія можна прачытаць, напрыклад, на сайце devaka.ru.
  2. Мета-тэг з апісаннем змесціва старонкі:
    <meta name = "description" content = "Тут павінна быць кароткае апісанне змесціва старонкі, якое вельмі ахвотна выкарыстоўваюць пашукавікі" />
  3. Мета-тэг са спісам ключавых слоў і / або фраз:
    <meta name = "keywords" content = "Тут пішам праз коску спіс ключавых слоў і фраз, якія выкарыстоўваюцца і якія маюць дачыненне да змесціва старонкі" />

У выніку гэтая частка ў загалоўку старонкі можа выглядаць у кодзе старонкі такім чынам (у кодзе выдаленыя фрагменты інструкцый для загрузкі табліц стыляў, JavaScript і г.д.):

<Head>

<Title> Созданиесайтоввгороде N-СтудияДизайнаСупер -пуперстудия </ title>

...

<Meta name = "description" content = "Дызайн-студыя ў горадзе N: стварэнне сайтаў, распрацоўка сайтаў, вэб-дызайн, падтрымка вэб-сайтаў, прасоўванне, графічны дызайн, распрацоўка фірмовага стылю." />

<Meta name = "keywords" content = "стварэнне сайтаў у горадзе N, дызайн у горадзе N, сайт горад N, абслугоўванне сайтаў, прасоўванне сайтаў, праграмаванне сайтаў" />

...

</ Head>

Вельмі важна прыдумаць і правільна напісаць змесціва для тэга description. Практыка паказвае, што пошукавікі вельмі часта аддаюць перавагу выводзіць у якасці сниппетов (ад ангельскага snippet - урывак, частка, кавалачак) - частка тэксту памерам да 150 знакаў, якую пошукавая сістэма выдае разам са спасылкай на вэб-сайт у выніках выдачы, апісанне, знойдзенае менавіта у гэтым тэгу. У выпадку яго адсутнасці (а часам нават пры запоўненым апісанні), у якасці сниппета можа быць выдраць любы фрагмент тэксту, які змяшчае ключавыя словы. Таму вельмі пажадана не толькі коратка і зразумела апісаць у description змесціва станіцы, але і выкарыстоўваць у гэтым апісанні тыя ключавыя словы, на прасоўванне па якіх яна разлічана дадзеная старонка.

Загалоўкі ў тэксце

У тэксце старонкі павінны выкарыстоўвацца «правільныя» загалоўкі, якія дапамагаюць чытачу і пошукавым сістэмам хутка «схапіць» структуру дакумента і сэнс якія ідуць за імі раздзелаў. Добра, калі ключавыя словы, якія выкарыстоўваюцца ўнутры <title> ... </ title>, будуць сустракацца і ў загалоўках раздзелаў на старонцы.

Для вызначэння загалоўкаў выкарыстоўваюцца тэгі <h 1> ... </ h 1>, <h 2> ... </ h 2>, <h 3> ... </ h 3> і г.д., дзе літара h адбылася ад слова header (загаловак), а лічба азначае ўзровень загалоўка - чым больш лічба, тым ніжэй ўзровень.

звычайны тэкст

Асноўны тэкст як правіла разбіваецца на параграфы. Для гэтага выкарыстоўваецца тэг <p> ... </ p>. Як правіла, пры візуальным афармленні параграфаў выкарыстоўваюцца водступы, што палягчае ўспрыманне тэксту яго чытачом. У сваю чаргу і пошукавым робатам становіцца прасцей аналізаваць тэкст, калі ён пабіты на нейкія сэнсавыя фрагменты.

Ключавыя словы, якія выкарыстоўваюцца ў тэксце, карысна выдзяляць тоўстым шрыфтам, выкарыстоўваючы тэг <strong> ... </ strong>, або курсівам, выкарыстоўваючы тэг <italic> ... </ italic>. Гэта не толькі палягчае схопліванне сэнсу матэрыялу чытачом, але і дае падказку пошукавым робатам, які менавіта тэматыцы прысвечаны зьмест старонкі.

атрыбуты малюнкаў

Тут для пачатку карысна ўспомніць, што любыя карцінкі - гэта двайковыя файлы, якія захоўваюцца на серверы асобна ад нашай старонкі, і адлюстроўваюцца яны на ёй толькі таму, што ў кодзе старонкі прысутнічае адмысловы тэг, успрыманы браўзэрам як каманда загрузіць з пэўнага адрасу графічны файл і адлюстраваць яго ў патрэбным месцы і з пэўнымі параметрамі. Тэг гэты мае наступную структуру:

<Img src = "[Путькфайлускартинкой] / [Імя -файла -з -картинкой]" alt = "..." />

Скарачэння img значнае image (выява), src - source (крыніца) і alt - alternative (альтэрнатыва. У дадзеным выпадку гэта тэкст, які варта паказаць на старонцы пры немагчымасці адлюстраваць карцінку). Магчымасці ўнясення інфармацыі тут прысутнічаюць у тэгах src і alt:

  1. У якасці імёнаў файла вельмі пажадана выкарыстаць не image jpg або photo -1.jpg, а па магчымасці як мага больш асэнсаваныя словы, напрыклад, foto -bolshogo -divana -baron .jpg або stol -derevyannyi -razmer -80x 85.jpg (рускія назвы, напісаныя транслітам).
  2. У гэты атрыбут варта змяшчаць кароткае, але інфарматыўнае апісанне малюнка на малюнку з выкарыстаннем вашых ключавых слоў, пошукавыя робаты абавязкова яго праіндэксуюць. Калі зусім нічога не атрымалася прыдумаць, то пастаўце хоць бы пусты атрыбут alt = "", яго прысутнасць абавязкова тут нават без змесціва.

спасылкі

Гэта, бадай, самы вядомы і зразумелы атрыбут старонкі, без якога не было б ні сайтаў, ні Інтэрнэту, аднак і ў іх выкарыстанні ёсць нямала тонкасцяў. Вось як выглядае структура кода спасылкі:

<A href = "[Адрас -старонкі]" title = "Описаниессылки"> Текстссылки </ a>

Тут адпаведна a - anchor (якар), href - hyper reference (гіпер-спасылка) і title (загаловак) - загаловак, падказкі для спасылкі. Замест тэксту спасылкі можа быць і карцінка.

Добра, калі назва старонкі ў спасылцы з'яўляецца асэнсаваным словам ці фразай, у якой словы падзеленыя з дапамогай працяжнік. Часта ў CMS ёсць магчымасць аўтаматычнага фарміравання гэтых імёнаў праз транслітарацыю загалоўкаў старонкі, аднак нішто не перашкаджае зрабіць гэта ўручную або падправіць аўтаматычна атрыманы вынік.

Тэкст спасылкі таксама вельмі пажадана рабіць асэнсаваным, дадаваць у яго ключавыя словы або фразы, якія затым могуць быць знойдзеныя пошукавікам і на старонцы, на якую гэтая спасылка паказвае.

Вельмі шмат хто забывае запоўніць атрыбут title = "..." ўнутры тэга спасылкі. На самай справе гэты атрыбут не толькі палягчае жыццё наведвальніку сайта, паказваючы яму ва ўсплывальнай падказцы пры навядзенні на спасылку паказальніка мышы больш падрабязнае апісанне змесціва адрасаванай старонкі, але і дазваляе дадаць у гэтую падказку дадатковыя ключавыя словы, якія глядзеліся б залішне і недарэчна ў бачным на старонцы тэксце спасылкі.

Унутраныя і знешнія спасылкі

Пашукавікі «паважаюць» сайты за ўнутраныя спасылкі (спасылкі на іншыя старонкі ўласнага сайта) і наадварот - не даруюць за знешнія, асабліва, калі іх шмат. У гэтым ёсць свая логіка: чым больш на сайце ўнутраных спасылак, тым вышэй верагоднасць, што прадстаўленая на сайце інфармацыя дастаткова поўная, добра структураваная, а значыць і карысная карыстальнікам. Да таго ж, наяўнасць пісьменна расстаўленых ўнутраных спасылак стымулюе сайта членам да пераходаў па іх, гэтыя пераходы адсочваюць пашукавікі і адпаведна карэктуюць рэйтынг сайта: чым больш пераходаў, тым вышэй верагоднасць, што сайт сапраўды можа даць каштоўную інфармацыю сваім наведвальнікам.

І наадварот, чым больш на сайце знешніх спасылак, тым больш ён, на думку пошукавіка, становіцца падобны на чарговы смеццевы каталог спасылак, якіх і без яго ў Інтэрнэце дастаткова.

Таму, у выпадку выкарыстання знешніх спасылак, калі гэта, вядома, не спасылкі на сайты вашых сяброў ці партнёраў, рэкамендуецца выкарыстоўваць яшчэ адзін яе атрыбут, які паказвае, што пошукаваму робату ня варта звяртаць на спасылку ўвагу і не спрабаваць па ёй пераходзіць: rel = " nofollow "(« no follow »- перакладаецца з ангельскай як« ня ідзі за мной »). Зараз гэты атрыбут разумеюць як Google, так і Яндэкс.

У якасці прыкладу код двух спасылак - унутранай і знешняй:

унутраная:

<a title = "Подробнее аб кампаніі ..." href = "/about-us"> Аб нас </a>

(Звярніце ўвагу, што адрас паказаны не абсалютны, а адносны, ад кораня сайта, які пазначаецца з дапамогай «/»)

І знешняя:

<a href = "http://mail.yandex.ru/" rel = "nofollow"> Пошта Яндэкс </a>

Калі на старонцы вельмі шмат знешніх спасылак, можна адпаведны блок зачыніць у тэгі <noindex> ... </ noindex> або «даць указанне» пошукавікам яе ня індэксаваць зусім у файле robots.txt.

Спасылкі ў загалоўках

Часам выкарыстоўваюць спасылкі ўнутры загалоўкаў. Часта самі CMS, фарміруючы спіс кароткіх анонсаў матэрыялаў, выкарыстоўваюць спасылкі гэтаксама ў загалоўкаў. Гэта адпаведна павышае вага тэксту, які ў іх утрымліваецца. Пры гэтым варта памятаць, што код спасылкі варта размяшчаць ўнутры кода тэгаў загалоўка, а не наадварот. Ніжэй прыклад такой спасылкі:

<H2> <a title = "Сацыяльная сетка Фэйсбук (Facebook) запускае функцыю Timeline па ўсім свеце"

href = "/ it-news / 111216-4"> Facebook началазапускфункции Timeline повсемумиру </ a> </ h2>

Няцяжка здагадацца, што для паспяховага прасоўвання свайго сайта аднаго толькі правільнага выкарыстання магчымасцяў HTML недастаткова, ёсць нямала іншых важных аспектаў Няцяжка здагадацца, што для паспяховага прасоўвання свайго сайта аднаго толькі правільнага выкарыстання магчымасцяў HTML недастаткова, ёсць нямала іншых важных аспектаў. Для плыўнага ўваходжання ў тэму магу парэкамендаваць некалькі спасылак:

  1. «SEO: Пошукавая Аптымізацыя ад А да Я» - сістэматызаваны падручнік, даведнік і энцыклапедыя адначасова, складзены мадэратарам форуму на аснове аналізу больш чым 50 лепшых SEO блогаў і адбор самых карысных (з майго пункту гледжання) артыкулаў (больш за 200) для аптымізатараў. Там жа можна знайсці спіс спасылак на блогі аўтараў - практыкуючых і паспяховых SEO-аптымізатараў, на якіх таксама можна знайсці нямала карыснага і актуальнага.
    http://www.sbup.com/seo-forum/poiskovaya_optimizaciya_v_obshih_chertah/seo_poiskovaya_optimizaciya_ot_a_do_ya/
  2. SEO News - выдатны сайт з пастаянна якія з'яўляюцца новымі і карыснымі матэрыяламі. Рэкамендую падпісацца на іх твітэр-стужку.
    http://www.seonews.ru/
  3. Велізарная колькасць іншых рэсурсаў на гэтую тэму ...

* * *

Што ж тычыцца развіцця HTML, то і тут свет не стаіць на месцы. У гэтай галіне, можна сказаць, адбываецца сапраўдная рэвалюцыя і распрацоўшчыкі сайтаў патроху пачынаюць пераходзіць на стандарт HTML5, падтрымка якога з'явілася ўжо ў большасці сучасных браўзэрах. Акрамя разнастайных візуальных эфектаў і велізарнай колькасці новых магчымасцяў, у 5-ай версіі стандарту было дададзена нямала новых тэгаў і для семантычнай разметкі вэб-дакументаў, аднак гэта тэма ўжо для наступнай гісторыі.

PS Гэта нататка была напісана ў 2012 годзе і раней раздавалася ў выглядзе электроннай кнігі ў фармаце PDF . Цяпер даступная і ў HTML-фармаце.

падобнае