HTML і CSS: Што трэба ведаць, каб SEO?

1. Што такое HTML?
2. Што такое CSS?
3. Што такое JavaScript?
4. «Ну Данг. Гэта прасцей , чым я думаў «.
5. HTML інтэрналізацыі назаўжды
6. HTML для блогаў
7. Яшчэ больш тэгаў вы павінны ведаць
8. Congrats!
9. Што такое CSS стыляў?
10. Boom.

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

Вы сапраўды не трэба ведаць шмат кода , каб быць SEO аналітык.

АЛЕ, вы будзеце ў мільярд разоў лепш на працы па высоўваючы намаганні , каб зразумець , што HTML, CSS і JavaScript, і як кожны інтэрпрэтуецца пошукавымі сістэмамі. Вам не трэба быць вэб-распрацоўшчык, ці нават свабодна на любой мове праграмавання, каб быць добрым SEO аналітык; але не забывайце, што веданне гэта сіла. Чым больш вы ведаеце, тым лепш вы будзеце. Не толькі таму, што вы будзеце ў стане сказаць, што вы глядзіце, а таму, што, ведаючы, найбольш важныя паняцці і тэгі могуць дапамагчы вам пагаварыць з вамі (хутчэй за ўсё) жахлівы распрацоўшчык * не адчуваючы сябе дурнем.

* Адмова ад адказнасці: Matt з'яўляецца выключна прыемным распрацоўшчыкам

Давайце пачнем з асноў: што гэтыя словы?

Што такое HTML?

HTML, або мову гіпертэкставай разметкі, можна разглядаць як шкілет сайта. Гэта код, які ўтрымлівае ўтрыманне і метаінформаціі, што пошукавыя сістэмы выкарыстоўваюць, каб зразумець, што вэб-сайт пра. Сайт напісана на чыстым HTML будзе выглядаць не так вялікі, але гэта будзе маланкавым, верагодна, аптымізаваная для арганічнага пошуку, і спагадны (аптымізаваны для мабільных прылад). Напрыклад, музыкант Vulfpeck-х Сайт напісаны цалкам і стыль у HTML, і гэта паказвае. Гэта выключна шкілетныя сайт, і гэта таму, што HTML з'яўляецца толькі што-асновай сайта. Каб зрабіць гэта прыгожа, вы хочаце, каб даведацца некаторыя CSS.

Што такое CSS?

CSS або каскадныя табліцы стыляў, з'яўляецца скура сайта. Гэта дазваляе старанна кантраляваць стыль, шрыфты, і ў асноўным усе візуальныя аспекты вэб-сайта. Без CSS, ваш сайт будзе выглядаць сайт Vulfpeck (з папярэдняга прыкладу). Як правіла, глабальныя CSS запісваюцца элементы стылю, як загаловак, калантытул, рух, а часам нават ўтрымання само цела. Такім чынам, лепшая практыка для таго, каб усе агульныя CSS захоўваюцца ў адным стылі ліста. Калі вам трэба стылізаваць унікальныя прадметы, як блог пошта, каманда старонкі або пра нас старонка, асобныя табліцы стыляў могуць быць выкарыстаны для кожнай старонкі ў камбінацыі. Гэта дазваляе павялічыць хуткасць старонак, не прымушаючы пошукавыя сістэмы поўзаць тоны непатрэбных ліній стайлінгу кода для кожнай старонкі на вашым сайце.

Што такое JavaScript?

