Back to site

Поўнае кіраўніцтва па семантычнай разметкі вэб-блогаў

Можна падумаць, што ў выніку з адкрытым зыходным кодам практыкі ў галіне развіцця, блог архітэктуры будзе даволі блізкая да дасканаласці ў такіх сферах, як вэб-стандарты і максімальнае ўздзеянне SEO.

Вы былі б няправыя.

Неверагодна, але амаль у кожным WordPress, MovableType, TypePad ці тэму, якую я сутыкнуўся ў мінулым годзе не атрымоўваецца просты тэст, па-сапраўднаму семантычных (і Google рэкамендуецца) XHTML разметкі. Зараз, я буду першым, каб прызнаць, што гэтыя няўдачы зусім не фатальныя недахопы. У той жа час, аднак, я знаходжу гэта вельмі трывожна, што саступае структуры разметкі, якая склалася ў асобе абсалютна правільны спосаб рабіць рэчы.

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

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

Правільная структура XHTML для блогаў і для Google!

Адзін ключавы прынцып кіруе разметкі на кожнай старонцы вашага сайта:

Ваша мэта складаецца ў апісанні кожнай старонкі пошукавых сістэм з дапамогай іерархічнай тэгі XHTML (<title>, <h1>, <h2>, <h3> і г.д.) і прадставіць іх у лагічнай, асэнсаванай парадку.

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

Semantic XHTML image guide

Малюнак 1. Мы збіраемся, каб пакрыць гэтыя 5 абласцей семантычнага XHTML разметкі.

1. Назва старонкі правільны шлях!

Старонка назвы найважнейшым сувязным звяном паміж чыстай SEO і ваша чалавечае чытачоў. Хоць іх відавочным уплыў на старонках вашага сайта можа здацца мінімальным, іх праўдзівае ўплыў на пошукавыя сістэмы не выклікае сумненняў. Як вы можаце бачыць на малюначку ніжэй, Google здабывае змесціва вашага <title> тэгі і спасылкі яго ў якасці найбольш вядомых частка інфармацыі па выніках пошуку.

Search engine results page

Малюнак 2. Вашы тэгі <title> падаюцца ў пошукавай выдачы, так што вам лепш зрабіць іх злічыць!

Although some WordPress themes handle page titles gracefully, many are constructed in a way that doesn’t make sense when viewed within the context of the SERPs. For instance, the highly ubiquitous Kubrick theme, which comes pre-installed with WordPress, has page titles that are constructed like so:

Назва блога »Паведамленне тытул

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

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

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

2. Як код уласны лагатып і слоган

Гэта другая найболей распаўсюджаная праблема, якую я бачу ў WordPress тэмы і вэб-сайтаў у цэлым (я нават вінаваты ў гэтым адзін). Занадта часта, сайт лагатыпы падаюцца ўнутры <h1> тэгі. Незлічоныя тэмы WordPress, вінаватыя ў гэтым правіне разметкі, так што шанцы вельмі добра, што ваш сайт у цяперашні час пакутуе ад дрэннай выпадак лагатып самалюбаванні. Вось чаму гэта праблема.

Акрамя таго <title> тэг, тэг <h1> павінна сказаць як Google і карыстачам менавіта тое, што яны могуць чакаць, каб знайсці на бягучай вэб-старонкі. Акрамя таго, пошукавыя сістэмы прызначыць іерархічных адносін у розных тэгаў разметкі загаловак, і за выключэннем <title>, <h1> тэг самы магутны кавалак інфармацыі можа служыць пошукавым сістэмам пра канкрэтную старонкі.

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

Як бас ackwards гэта?

Асноўнае правіла тут тое, што ваш блог назва не так важна, як ён пазначаецца, каб быць (я ведаю, што я разумны), і тыя, <h1> тэгі павінны быць зарэзерваваны для атрымання больш падрабязнай інфармацыі аб асобных старонках вашага сайт.

Рашэнне? Паспрабуйце падаць назву блога ўнутры <div> замест гэтага.

Так, і тое, што аб вашым слоган? У ідэале, ваш слоган павінен быць лазерны сканцэнтраваны на сваёй унікальнага каштоўнасных прапановы, асноўнай тэме вашага сайта. Гэта класічны выпадак "рабі, як я кажу, а не як я раблю", таму што мой уласны смешны слоган з'яўляецца "Best Damn блог на Планеце." Іронія ў тым, што калі б гэта было сапраўды так, то гэта не будзе маёй слоган! Ну добра... жыві, век вучыся.

