- Семантычныя элементы HTML5:
- Як дапамагчы семантычным элементам HTML5 дапамагчы SEO?
- Думаеце, ніхто не выкарыстоўвае Semantic Elements? Падумайце яшчэ раз.
- Семантычная схема Микроданные
- заключныя думкі
Гэта першы ў серыі блогаў A-Team, прысвечаны перадавой практыцы SEO.
Калі HTML5 з'явіўся на сцэне ў 2011-2014 гадах, з боку супольнасці вэб-распрацоўнікаў з'явіўся крык, які "быў занадта складаны" і яго часткі былі непатрэбнымі. У прыватнасці, распрацоўшчыкі драпалі галавой аб так званых семантычных элементах HTML5 - у рэшце рэшт, што здарылася з добрай старой канструкцыяй <div id = "xxx">? Прасунутай наперад некалькі гадоў, і сёння ў нас ёсць усе віды законнага выкарыстання семантычных элементаў HTML5, і распрацоўшчыкам было б разумна пачаць іх рэалізацыю ва ўсіх новых праектах, якія ідуць наперад.
Семантычныя элементы HTML5:
< article > змесціва, якое адзначана як "сіндыкаваны" - павінна быць "поўным" само па сабе, паколькі ён можа быць сабраны і адлюстраваны ў канале "у бок ", г.зн. "бакавой панэлі", проста для падтрымкі асноўнага змесціва, перыферычнага для змесціва. Заўвага: зараз мы можам выкарыстоўваць H1 ў баку без наступстваў для SEO. < дэталі > уяўляе сабой віджэт раскрыцця інфармацыі, з якога карыстальнік можа атрымаць дадатковую інфармацыю або элементы кіравання < figcaption > надпісам для малюнка (гл. ніжэй) < figure > змест, які пазначаны як "сіндыкаваны" (напрыклад, фатаграфіі, ілюстрацыі, відэа і г.д.). .) < footer > змесціва загалоўка вэб-старонкі < header > змест загалоўка вэб-старонкі < main > асноўнага змесціва вэб-старонкі, за выключэннем глабальных элементаў, такіх як header, footer і nav < mark >, аўтар хоча, каб вы засяродзіліся на гэтым змесце, не падкрэсліваючы яго. , каб адрозніць <em> ці <strong> < nav > навігацыйную спасылку < section > вэб-старонкі, якая групуе адпаведны кантэнт < summary >, вызначае бачны загаловак элемента <details>. Яго можна націснуць, каб праглядзець / схаваць падрабязнасці < час > абгорткі часу машыначытавымі ўласцівасцямі часу < hgroup > групай тэгаў загалоўкаў.Як дапамагчы семантычным элементам HTML5 дапамагчы SEO?
Некалькімі спосабамі:
- гэта дапамагае пошукавым машынам і машынным чытачам вызначыць ключавыя часткі старонкі. У прыватнасці, пошукавая сістэма Google Hummingbird (у адрозненне ад пошукавых сістэм Google Panda або Google Penguin) прызначана для таго, каб засяродзіцца на гутарковым значэнні змесціва на вэб-старонцы. Выкарыстанне семантычных тэгаў HTML5 палепшыць "разуменне" Hummingbird вашых вэб-старонак.
- Акрамя таго, семантычныя элементы HTML5 дапамогуць працэнтам наведвальнікаў вашага сайта больш доўга ўзаемадзейнічаць з вашай старонкай (напрыклад, тыя, хто выкарыстоўвае счытвальнік экрана). І чым даўжэй наведвальнікі сайта застануцца на вашых старонках, тым вышэй ваш рэйтынг.
- І, нарэшце, семантычныя элементы HTML, такія як <article> і <figure>, дапамагаюць сіндыкацыі / перабудове змесціва па розных каналах. Заахвочваючы сіндыкацыю, вы маеце больш "знешніх" давераных спасылак на ваш сайт. І больш надзейныя спасылкі на вашу вэб-старонку (незалежна ад таго, адкуль яны), з'яўляюцца галоўным фактарам ранжыравання старонак.
Думаеце, ніхто не выкарыстоўвае Semantic Elements? Падумайце яшчэ раз.
Зараз Facebook прасоўвае функцыю "Імгненныя артыкулы" (гл.: https://developers.facebook.com/docs/instant-articles/reference ), які, на іх думку, будзе новым каналам для выдаўцоў ствараць хуткія, інтэрактыўныя артыкулы, якія з'яўляюцца на мабільным дадатку Facebook. Facebook відавочна падазрае з HTML5 тут. Стварыць імгненны артыкул вельмі проста: проста адфарматуйце вэб-старонкі ў адпаведнасці з іх HTML5-кіруючымі прынцыпамі, і яны дазволяць вам публікаваць / прасоўваць такія інтэрактыўныя артыкулы, якія аптымальна рэагуюць на мабільны канал. Карацей кажучы, гэта ідэальны спосаб аднаўлення існуючага вэб-кантэнту. І яшчэ раз, калі больш верныя спасылкі на ваш сайт (незалежна ад таго, адкуль яны прыходзяць) павялічваюць ваш рэйтынг.
Ніжэй прыведзены кароткі ўзор таго, як выглядае фарматаванне. Звярніце ўвагу на выкарыстанне элемента HTML5 <article>, які відавочна выкарыстоўваецца тут для сіндыкацыі.
<! doctype html> <html lang = "en" прэфікс = "op: http://media.facebook.com/op#"> <head> <meta charset = "utf-8"> <link rel = "кананічны "href =" http://example.com/article.html "> <meta property =" op: markup_version "content =" v1.0 "> </head> <body> <article> <header> <! - - Загаловак і субтытраў, указаныя ў імгненным артыкуле -> <h1> Загаловак артыкула </h1> <h2> Субтытры артыкула </h2> <! - Дата і час, калі ваш артыкул быў першапачаткова апублікаваны -> <час class = "op-апублікавана" datetime = "2014-11-11T04: 44: 16Z"> 11 лістапада, 16:44 </time> <! - Дата і час, калі апошні раз абнаўлялася ваша артыкул -> < time class = "op-modified" dateTime = "2014-12-11T04: 44: 16Z"> 11 снежня, 16:44 </time> <! - Аўтары вашага артыкула -> <адрас> <a rel = "facebook" href = "http://facebook.com/brandon.diamond"> Брэндон Даймонд </a> Брэндон - заўзяты паляўнічы за зомбі. </address> <address> <a> TR Vishwanath </a> Віш - вучоны і джэнтльмен. </address> <! - Вокладка, паказаная ў артыкуле -> <figure> <img src = "http://mydomain.com/path/to/img.jpg" /> <figcaption> Гэта выява дзіўна </figcaption> </figure> <! - Кикер для артыкула -> <h3 class = "op-kicker"> Гэта кикер </h3> </header> <! - Цела артыкула ідзе тут -> <! - Тэкст цела для вашай артыкула -> <p> Змест артыкула </p> <! - Відэа ў вашай артыкуле -> <figure> <video> <source src = "http: //mydomain.com/path/to/video.mp4 "type =" video / mp4 "/> </video> </figure> <! - Аб'ява ў вашай артыкуле -> <figure class =" op- аб'ява "> <iframe src =" https://www.adserver.com/ss;adtype=banner320x50 "height =" 60 "width =" 320 "> </iframe> </figure> <! - Код аналітыкі для Ваш артыкул -> <figure class = "op-tracker"> <iframe src = "" hidden> </iframe> </figure> <footer> <! - Крэдыты для вашага артыкула -> <aside> Падзякі. / aside> <! - Інфармацыя аб аўтарскім праве вашай артыкула -> <small> Юрыдычныя запісы </small> </footer> </article> </body> </html>Семантычная схема Микроданные
У той час як распрацоўшчыкі спрачаюцца наперад і назад аб перавагах / недахопах HTML5, у рамках радыёлакацыйнай сістэмы і без асаблівых прыхільнасцяў, www.schema.org (ініцыятыва, якую фінансуе Google, Microsoft, Yahoo і Yandex), апублікавала мноства дакументаваных схем для амаль. кожны магчымы тып кантэнту: прадукты, мерапрыемствы, арганізацыі, мясцовыя прадпрыемствы, агляды фільмаў і кніг і г.д. (гл www.schema.org ). Практычна на працягу ночы гэта стала дэ-факта стандартам для разметкі кантэнту.
Чаму вы павінны перайсці да праблемы з фарматаваннем вэб-кантэнту з дапамогай Schema Microdata? Самы просты выпадак звязаны з тым, як Google фарматуе вашу старонку, калі яна адлюстроўваецца на старонцы вынікаў пошуку (SERP) - інакш "багатыя фрагменты" (гл. Малюнак ніжэй). Тое, што было паказана даволі дэманстратыўна, з'яўляецца тое, што тыя вэб-старонкі, якія «адфарматаваны» з выкарыстаннем канкрэтных атрыбутаў Schema Microdata, атрымліваюць большую колькасць паказчыкаў (CTR), калі яны выказваюцца ў SERP супраць іх канкурэнцыі, якой не хапае такога фарматавання. Залішне казаць, што высокі CTR - яшчэ адзін галоўны драйвер рэйтынгу сайта.
Асноўныя атрыбуты, якія выкарыстоўваюцца пры фарматаванні "багатых фрагментаў", залежаць ад тыпу схемы - напрыклад: фільм, які пералічвае "багаты фрагмент", будзе аказваць агляды, месцы і паказы. Прадукт "багаты фрагмент" дасць водгукі, цэны і даступнасць. І гэтак далей.
Ніжэй прыведзены просты прыклад выкарыстання Schema Microdata пры фарматаванні змесціва HTML:
Варта адзначыць, што замест фарматавання стылю Schema Microdata вы можаце дадаткова выкарыстаць фарматаванне RDFa Lite (абодва могуць выкарыстоўваць тыя ж схемы www.schema.org). Google заяўляе, што падтрымлівае абодва стылю фарматавання. Глядзіце: https://www.w3.org/TR/xhtml-rdfa-primer/
І ў выпадку, калі гэта не было абсалютна зразумела: вы можаце і павінны змешваць як семэнтыку HTML5, так і Schema Microdata разам на адной вэб-старонцы!
Таксама спасылка на прыладу дапаможніка Google Structured Markup Data дапаможа вам убачыць, як яна працуе з бягучым зместам, які можна атрымаць тут: https://www.google.com/webmasters/markup-helper/
заключныя думкі
Мяркуючы, што нашы вэб-праекты выкарыстоўваюць MVC ці нейкі варыянт, застаецца пытанне пра тое, як найлепшым чынам аказваць змест на ўзроўні прэзентацыі. Мне падаецца, што ў ідэале службовае прыкладанне (напрыклад, кантролер) выдае карысную нагрузку, якая забяспечвае б адназначныя намёкі на карысную нагрузку адказу адносна таго, што адлюстроўваецца канкрэтная схема змесціва. Здзейснены такім чынам, фронт-фрэймворку не трэба нічога больш, чым пераўтварыць падказкі ў HTML5 і / або Schema Microdata, не патрабуючы вялікага значэння на шляху складанага пошуку.
Улічваючы гэта, мне здаецца, што ў нас ёсць магчымасць вырабляць такую жаданае SEO змесціва, змяшчаючы www.schema.org для ўсяго вядомага зместу, які знаходзіцца пад нашым кантролем. Некаторыя відавочныя прыклады былі б для Eloqua Landing Pages і электронных лістоў (напрыклад, www.schema.org/event, www.schema.org/InviteAction, www.schema.org/RsvpAction, schema.org/EmailMessage) або гандлёвых прадуктаў (напрыклад, www) .schema.org / product, www.schema.org/offer, www.schema.org/Review) альбо "Маркетынг сайтаў" , "FAQ", "Рэцэпт" ці "Мясцовыя дзелавыя старонкі" (напрыклад, schema.org/NewsArticle, schema.org/Question , schema.org/Recipe, schema.org/LocalBusiness). Залішне казаць, што ў нашай экасістэме Red Stack існуе мноства іншых магчымасцяў, якія чакаюць нас, каб дадаць каштоўнасць для нашых SEO-арыентаваных кліентаў (гэта значыць амаль усе нашы кліенты).
Думаеце, ніхто не выкарыстоўвае Semantic Elements?У прыватнасці, распрацоўшчыкі драпалі галавой аб так званых семантычных элементах HTML5 - у рэшце рэшт, што здарылася з добрай старой канструкцыяй <div id = "xxx">?
Як дапамагчы семантычным элементам HTML5 дапамагчы SEO?
Думаеце, ніхто не выкарыстоўвае Semantic Elements?
Чаму вы павінны перайсці да праблемы з фарматаваннем вэб-кантэнту з дапамогай Schema Microdata?