Share
Enten du er webmaster eller webdesigner, er det et spørsmål du mest sannsynlig har spurt eller besvart mange ganger gjennom årene. Det spørsmålet er, "Hvor mange merker kan jeg bruke per side, og hvordan skal jeg implementere dem? "
Det er generelt to grunner til at dette spørsmålet blir spurt. Den første og mest vanlige er for SEO formål; Å sørge for at innholdet er formatert på best mulig måte for å hjelpe søkemotorindeksering. Den andre er teknisk korrekthet; sørge for at oppmerkningen er skrevet i samsvar med den aktuelle W3C-spesifikasjonen.
Med adventen til HTML5 har svaret på dette spørsmålet blitt betydelig endret i både SEO og teknisk hilsen. Det er nå ikke bare mulig å ha flere nivå overskrifter per nettside som vil gi mening til søkemotorer, men i de fleste tilfeller er det faktisk det anbefalte kurset.
Men fordi HTML5-spesifikasjonen ikke er alt som forstås enda, er det fortsatt mye råd som flyter rundt, noen selv skrevet veldig nylig, basert på reglene for pre-HTML5 webdesign.
I denne opplæringen skal vi løse opp noen misforståelser. Vi tar en grundig titt på hva HTML5 betyr for tagbruk, samt hvordan du kan dra nytte av forbedringene som nå er tilgjengelige for å lage nettsider som er mer semantisk rike og godt strukturert enn noen gang før.
I lang tid ble det ansett som en av kardinale regler for HTML og SEO at hver enkelt side på et nettsted burde ha en nivå overskrift, og en eneste. I tillegg foreskrev regelen at dette entallet overskrift bør angi det primære emnet på siden.
Denne regelen ble generelt fulgt med det formål å hjelpe søkemotorer bedre å forstå det primære emnet på hver side, slik at de kunne bestemme deres relevans for ulike søkefraser, forbedre søkemotorens nøyaktighet og dermed forbedre rangeringer for velutstyrte nettsteder.
La oss vurdere et eksempel på en pre-HTML5-bedriftens nettside. I dette eksemplets nettsted vises firmanavnet i overskriftsdelen på alle sidene, hjemmesiden inneholder en beskrivelse av virksomheten, og i et annet område av nettstedet blir ekspertartikler publisert.
I følge "Single Tag "-regel, har hjemmesiden til dette nettstedet Etiketter brukt på navnet på virksomheten i overskriftsdelen, som angir selve virksomheten, er det primære emnet for denne siden.
Men i en artikkel publisert andre steder på samme nettsted, Merkene fjernes fra firmanavnet i overskriften og brukes i stedet til artikkelens tittel. Dette gjøres fordi artikkeltittelen gir en mer representativ etikett for det primære emnet på siden, som nå er artikkelenes innhold i motsetning til beskrivelsen av virksomheten som var på hjemmesiden.
En pre-HTML5-versjon av dette nettstedet vil derfor bli merket opp noe slikt:
Til tross for langvarig tungt fokus på koder, de var aldri et element som opererte i isolasjon, uavhengig av resten av dokumentet. Det er en grunn bak viktigheten av å ta vare på plassering i forsiden av HTML5 og pre-HTML5, og det er genereringen av dokument skisser.
Dokumentoversikt er noe i tråd med innholdsfortegnelsen for et nettsted. De genereres automatisk fra merket på en hvilken som helst nettside.
Før HTML5 ble dokumentoversikt generert fra din bruk av overskriftsmerker gjennom til . Hver bruk av en overskrift vil innebære begynnelsen på en ny del av innholdet.
Ta for eksempel følgende html, og noter plasseringen av , og koder som bestemmer dokumentets disposisjon:
Eksempel på pre-HTML5-oppsummering Den riktige bruken av peanøtter
Hvordan spise peanøtter
Peanøtter kan spises med salt.
Dette er en akseptabel bruk av jordnøtter.
Overlegen peanut spise metoder
Peanøtter er uendelig bedre når de kombineres med sjokolade.
Vi anbefaler denne tilnærmingen for å få de beste resultatene
Feil bruk av peanøtter
Peanøtter bør ikke brukes til å fylle parkeringsmålere.
De vil ikke være effektive i denne kapasiteten.
Pre-HTML5, vil oppmerkningen ovenfor generere en dokumentoversikt som følger:
Den første element betraktes som etiketten for hele dokumentet. De påfølgende overskriftene betraktes som etiketter for deler av innholdet i dette dokumentet, og danner et tre under det.
Eksemplet ovenfor er enkelt nok, men i naturen er nettsider sjelden denne enkle. Når vi trenger mer komplisert innholdspresentasjon, løper vi inn i det store problemet med pre-HTML5-oppslag, og årsaken til at det tidligere var nødvendig å bare bruke en nivå overskrift per side.
I eksemplet ovenfor har vi et enkelt tema som blir diskutert: "Den riktige bruken av jordnøtter". Men hva om dette emnet blir diskutert på en side med flere artikler av samme betydning, som du kanskje ser på en blogg for eksempel?
Ta denne html med en annen artikkel vist, (hver artikkel er pakket inn i Peanøtter kan spises med salt. Dette er en akseptabel bruk av jordnøtter. Peanøtter er uendelig bedre når de kombineres med sjokolade. Vi anbefaler denne tilnærmingen for å få de beste resultatene Peanøtter bør ikke brukes til å fylle parkeringsmålere. De vil ikke være effektive i denne kapasiteten. La oss være ærlige, det tar aldre. Vi anbefaler bare å kjøpe hermetisert bønner i stedet. Pre-HTML5, ville dette oppslaget ha generert følgende dokumentoversikt: Nå, selv om det er to artikler av like stor betydning på siden, er den første artikkelen overskriften «Den riktige bruken av jordnøtter» fortsatt tolket som etiketten som representerer hele dokumentet, bare fordi det er den første som oppstod. Dette vil således indikere at hele innholdet på siden er "Den riktige bruken av jordnøtter", selv om den andre artikkelen handler om et helt annet tema. Den typiske måten å bekjempe dette på var å skape en fangst-all overskrift med Peanøtter kan spises med salt. Dette er en akseptabel bruk av jordnøtter. Peanøtter er uendelig bedre når de kombineres med sjokolade. Vi anbefaler denne tilnærmingen for å få de beste resultatene Peanøtter bør ikke brukes til å fylle parkeringsmålere. De vil ikke være effektive i denne kapasiteten. La oss være ærlige, det tar aldre. Vi anbefaler bare å kjøpe hermetisert bønner i stedet. Legg merke til tilsetningen av generalisert Følgende dokumentoversikt vil nå bli generert: Dette dokumentet, selv om det er det beste som kan gjøres før HTML5, presenterer noen betydelige problemer: Dette er hvor HTML5 kommer sammen for å redde dagen og løse alle disse problemene. Hvis du vurderer hvert av problemene som er beskrevet ovenfor, har de alle en felles og litt enkel rot: Forutsetningen for at hver nettside er et entall dokument med et enkelt emne som bare krever en enestående etikett. Den like enkle løsningen på disse problemene vil komme fra muligheten til å indikere om en nettside hadde diskrete seksjoner, potensielt med flere emner hver med sin egen meningsfulle etikett. Hvis det var mulig å spesifisere at hver artikkel på en side var adskilt, ville dette gjøre det mulig å merke dem med meningsfulle overskrifter som nøyaktig representerte innholdet, og gi hverandre samme vekt av betydning. Hvis det var mulig å gjøre det klart når et nettstedstittel ikke var representativt for sidens innhold, ville problemet med fortynning av relevans løstes. Med en tydelig indikasjon i stedet for forskjellen mellom nettstedets tittel, artikler og artikkeltitler, ville det ikke lenger være nødvendig å endre markup fra ett område til et annet. EN Og fordi det ville bli klart om nettstedets tittel ikke representerte artikkelinnholdet på siden, ville det være mulig å sette det til noe i det hele tatt, uansett hvor abstrakt. HTML5 gjør alle disse tingene mulige gjennom introduksjonen av sine semantiske elementer og HTML5-dokumentets oversiktalgoritme. Mens forhånds-HTML5-dokumentoversikten ble trukket utelukkende fra overskriftskoder alene, bruker HTML5-dokumentets oversiktalgoritme følgende nøkkelaspekter: Forstå hvordan disse aspektene av HTML5 brukes, er relativt grei, og prosessen går vanligvis mye slik: Det er mange andre aspekter til HTML5-dokumentets oversiktalgoritme. Omfattende informasjon om disse er tilgjengelig på W3C. Men med bare de aspektene som er nevnt ovenfor, er vi i stand til å løse alle problemene som er beskrevet i forrige del av denne opplæringen. La oss ta en titt på vår "Legume Literature Blog", da den kunne merkes opp ved hjelp av HTML5. Følgende enkle modifikasjoner har blitt gjort: Peanøtter kan spises med salt. Dette er en akseptabel bruk av jordnøtter. Peanøtter er uendelig bedre når de kombineres med sjokolade. Vi anbefaler denne tilnærmingen for å få de beste resultatene Peanøtter bør ikke brukes til å fylle parkeringsmålere. De vil ikke være effektive i denne kapasiteten. La oss være ærlige, det tar aldre. Vi anbefaler bare å kjøpe hermetisert bønner i stedet. Nå vil HTML5-dokumentets oversiktalgoritme gi oss følgende: Det første du kanskje ser er utseendet til Legg merke til at i HTML5, Utseendet til Dette betyr at alle problemene vi tidligere har skissert i denne opplæringen, umiddelbart er løst: Du kan også nå se fra HTML5-dokumentoversikten generert av vår oppdeling at det er helt greit å bruke så mange Du kan også se fra dette eksemplet hvordan det ville være mindre korrekt å bruke bare ett sett med Hvis du fortsatt hadde Dette er fordi ved å merke opp artikkelen overskriftene med I sin tur vil andre underposisjoner av artiklene dine nødvendigvis være merket med Det er tillatt av HTML5-spesifikasjonen å bruke lavere nivåoverskrifter enn Det beste å gjøre i alle tilfeller er nøye å vurdere innholdet ved hånden, og fastslå den beste måten å snitte og merke den på, basert på hva du nå vet om HTML5-dokumentet som beskriver algoritmen. Ja det er sant. Du kan nå bruke så mange sett av Akkurat som det var regler for Her er de et øyeblikk: Som jeg nevnte ovenfor, er ikke delemerker absolutt ha å være Men hvis du bestemmer deg for å bruke en annen kode enn Det er bare fire sett med elementetiketter du kan bruke til å angi innholdsdeler på nettsiden din, men de kan være litt vanskelig å bryte seg om i begynnelsen. De er: De to du sannsynligvis vil bruke mest er For detaljerte eksempler på hvordan du bruker hver av disse kodene, ta et øyeblikk for å sjekke ut disse W3C-sidene: For mer informasjon om Vi vet nå at i HTML5 kan vi gjerne bruke W3C har dette å si: h1-h6-elementer må ikke brukes til å merke underposisjoner, undertekster, alternative titler og taglines med mindre det er meningen å være overskriften til en ny seksjon eller underavdeling. Årsaken til dette er at HTML5-dokumentets oversikt alltid tolker en overskriftsmerke som begynnelsen av en ny seksjon av innhold, om deling av innholdskoder er pakket rundt dem eller ikke. For en stund var det et arbeid rundt dette Så nå er den beste måten å håndtere taglines bare å bruke I denne opplæringen har vi fokusert på Imidlertid vil jeg være remiss hvis jeg ikke peker deg i riktig retning på noen av de mest verdifulle HTML5-kodene du kan bruke i oppslaget ditt for å gjøre det enda mer semantisk rikt. De Hvis du viser en gruppe artikler, vil den vikle rundt alle artiklene. For eksempel: Peanøtter kan spises med salt. Dette er en akseptabel bruk av jordnøtter. Peanøtter er uendelig bedre når de kombineres med sjokolade. Vi anbefaler denne tilnærmingen for å få de beste resultatene Peanøtter bør ikke brukes til å fylle parkeringsmålere. De vil ikke være effektive i denne kapasiteten. La oss være ærlige, det tar aldre. Vi anbefaler bare å kjøpe hermetisert bønner i stedet. Mer informasjon: Hovedelementet De Du kan bruke den til å pakke inn nettstedets tittel og tagline, eller en artikkel tittel og blogg kategori. For eksempel: Vi har vært luvin bønner Kategori: Mean Bønner La oss være ærlige, det tar aldre. Vi anbefaler bare å kjøpe hermetisert bønner i stedet. Mer informasjon: Header Element De W3C anbefaler bruk for elementer som forfatterinformasjon, koblinger, opphavsrettsmeldinger og så videre. For eksempel: Vi har vært luvin bønner Kategori: Mean Bønner La oss være ærlige, det tar aldre. Vi anbefaler bare å kjøpe hermetisert bønner i stedet. Mer informasjon: The Footer Element Til slutt, la oss ta en titt på vårt eksemplar på opprinnelige virksomhetswebsted og se hvordan det nå kan merkes opp ved hjelp av det vi har lært: Dette enkle eksempelet viser hvor enkelt det er å bruke en forståelse av HTML5-dokumentalgoritmen for å løse de gamle problemene rundt bruken av Hvis du fortsatt ikke er sikker på hvordan du setter opp sidene dine riktig, kan du alltid ansette en freelancer på Envato Studio for å gjøre det for deg. tags):
Den riktige bruken av peanøtter
Hvordan spise peanøtter
Overlegen peanut spise metoder
Feil bruk av peanøtter
Kokende bønner
Er kokende bønner virkelig verdt det?
koder hvor som helst flere seksjoner av innhold av like stor betydning ble vist i et forsøk på å representere dem alle i størst mulig grad. For eksempel:
Legume Literature Blog
Den riktige bruken av peanøtter
Hvordan spise peanøtter
Overlegen peanut spise metoder
Feil bruk av peanøtter
Kokende bønner
Er kokende bønner virkelig verdt det?
merket overskrift og nedbrytning av hver påfølgende overskrift ned ett nivå.
Problemer forårsaket av Pre-HTML5-dokumentoversikt
Vi har merket "Legume Literature Blog" -tittel som fungerer som etikett for hele siden, og likevel gir teksten i denne overskriften bare en generell representasjon av innholdet. Dette fortynner søkemotorenes evne til å tolke det aktuelle emnet på siden og i sin tur relevansen for søkefraser.
Det er ingen måte å skille de to artiklene på samme side som like viktige og selvstendige enheter. De er begge sett på som en del av et enkelt samlet innhold, selv om de ikke er det.
Skulle en besøkende se en av artiklene i seg selv, som det kan gjøres på en typisk blogg, må oppslaget bli omarbeidet slik at Etiketter blir brukt på artikkeltittelen i stedet for nettstedets tittel, som jeg demonstrerte med mitt eksempel på virksomhetsnettsted i forrige seksjon.
I mange tilfeller en nettstedtittel, (som pleier å spille rollen som dokumentetikett selv i HTML5), kan ikke forholde seg til innholdet på en side på en meningsfull måte. For eksempel kan jeg kjøre en blogg med tittelnavnet "Kezz Says", og det kan vise en artikkel om HTML-koding og en annen på søte valper. I dette tilfellet ville det ikke være fornuftig at nettstedets tittel tolkes som å representere noen av disse artiklene, så jeg måtte endre navnet på bloggen min. Dette kan være et problem, spesielt hvis et nettsted ønsker å merke seg med et navn som kan være minneverdig, men ikke nødvendigvis meningsfylt.
HTML5 Dokumentoversikt Algoritmen
tagget nettsted tittel kan beholde sin koder i hele nettstedet.Nøkkelaspekter av HTML5-dokumentutformingsalgoritmen
koder, så det er alltid en oversikt generert for enhver nettside, fra og med tagger og arbeider gjennom delene den er brutt inn i.
, , , ,
, , ,
, , , , ,
tags. tags.Løse de gamle dokumentoversikten
lagt til for å påkalle HTML5 Etiketter har blitt lagt inn som pakker hver artikkel, og erstatter generisk tags
opp til tags
Whackamoon Legumes!
Den riktige bruken av peanøtter
Hvordan spise peanøtter
Overlegen peanut spise metoder
Feil bruk av peanøtter
Kokende bønner
Er kokende bønner virkelig verdt det?
(artikkel) element i oversikten, og ved siden av de overskriftene for hver av våre artikler. Etiketter er spesielt brukt til å indikere "en komplett eller selvstendig sammensetning i et dokument, en side, en applikasjon eller et nettsted, og det er i prinsippet uavhengig distribuert eller gjenbrukbart, for eksempel i syndikering. Dette kan være et forum innlegg, en magasin eller avisartikkel, en bloggoppføring, en bruker-innsendt kommentar, en interaktiv widget eller gadget, eller noe annet selvstendig innhold. " (kilde: W3C)(artikkel) element ved siden av artikkelen overskriftene våre, i stedet for overskriftene som vi så før, forteller oss at disse tingene nå forekommer i oversikten:
Vi har ikke lenger fortynning av relevans fra generaliserte etiketter, da etiketten til hver artikkel er tydelig knyttet til den.
Siden er ikke lenger sett på som et enkelt innhold, fordi tilstedeværelsen av artikkeltagsangivelsene indikerer hvor siden er brutt i uavhengige seksjoner.
Fordi alle merker som brukes i oppslaget, er nå korrekt tolket, og vi trenger ikke lenger å bekymre oss om etiketter som fortynner relevansen. Vi trenger ikke lenger å bruke forskjellige koder til nettstedets tittel. Det kan forbli merket på nivå gjennom.
Fordi nettstedtitlen ikke tolkes lenger som en etikett for artikkelinnholdet, er det gratis å sette det til alt vi liker. Det må ikke lenger fungere som en "catch-all" -representant for alt innholdet på siden, så det kan være en abstrakt eller merket tittel som ikke er relatert til artikkelinnholdet i det hele tatt.
Hvorfor flere
Etiketter er riktige
koder som dokumentet krever; det er en avsnittsrute eller innholdsdel. koder i dette eksemplet, og at flere sett med koder representerer innholdet mer nøyaktig. merker bare brukt på nettstedets tittel, og merker brukt på artikkelen titler, vil omrisset av artiklene dine bli kastet ut. Tagger du faktisk sier at de er nivå to overskrifter, selv om de faktisk er nivå ett overskrifter innenfor omfanget av seksjon. merker feil innstilling til nivå tre, overskriftene på tredje nivå merket med koder og så videre. å merke en seksjon, og noen ganger vil du kanskje av presentasjonshensyn, for eksempel vise en mindre størrelse på en sidebar bloggroll-seksjon. Jeg vil imidlertid anbefale å gjøre dette bare når det gjelder mindre, ikke-artikkel / innholdsdeler av nettstedet ditt, der det ikke er en prioritet for overskriftsnivåer for å lage et dokumentoversikt som effektivt danner en innholdsfortegnelse.
HTML5 er nytt
Bruksregler
koder som kreves, via HTML5. Men det betyr ikke at de skal legges fritt i vilkårlige lokasjoner. tag bruk som kom fra gamle dokument skisser, så også er det nå nye regler basert på HTML5 dokumentet skisserer algoritmen.
koder per seksjonering av roten eller innholdsdelen. nivå overskrift mellom åpningen tag og den første innholdsdelen, for å merke det overordnede dokumentet. nivå overskrift skal brukes til å merke en innholdsdel, den skal være den første overskriften som vises i seksjonen, fordi den første overskriften alltid tolkes som delens etikett. nivå overskrift brukes til å merke et innholdsseksjon, alle andre overskrifter som brukes i den delen skal være H2 eller lavere for å lage en nøyaktig dokumentoversikt. tags. HTML5-spesifikasjonen tillater noen overskriftskode å fungere som etiketten for en seksjon, fra gjennom til . Igjen, men jeg anbefaler alltid å bruke nivåetiketter for å markere artikkelinnhold. For en seksjon etikett, bare sørg for at du følger de samme reglene som nevnt ovenfor, erstatte i hver regel med den valgte taggen.
Om Sectioning Content Element Tags
og tags. De ligner på hverandre, men med en viktig forskjell. Etiketter bør brukes der et innholdsinnhold kan tas ut av en side helt og fremdeles gir mening selv uten innhold i omgivelsene. Etiketter skal derimot brukes til innhold som er gruppert i henhold til et tema, men gir kun mening i sammenheng med innholdet som omgir det.
Etiketter er utformet for å indikere store navigasjonsblokker på en nettside, for eksempel en menylinje eller paginering. De skal ikke brukes på vanlige koblinger, bare til betydelige deler som er helt dedikert til navigering. Etiketter kan effektivt beskrives som elementet "alt annet" for innhold som ikke er artikkel, seksjon eller navigasjon. W3C foreskriver denne taggen for bruk når noe er tangentielt relatert til innholdet rundt det, men er skilt fra hovedinnholdet på siden, for eksempel sidebjørter, blogroller og så videre. og tagger besøk:
Rask Tips: Å håndtere Taglines
merker på nettstedet vårt i alle områder av våre nettsteder. Men til tross for at det er en vanlig praksis, teknisk sett Merkelapper skal ikke brukes til frittstående underposisjoner eller taglinjer.
Tagger kan brukes til en tagline hvis de ble gruppert med hovedoverskriften i et sett med tags. Imidlertid blir fjernet fra HTML5-spesifikasjonen, og bruken av den vil føre til at kode mislykkes for valideringskontroller. eller
tagger og bruk CSS for å få dem til å se ut som taglines, oppnå presentasjonsmål uten å ha negativ innvirkning på dokumentoversikten.
Ytterligere HTML5 elementer å ansette
tagger i HTML5 og hvordan det nye dokumentet beskriver algoritmen fungerer. Derfor har jeg ikke rørt noen HTML5-elementer som ikke er vurdert av dokumentet som beskriver algoritmen.De
elementet skal brukes en gang per side for å angi hovedinnholdsområdet på siden.
Whackamoon Legumes!
Den riktige bruken av peanøtter
Hvordan spise peanøtter
Overlegen peanut spise metoder
Feil bruk av peanøtter
Kokende bønner
Er kokende bønner virkelig verdt det?
De Element
elementet kan brukes i begynnelsen av en hvilken som helst delingsrot, eller innholdsdel, for å gruppere innledende innhold for den delen.
Whackamoon Legumes!
Kokende bønner
Er kokende bønner virkelig verdt det?
De
element er i utgangspunktet den inverse av element, ved at den kan brukes på slutt av hvilken som helst delingsrot, eller innholdsdel, for å gruppere tilleggsinnhold for den delen.
Whackamoon Legumes!
Kokende bønner
Er kokende bønner virkelig verdt det?
Wrapping Up
koder, og for å sikre at innholdet på websidene dine blir mer korrekt kommunisert enn noensinne.Anbefalt lesing
Anbefalte verktøy
Accentsconagua