Уявіце JavaScript (не варта блытаць з Java, які з'яўляецца цалкам асобны звер), як мышцы, сухажыллі і звязкі, якія дазваляюць арганізму сапраўды рухацца і рабіць класныя рэчы. JavaScript можа быць выкарыстаны для розных мэтаў, у тым ліку галерэі малюнкаў, дынамічныя макеты, гульні, і нават унікальныя адказы на дзіўныя паводзінаў карыстальнікаў. Паколькі мы разглядаем гэты пост па асновах HTML і CSS для аптымізатараў, мы не збіраемся быць сканцэнтраваны занадта моцна на JavaScript. Мы хочам адзначыць, што JavaScript і Google, як правіла, добра гуляць разам, па большай частцы, але ёсць шмат больш паглыбленыя тэхнічныя падрабязнасці таго, як JavaScript ўплывае на SEO, якія мы не збіраемся, каб патрапіць у тут. Самае галоўнае, што трэба памятаць, каб пазбегнуць неабходнасці кантэнту загрузкі сайта праз JavaScript. Калі гэта важна, пераканайцеся, што ён у шкілеце вашага сайта, а не ў кодзе JavaScript.

«Ну Данг. Гэта прасцей , чым я думаў «.

Мы абсалютна overgeneralizing, але вы ўсё роўна павінны атрымаць кропку. HTML з'яўляецца ўся інфармацыя на сайце, у тым ліку змест і метададзеныя (дадзеныя пра дадзеныя). CSS робіць гэта выглядаць прыгожа і унікальна. JavaScript дазваляе рабіць дзіўныя рэчы.

З самымі асновамі з шляху, давайце гэта шоў на дарозе і вырашаць асноўныя элементы HTML і CSS, трэба ведаць, як аналітык SEO.

HTML інтэрналізацыі назаўжды

Давайце разбярэм гэта крыху ўніз.

Код, незалежна ад мовы, заўсёды будзе выкарыстоўваць як адчыняе і што зачыняе тэг. У HTML, гэта адбываецца некалькі спосабаў, як было паказана вышэй. Каб зрабіць гэта лёгка, мы будзем глядзець на кожны элемент па адным, пачынаючы з нашага тэга <HTML>, які як SEO , Вы, верагодна, ніколі не пісаць. Ён выкарыстоўваецца ў літаральным сэнсе проста заявіць, што ўсё паміж адкрывалым і які закрывае </ HTML> запісваецца ў HTML. Гэта на самай справе проста так проста.

Цяпер вы можаце думаць, "добра , што мой JavaScript і CSS? »

Супакойся.

Мы атрымліваем там.

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

Вы, магчыма, таксама заўважыў нешта, што можа быць трохі заблытаным: спасылку отн = "" тэг. Гэты HTML-тэг выкарыстоўваецца для апісання адносін паміж старонкай HTML і іншымі канкрэтнымі рэсурсамі. Гэта можа быць выкарыстана ў розных формах, такія як кананічныя тэгі, якая злучае C лісты, і прадастаўленні дадатковых дырэктыў для пошукавых сістэм, такіх як NoFollow, прад / наступнымі, і нават alternate.The альтэрнатыўнага тэга мае вырашальнае значэнне пры аптымізацыі для міжнародных кліентаў, таму што гэта дзе мы будзем пазначаць мовы і рэгіёны, арыентаваныя на гэтыя «альтэрнатыўныя версіі» старонак, так што найбольш актуальнай версіі старонкі заўсёды падаецца да карыстача. Гэта становіцца вельмі складана, і гэта трохі выходзіць за рамкі гэтага паста.

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

1. Назва Tag - гэта ў літаральным сэнсе назва вашай старонкі. Гэта тое, што ўсплывае ў якасці спасылкі ў выніках пошуку. Гэта моцна ўзважаны сігнал, і менавіта гэты тэг можа быць цесна звязана з ранжыравання поспеху і няўдачы.
2. Meta Description - Гэты біт інфармацыі знаходзяцца прама пад загалоўкам старонкі ў нашым папярэднім прыкладзе. Хоць гэта не з'яўляецца прамым фактар ​​ранжыравання, мета апісання моцна ўплывае націсніце на аснове ставак, так як гэта крыху інфармацыі ніжэй сіняй спасылкі ў выніках пошуку.
3. Canonical Tag - кананічны тэг можа быць выключна заблытаным для новых аптымізатараў. Там вельмі шмат, каб сказаць пра гэта, але дакладна ведае, што, па сутнасці, што вы робіце пры выкарыстанні яго дэклараваннем пераважнай версіі старонкі. Калі зыходная старонка, яна будзе самастойна спасылаючыся; калі не, то гэта можа паказваць на іншую старонку, каб даць яму крэдыт, паменшыць дубляванне або пазбегнуць плагіяту. Гэта працуе такім жа чынам, як отн = "табліцы стыляў» тэг спасылкі, з той розніцай, што апошняя вызначае сувязь паміж вашым HTML шкілета і скуры CSS, у адрозненне ад стасункаў паміж старонкамі.

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

HTML для блогаў

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

Большасць вэб-сайтаў у гэтыя дні лёгка манипулируемой праз WYSIWYG (што вы бачыце, што вы атрымліваеце) рэдактар. WYSIWYG рэдактары з'яўляюцца вялікімі, але яны не забяспечваюць кантроль над вашым сайтам і змест, як вы можаце захацець. Вось калі вы сапраўды жадаеце атрымаць і выкарыстоўваць тэкставы рэдактар. Ніжэй вы знойдзеце некаторыя з найбольш карысных элементаў у HTML, калі гаворка ідзе аб фарміраванні вашага блога ці змесціва ўверх.

Такім чынам, давайце пачнем з тэгам <BODY>. Гэта дзе ваш кантэнт будзе жыць 100% часу. Часам вы нават можаце знайсці некаторыя трекінг фрагменты ў тут, але лепшы спосаб думаць пра гэта з'яўляецца тое , што ў той час як <галава> ўтрымлівае каштоўную інфармацыю для пошукавых сістэм, гэта <цела> , які ўтрымлівае каштоўную інфармацыю для карыстальнікаў.

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

Давайце паглядзім на ўсё паміж адкрывалым і які закрывае тэгамі <BODY>.

<DIV> </ DIV>: Добра, я прызнаю. Гэта становіцца заблытаным таксама. Глядзі, дзівы выкарыстоўваюцца для арганізацыі і звычайна ўтрымліваюць вялікі блок кода, які вы хацелі б, каб стыль у адзін і той жа шлях. Вось ўлоў: вы можаце змясціць прамежак ўнутры DIV і даць ім абодвум унікальны ідэнтыфікатар. Затым, стылізацыі DIV будзе ўплываць на працягласць, але дазваляюць захаваць выразны кантроль.

<SPAN> </ SPAN>: заблытаная частка: пралёты таксама выкарыстоўваюцца для арганізацыі. Зноў жа, усё, што вам трэба зрабіць, гэта прызначыць ідэнтыфікатар (<SPAN ID = "Прыклад»> </ SPAN>) і можа быць лёгка згадваецца ў CSS для кладкі. Існуе значна больш ведаць пра адрозненні паміж дзівай і ахоплівае, але, шчыра кажучы, да таго часу, пакуль вы вэб-сайты ўручную кадавання, вы не павінны быць занепакоеныя.

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

<Моцны> <h2> </ h2> </ STRONG>: Добра, добра вы мяне злавілі. Гэта на самай справе дзве пазнакі разам узятыя. <Моцны> з'яўляецца тэг , які выкарыстоўваецца для : калі вы можаце паверыць, зрабіць тэкст тоўстым шрыфтам. Вось і ўсё. Тэг H2 з'яўляецца тое падзагалоўку пад нашым тэгу H1. Гэта, як правіла, будзе выкарыстоўвацца для далейшага пашырэння падтэмы ў рамках тэмы H1 ст.

<P> </ p>: Ааа, усе важныя P, або пункт, тэг. Амаль 95% часу, ваш кантэнт будзе запісаны ўнутры тэга <р>. Выключэннем з гэтага правіла з'яўляюцца ў асноўным толькі вашы тэгі загалоўкаў.

<Ол> </ ЮЫ> & <уль> </ UL>: OL і UL пазнакі могуць выкарыстоўвацца напераменку, у залежнасці ад таго, як вы хацелі б, каб стыль спісаў. См гэтыя тэгі ставяцца да спарадкаваны спіс і неўпарадкаваных спіс. Такім чынам, Аб ​​і U L. У любым, то <літый> </ літый> тэгі будуць абгарнуць вакол кожнага элемента ў спарадкаваным спісе, каб стварыць Пранумараваная спіс, і кожны элемент у неўпарадкаваных спісе, каб стварыць маркіраваны спіс.

<EM> </ EM>: ЕМ тэг можна разглядаць як забеспячэнне акцэнт на тэрміне, распрацоўваючы тэкст ўнутры тэга курсівам. Вось і ўсё. Просты спосаб нахільнага ўтрымання ў HTML.

<IMG SRC = "» альт = »» />: IMG SRC тэга адзін з нямногіх, які мае сэнс толькі пры чытанні тэга. Гэта кажа крыніца малюнка, якое вы хочаце выкарыстаць. Выкарыстоўваць альт тэг для апісання для пошукавых сістэм і чытання з экрана, што на самой справе паказвае малюнак. Памятаеце, што пошукавыя сістэмы да гэтага часу не могуць бачыць фатаграфіі, таму з дапамогай альт тэг дапамагае прадастаўляе некаторы кантэкст для бот пры сканаванні малюнкаў на адной старонцы.

<a rel="nofollow" href="http://www.url.com/"> якарнай тэкст </a>: Я ведаю, што ёсць Curveball тут. Я спадзяюся, што вы былі гатовыя. Глядзіце, без отн = "NOFOLLOW» (згаданы вышэй), гэта проста стандартная спасылка тэг. Отн = "NOFOLLOW" біт дыктуе для пошукавых сістэм, якія вы не хацелі б, каб перадаць любую спасылку справядлівасці на звязаным сайце. Астатняя частка тэга вызначае старонку, якую вы хочаце перайсці па спасылцы, і тэкст, які карыстальнікі бачаць, звязаныя з гэтай старонкай, якая згадваецца ў якасці якарнай тэксту.

Яшчэ больш тэгаў вы павінны ведаць

<a target="_blank" href="http://www.url.com/"> якарнай тэкст </a>: Цяпер вы павінны быць у стане прызнаць , што спасылка выглядае ў HTML. Розніца заключаецца ў тым, што гэтая мэта = »_ blank» адкрывае спасылку ў новай ўкладцы, якая можа быць перавага ў тым, што вы пазбягаеце накіроўваць карыстальнікаў на ваш сайт. Замест гэтага, вы робіце гэта лёгка для іх, каб перайсці па спасылцы на пытанне, не пакідаючы старонкі.

<A HREF =»# jumplink»> якарнай тэкст </a>: Шмат паведамленняў доўгі блог (гэта не адзін) ўключаць змест , якія, як правіла , размечаных з актыўнымі спасылкамі. Пры націску гэтыя спасылкі традыцыйна скакаць вам ніжэй ўніз старонкі да канкрэтнага падзелу. Гэта вядома як звяно скачку і патрабуе двух частак: фактычная спасылка (спасылка паказана вышэй) і канкрэтны элемент, які вы хацелі б перайсці. Гэты элемент павінен будзе называцца выкарыстаннем выдуманага ID. Як толькі гэта будзе зроблена, проста ўсталяваць ідэнтыфікатар дзе URL будзе ісці ў <a href> тэг, і вы зрабілі. Майце на ўвазе: гэта не самы дакладны ў разы і, у залежнасці ад месца размяшчэння, можна скакаць трохі ад тэмпу, з якога вы хочаце быць.

</ BR>: Многія людзі схільныя выкарыстоўваць & NBSP; каб зрабіць разрывы радкоў адбываюцца ў змесце. Калі вы чытаеце гэта , і зрабіць гэта цяпер, калі ласка , спыніце. Проста выкарыстоўвайце </ BR>. Гэта нашмат прасцей, міжрадковы інтэрвал идеальноий ў разы, і гэта нават не патрабуе які зачыняе тэга.

<Тэга стыль = "уласцівасць: значэнне; уласцівасць: значэнне; уласцівасць: значэнне; уласцівасць: значэнне; уласцівасць: значэнне;">:
Такім чынам, у той час як мы ніколі не будзем рэкамендаваць выкарыстанне убудаванага стылю з HTML, мы прызнаем, што вам трэба, па меншай меры, бачыць прыклад таго, што вы не павінны рабіць. Таму, калі ласка, калі вы бачыце гэта на вашым сайце, забіць яго агнём. Пошукавыя сістэмы не любяць яго, і з дапамогай ідэнтыфікатара або класа тэг для абазначэння часткі, якую вы хочаце стыль, вы можаце лёгка зрабіць тое ж самае ў CSS без наплыву убудаванага кода. О, мы згадвалі, што ён дапамагае пры хуткасці сайта, каб зрабіць гэта?

Congrats!

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

Зараз давайце пагаворым CSS.

Што такое CSS стыляў?

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

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

Паколькі мы ўсталёўваем Ід = »навігацыю,» зараз мы можам стылізаваць толькі што, напісаўшы наступны CSS:

Калі вы хочаце, каб замест таго, каб абвясціць HTML блокі класа, проста замяніць «ID» з «CLASS»:

і змяніць CSS для:

Boom.

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

Відавочна, што вы ведаеце лепш , чым гэта, хоць.

Ёсць шмат дзіўных рэчаў, якія можна зрабіць з дапамогай CSS. Вы мне не верыце? Google гэта , Хоць пасля таго, як вы дайшлі да кропкі, у жаданні зрабіць сапраўды дзіўныя канструкцыі CSS, вы можаце прасіць аб павышэнні заработнай платы. Тым не менш, калі вы хочаце ісці па гэтым шляху, ёсць мільярд рэсурсы, якія вы можаце выкарыстоўваць, каб адтачыць свае навыкі.

У гэтыя дні, навучанне код так проста, як мае інтэрнэт і кампутар, які мае доступ да Інтэрнэту. Сур'ёзна, сярод Codecademy , праект Odin , Udemy , кан акадэміі і многія іншыя рэсурсы, у вас ёсць усё неабходнае пад рукой. Наступны крок, які мае час і высоўваючы намаганні, каб па-сапраўднаму даведацца і выкарыстоўваць код.

Ў вас ёсць якія-небудзь пытанні? Каментар ніжэй і дайце нам ведаць!