Такім чынам, вернемся да вас, што рабіць з гэтым лозунгам ваш? Я рэкамендую, якая абслугоўвае ваш лазернай арыентаваных слоган ўнутры <h1> тэгаў на галоўнай старонцы, а на ўнутраныя старонкі, вы павінны служыць яго ўсярэдзіне <h2> або <h3> тэгі, каб ён не з'яўляецца больш важныя, чым фактычны старонка / загаловак паста.

3. Падавайце вашы назвы пасады ўнутры <h1> тэгі!

Калі лагатып самалюбаванні з'яўляецца другой найболей распаўсюджанай праблемай, я бачыў у WordPress тэмы, то пасля назвы падаюць ўнутры <h2> тэгі (ці горш) з'яўляецца, несумнеўна, найбуйнейшай разметкі памылку.

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

Вядома, лепшы спосаб зрабіць гэта, каб служыць вашым загаловак паста ўнутры <h1> тэгі. Так, і каб быць цалкам зразумела, вы павінны мець толькі адзін набор <h1> тэгі на любы вэб-старонцы, таму рабіць іх злічыць!

4. Выкарыстанне суб-загалоўкі ў паведамленні ў сваю карысць

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

На шчасце, многія тэмы WordPress пастаўляюцца з папярэдне адфарматаваны стылі для суб-загалоўкі, і калі вы паглядзіце, то ўбачыце, што <h3> і <h4> тэгі самых папулярных варыянтаў. Асабіста я выкарыстоўваю <h3> тэгі для больш за год, але я ніколі не даў яму шмат думаў, пакуль я не вырашыў напісаць гэта кіраўніцтва.

Сапраўды, калі вы служыце ваш загаловак паста ў <h1>, то само сабой зразумела, што ваш суб-загалоўкі павінны быць высока арыентаваныя, адпаведныя, і служыў у <h2> тэгі. У рамках гэтай устаноўкі, ваш суб-загалоўкі палегчыць ваша паведамленне тытул самага магутнага магчымымі спосабамі, захоўваючы іерархію семантычнай разметцы.

Калі вы былі ў звычку выкарыстоўваць <h3> тэгі для суб-загалоўкі, гэта можа быць занадта шмат клопатаў, каб змяніцца ў гэтай кропцы, і паклаўшы руку на сэрца, вы, верагодна, не бачу вялікай розніцы ў любым выпадку. Адзіны раз, калі я калі-небудзь "вельмі рэкамендую" змены, як гэта, калі вы спрабуеце заняць месца на тэрмін, да смешнага канкурэнтаздольнымі.

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

5. Бакавая панэль загалоўкі? Ля карт

На жаль, WordPress рэкамендаваных бакавой панэлі архітэктура бакавой панэлі загалоўкаў служыў ўнутры <h2> тэгі. Семантычна, гэта смешна.

Зірніце на гэты сайт, напрыклад. Мой загалоўкі бакавы панэлі з'яўляюцца "Апошнія артыкулы", ", Чытае" і "Паляпшэнне вашага блога." У той час, што трэці загаловак нясе трохі сэнсу, два іншых бескарысна, ва ўсякім выпадку, як пошукавыя сістэмы турбуе. Сутнасць тут у тым, што ў той час як элементы бакавой панэлі можна дадаць некаторую каштоўнасць для старонкі, яны не могуць (і не павінен) сэнсарны вобласці асноўнага зместу ў адносінах да агульнага значэння на старонцы.

Такім чынам, вы не павінны служыць бакавой панэлі загалоўкаў ўнутры моцных сьвету гэтага тэгі <h2>. На падставе ўсяго, што мы ўжо разгледзелі да гэтага часу, вы павінны служыць іх усярэдзіне <h3> або <h4> тэгі ў найбольшай ступені.

Між іншым, калі вашы загалоўкі бакавы панэлі шчыльна засяроджаны вакол асноўнага пытання, то абслугоўваюць іх усярэдзіне <h3> тэгі гэта выдатная ідэя, таму што яны будуць несці такі ж вага, і дадаваць такую ж каштоўнасць, як гэта магчыма. Калі ў вас ёсць бакавая панэль загалоўкі, як у мяне, аднак, адносіць іх да <h4> тэгі і супастаўных элемент, які не дасць ім так шмат вагі.

Практычны вынік

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

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

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

 

Published (Last edited): Jul 11 , source: http://www.pearsonified.com/2007/04/definitive-guide-to-semantic-markup.php