Share
Of u nu een webmaster of een webontwerper bent, er is een vraag die u waarschijnlijk in de loop van de jaren vaak heeft gesteld of beantwoord. Die vraag is: "Hoeveel tags kan ik per pagina gebruiken en hoe moet ik ze precies implementeren? "
Er zijn over het algemeen twee redenen waarom deze vraag wordt gesteld. De eerste en meest voorkomende is voor SEO-doeleinden; ervoor zorgen dat de inhoud op de best mogelijke manier wordt geformatteerd om zoekmachine-indexering te ondersteunen. De tweede is technische correctheid; ervoor te zorgen dat de opmaak wordt geschreven in overeenstemming met de toepasselijke W3C-specificatie.
Met de komst van HTML5 is het antwoord op deze vraag aanzienlijk veranderd in zowel SEO als technische aspecten. Het is nu niet alleen mogelijk om meerdere te hebben niveaukoppen per webpagina die logisch zijn voor zoekmachines, maar in de meeste gevallen is het eigenlijk de aanbevolen cursus.
Omdat de HTML5-specificatie echter nog niet overal wordt begrepen, is er nog steeds veel advies rondzwerven, waarvan sommige zelfs zeer recent zijn geschreven, op basis van de regels van het pre-HTML5-webontwerp.
In deze tutorial gaan we enkele misvattingen opruimen. We gaan uitgebreid in op wat HTML5 betekent gebruik van tags, evenals hoe u kunt profiteren van de verbeteringen die nu beschikbaar zijn om webpagina's te maken die semantischer rijk en gestructureerd zijn dan ooit tevoren.
Lange tijd werd het beschouwd als een van de belangrijkste regels van HTML en SEO dat elke afzonderlijke pagina van een site er een zou moeten hebben niveaukoppelingen en alleen één. Bovendien voorgeschreven de regel dat dit enkelvoud kop moet het primaire onderwerp van de pagina aanduiden.
Deze regel werd over het algemeen gevolgd met als doel zoekmachines te helpen het primaire onderwerp van elke pagina beter te begrijpen, zodat ze de relevantie ervan voor verschillende zoektermen konden bepalen, de nauwkeurigheid van zoekmachines konden verbeteren en daarmee rankings voor goed gemaakte sites konden verbeteren.
Laten we een voorbeeld van een pre-HTML5-bedrijfswebsite overwegen. In deze voorbeeldsite wordt de bedrijfsnaam weergegeven in het kopgedeelte op alle pagina's, de startpagina bevat een beschrijving van het bedrijf en in een ander deel van de site worden expertartikelen gepubliceerd.
Volg de "Single Tag "regel, de startpagina van deze website heeft tags toegepast op de naam van het bedrijf in het kopgedeelte, waarmee wordt aangegeven dat het bedrijf zelf het primaire onderwerp van die pagina is.
In een artikel dat elders op dezelfde website is gepubliceerd, tags worden verwijderd uit de bedrijfsnaam in de kop en in plaats daarvan toegepast op de titel van het artikel. Dit wordt gedaan omdat de titel van het artikel een representatiever label geeft voor het primaire onderwerp van de pagina. Dit is nu de inhoud van het artikel in tegenstelling tot de beschrijving van het bedrijf op de startpagina..
Een pre-HTML5-versie van deze website zou daarom als volgt zijn gemarkeerd:
Ondanks de jarenlange zware focus op tags, ze waren nooit een element dat afzonderlijk opereerde, onafhankelijk van de rest van het document. Er is een reden achter het belang van zorgvuldige headingtagplaatsing in zowel de HTML5- als pre-HTML5-tijdperken, en dat is het genereren van documentomtrekken.
Documentcontouren zijn vergelijkbaar met een inhoudsopgave voor een website. Ze worden automatisch gegenereerd op basis van de markup op een bepaalde webpagina.
Voorafgaand aan HTML5 werden documentcontouren gegenereerd op basis van uw gebruik van heading-tags door naar . Elk gebruik van een kop zou het begin van een nieuwe sectie inhoud betekenen.
Neem bijvoorbeeld de volgende html en noteer de plaatsing van , en tags, die het overzicht van het document bepalen:
Pre-HTML5 markup voorbeeld Het juiste gebruik van pinda's
Hoe pinda's te eten
Pinda's kunnen met zout worden gegeten.
Dit is een acceptabel gebruik van pinda's.
Superieure pinda-voedingsmethoden
Pinda's zijn oneindig veel beter in combinatie met chocolade.
We raden deze aanpak aan voor de beste resultaten
Onjuiste toepassing van pinda's
Pinda's mogen niet worden gebruikt om parkeermeters te vullen.
Ze zullen in deze hoedanigheid niet effectief zijn.
Pre-HTML5 zou de bovenstaande opmaak als volgt een documentoverzicht genereren:
De eerste element wordt beschouwd als het label voor het hele document. De volgende koppen worden beschouwd als de labels voor secties van inhoud binnen dat document, vormen een boom eronder.
Het bovenstaande voorbeeld is eenvoudig genoeg, maar in de wilde webpagina's is dit zelden eenvoudig. Wanneer we een meer complexe inhoudspresentatie nodig hebben, komen we het grote probleem tegen met pre-HTML5-markeringen en de reden waarom het voorheen nodig was om er slechts één te gebruiken niveaukoppel per pagina.
In het bovenstaande voorbeeld hebben we een enkel onderwerp dat wordt besproken: "Het juiste gebruik van pinda's". Maar wat als dit onderwerp wordt besproken op een pagina met meerdere artikelen van even groot belang, zoals je bijvoorbeeld op een blog zou kunnen zien?
Neem deze html met een tweede artikel weergegeven, (elk artikel is ingepakt Pinda's kunnen met zout worden gegeten. Dit is een acceptabel gebruik van pinda's. Pinda's zijn oneindig veel beter in combinatie met chocolade. We raden deze aanpak aan voor de beste resultaten Pinda's mogen niet worden gebruikt om parkeermeters te vullen. Ze zullen in deze hoedanigheid niet effectief zijn. Laten we eerlijk zijn, het duurt eeuwen. We raden u aan in plaats daarvan ingeblikte bonen te kopen. Pre-HTML5 zou deze opmaak de volgende documentomtrek hebben gegenereerd: Nu, hoewel er twee artikelen van even groot belang op de pagina staan, wordt de kop van het eerste artikel 'Het juiste gebruik van pinda's' nog steeds geïnterpreteerd als het label dat het hele document vertegenwoordigt, eenvoudig omdat het de eerste is die je tegenkwam. Dit zou dus aangeven dat het hele onderwerp van de pagina "Het juiste gebruik van pinda's" is, hoewel het tweede artikel over een heel ander onderwerp gaat. De typische manier om dit te bestrijden was om een catch-all rubriek te creëren met Pinda's kunnen met zout worden gegeten. Dit is een acceptabel gebruik van pinda's. Pinda's zijn oneindig veel beter in combinatie met chocolade. We raden deze aanpak aan voor de beste resultaten Pinda's mogen niet worden gebruikt om parkeermeters te vullen. Ze zullen in deze hoedanigheid niet effectief zijn. Laten we eerlijk zijn, het duurt eeuwen. We raden u aan in plaats daarvan ingeblikte bonen te kopen. Let op de toevoeging van de gegeneraliseerde Het volgende documentoverzicht zou nu worden gegenereerd: Dit documentoverzicht, hoewel het de beste is die kan worden gedaan vóór HTML5, biedt enkele belangrijke problemen: Hier komt HTML5 langs om de dag te redden en elk van deze problemen op te lossen. Als u elk van de hierboven beschreven problemen in overweging neemt, hebben ze allemaal een algemene en enigszins eenvoudige root: De aanname dat elke webpagina een enkelvoudig document is met een enkelvoudig onderwerp dat alleen een enkelvoudig label vereist. De even eenvoudige oplossing voor deze problemen zou komen van de mogelijkheid om aan te geven of een webpagina discrete secties had, mogelijk met meerdere onderwerpen met elk hun eigen betekenisvolle etiket. Als het mogelijk zou zijn om te specificeren dat elk artikel op een pagina gescheiden was, zou dit het mogelijk maken om ze te labelen met zinvolle koppen die de inhoud accuraat weergeven, en ze elk even belangrijk gewicht te geven. Als het mogelijk was om duidelijk te maken wanneer een sitetitel niet representatief was voor de inhoud van de pagina, zou het probleem van het afzwakken van relevantie worden opgelost. Met een duidelijke indicatie in plaats van het verschil tussen de titel van de site, artikelen en titels van artikelen, zou het niet langer nodig zijn om de opmaak van het ene gebied naar het andere te veranderen. EEN En omdat het duidelijk zou worden als de titel van de site niet de inhoud van het artikel op de pagina zou weergeven, zou het mogelijk zijn om het op om het even welk punt in te stellen, ongeacht hoe abstract. HTML5 maakt al deze dingen mogelijk door de introductie van zijn semantische elementen en het HTML5 documentoverzichtsalgoritme. Hoewel de pre-HTML5-documentomtrek alleen op headingtags is gebaseerd, gebruikt het algoritme van het HTML5-documentoverzicht de volgende hoofdaspecten: Het is relatief eenvoudig om te begrijpen hoe deze aspecten van HTML5 worden gebruikt, en het proces verloopt meestal als volgt: Er zijn nog veel meer aspecten van het HTML5 documentoverzichtsalgoritme. Uitgebreide informatie hierover is beschikbaar op W3C. Met alleen de bovenstaande aspecten kunnen we echter alle problemen oplossen die zijn beschreven in het vorige gedeelte van deze zelfstudie. Laten we nog een keer kijken naar onze "Legume Literature Blog", omdat deze kan worden gemarkeerd met HTML5. De volgende eenvoudige wijzigingen zijn aangebracht: Pinda's kunnen met zout worden gegeten. Dit is een acceptabel gebruik van pinda's. Pinda's zijn oneindig veel beter in combinatie met chocolade. We raden deze aanpak aan voor de beste resultaten Pinda's mogen niet worden gebruikt om parkeermeters te vullen. Ze zullen in deze hoedanigheid niet effectief zijn. Laten we eerlijk zijn, het duurt eeuwen. We raden u aan in plaats daarvan ingeblikte bonen te kopen. Nu zou het algoritme van het HTML5 documentoverzicht ons het volgende geven: Het eerste dat opvalt, is het uiterlijk van de Merk op dat in HTML5, Het uiterlijk van de Dit betekent dat alle problemen die we eerder in deze tutorial hebben geschetst, meteen zijn opgelost: U kunt nu ook uit het HTML5-documentoverzicht zien dat door onze markeringen is gegenereerd, dat het prima is om er zoveel te gebruiken U kunt ook in dit voorbeeld zien hoe het minder correct zou zijn om slechts één set te gebruiken Als je het nog had Dit komt omdat door het markeren van uw artikelkoppen De subniveaus van het tweede niveau van uw artikelen moeten op hun beurt worden gemarkeerd met Het is toegestaan door de HTML5-specificatie om koppen van lager niveau te gebruiken dan Het beste wat u in alle gevallen kunt doen, is de inhoud zorgvuldig te bekijken en te bepalen hoe u deze het beste kunt segmenteren en labelen op basis van wat u nu weet over het HTML5-document dat het algoritme schetst. Ja het is waar. U kunt nu zoveel sets gebruiken Net zoals er regels waren van Hier zijn ze in een oogopslag: Zoals ik hierboven al zei, zijn sectielabels niet absoluut hebben zijn Maar als u besluit om een andere tag te gebruiken dan Er zijn slechts vier sets elementtags die u kunt gebruiken om contentsecties in uw webpagina aan te duiden, maar ze kunnen een beetje lastig zijn om eerst in gedachten te zijn. Zij zijn: De twee die je waarschijnlijk het meest zult gebruiken zijn Neem voor gedetailleerde voorbeelden over het gebruik van deze tags even de tijd om deze W3C-pagina's te bekijken: Voor meer informatie over We weten nu dat we dit in HTML5 graag kunnen gebruiken W3C heeft dit te zeggen: h1-h6-elementen mogen niet worden gebruikt om subkoppen, ondertitels, alternatieve titels en slogans op te maken, tenzij ze bedoeld zijn als kop voor een nieuwe sectie of subsectie. De reden hiervoor is dat in de HTML5-documentomtrek altijd een headingtag wordt geïnterpreteerd als het begin van een nieuwe sectie met inhoud, ongeacht of het segmenteren van inhoudstags hier omheen is geplaatst of niet. Voor een tijdje was er een work-around om dit waarbij Dus de beste manier om met taglines om te gaan, is gewoon om te gebruiken In deze zelfstudie hebben we ons geconcentreerd Ik zou echter nalatig zijn als ik u niet in de juiste richting wees op enkele van de meest waardevolle HTML5-tags die u in uw opmaak kunt gebruiken om deze nog semantischer rijk te maken. De Als u een groep artikelen weergeeft, worden al die artikelen omgeslagen. Bijvoorbeeld: Pinda's kunnen met zout worden gegeten. Dit is een acceptabel gebruik van pinda's. Pinda's zijn oneindig veel beter in combinatie met chocolade. We raden deze aanpak aan voor de beste resultaten Pinda's mogen niet worden gebruikt om parkeermeters te vullen. Ze zullen in deze hoedanigheid niet effectief zijn. Laten we eerlijk zijn, het duurt eeuwen. We raden u aan in plaats daarvan ingeblikte bonen te kopen. Meer informatie: het belangrijkste element De Je zou het kunnen gebruiken om de titel en de slogan van je site in te pakken, of een titel van een artikel en een blogcategorie. Bijvoorbeeld: We zijn luvinbonen geweest Categorie: Bonen Laten we eerlijk zijn, het duurt eeuwen. We raden u aan in plaats daarvan ingeblikte bonen te kopen. Meer informatie: het headerelement De W3C beveelt het gebruik aan voor items zoals auteursinformatie, koppelingen, copyright-berichten, enzovoort. Bijvoorbeeld: We zijn luvinbonen geweest Categorie: Bonen Laten we eerlijk zijn, het duurt eeuwen. We raden u aan in plaats daarvan ingeblikte bonen te kopen. Meer informatie: het voettekstelement Laten we tot slot een kijkje nemen naar ons voorbeeld in de originele zakelijke website en bekijken hoe het nu kan worden gemarkeerd met wat we hebben geleerd: -tags):
Het juiste gebruik van pinda's
Hoe pinda's te eten
Superieure pinda-voedingsmethoden
Onjuiste toepassing van pinda's
Kokende bonen
Is koken bonen echt de moeite waard?
labels waar meerdere delen van inhoud van gelijk belang werden weergegeven, in een poging om ze allemaal zo goed mogelijk weer te geven. Bijvoorbeeld:
Legume Literatuur Blog
Het juiste gebruik van pinda's
Hoe pinda's te eten
Superieure pinda-voedingsmethoden
Onjuiste toepassing van pinda's
Kokende bonen
Is koken bonen echt de moeite waard?
getagde kop en de degradatie van elke volgende kop een niveau omlaag.
Problemen veroorzaakt door documentomrekeningen van Pre-HTML5
We hebben de heeft de titel "Legume Literature Blog" getagd als het label voor de hele pagina en toch geeft de tekst van deze kop slechts een algemene weergave van de inhoud. Dit verwatert het vermogen van zoekmachines om het eigenlijke onderwerp op de pagina te interpreteren en daarmee de relevantie ervan voor zoektermen.
Er is geen manier om de twee artikelen op dezelfde pagina te onderscheiden als even belangrijke en op zichzelf staande entiteiten. Ze worden allebei gezien als onderdeel van een enkele algemene inhoud, ook al zijn ze dat niet.
Als een bezoeker een van de artikelen zelf bekijkt, zoals op een standaardblog, moet de opmaak opnieuw worden bewerkt, zodat de tags worden toegepast op de titel van het artikel in plaats van de titel van de site, zoals ik heb aangetoond met mijn zakelijke voorbeeldwebsite in het vorige gedeelte.
In veel gevallen heeft een sitetitel (die de neiging heeft om zelfs in HTML5 de rol van documentlabel te spelen) mogelijk niet op een zinvolle manier betrekking op de inhoud van een pagina. Ik kan bijvoorbeeld een blog uitvoeren met de sitetitel 'Kezz Says' en er kan een artikel over HTML-codering worden weergegeven en een ander over schattige puppy's. In dit geval is het niet logisch dat de sitetitel wordt geïnterpreteerd als een van deze artikelen, dus ik zou de naam van mijn blog moeten wijzigen. Dit kan een probleem zijn, vooral als een site zichzelf wil markeren met een naam die misschien gedenkwaardig is, maar niet noodzakelijkerwijs zinvol.
Het HTML5 documentoverzicht-algoritme
getagde sitetitel zou kunnen behouden tags op de hele site.Sleutelaspecten van het HTML5 document dat het algoritme schetst
tags, dus er is altijd een overzicht gegenereerd voor elke webpagina, te beginnen met de tags en werk door de secties waarin het is ingebroken.
, , , ,
, , ,
, , , , ,
labels. labels.Oplossen van de problemen met de oude documentomtrek
toegevoegd om HTML5 aan te roepen Aan elk artikel zijn tags toegevoegd, die de generieke vervangen labels
tot labels
Whackamoon peulvruchten!
Het juiste gebruik van pinda's
Hoe pinda's te eten
Superieure pinda-voedingsmethoden
Onjuiste toepassing van pinda's
Kokende bonen
Is koken bonen echt de moeite waard?
(artikel) element in het overzicht, en daarnaast de kopjes voor elk van onze artikelen. tags worden specifiek gebruikt om 'een volledige of op zichzelf staande samenstelling in een document, pagina, applicatie of site aan te geven en die in principe onafhankelijk distribueerbaar of herbruikbaar is, bijvoorbeeld in syndicatie. Dit kan een forumpost zijn, een een tijdschrift- of krantenartikel, een blogbericht, een door de gebruiker ingediend commentaar, een interactieve widget of gadget, of een ander onafhankelijk item. " (bron: W3C)(artikel) element naast de kopjes van ons artikel, in plaats van de heading-tags zoals we eerder zagen, vertelt ons dat deze dingen nu in de outline voorkomen:
We hebben niet langer een verdunning van de relevantie van gegeneraliseerde labels, omdat het label van elk artikel er duidelijk mee geassocieerd is.
De pagina wordt niet langer gezien als één enkel stukje inhoud, omdat de aanwezigheid van de artikellabels aangeeft waar de pagina is opgedeeld in onafhankelijke secties.
Omdat alle tags die in de markup worden gebruikt, worden nu correct geïnterpreteerd en we hoeven ons niet langer zorgen te maken over labels die de relevantie verwateren, we hoeven niet langer verschillende tags toe te passen op de sitetitel - het kan gelabeld blijven bij niveau overal.
Omdat de sitetitel niet langer wordt geïnterpreteerd als een label voor de artikelinhoud, kunnen we deze instellen op alles wat we leuk vinden. Het hoeft niet langer als een "catch-all" -vertegenwoordiger voor alle inhoud op de pagina te fungeren, dus het kan een abstracte of gebrandmerkte titel zijn die helemaal niet gerelateerd is aan de inhoud van het artikel.
Waarom Multiple
Tags zijn correct
tags zoals uw document vraagt; dat is er één per sectie root of inhoud sectie. tags in dit voorbeeld en die meerdere sets van tags geven de inhoud nauwkeuriger weer. tags die alleen op de sitetitel zijn toegepast, en tags toegepast op uw artikeltitels, de omtrek van uw artikelen zou worden weggegooid. tags die je effectief zegt, dat ze op niveau twee staan, ook al zijn het eigenlijk niveau één rubrieken binnen de reikwijdte van de sectie. tags zetten ze verkeerd in op niveau drie, de koppen van het derde niveau zijn gemarkeerd met tags enzovoort. om een sectie te labelen en soms wilt u dit om presentatieredenen, zoals het weergeven van een kop van een kleinere omvang in een zijbalk-blogroll-sectie. Ik zou echter aanbevelen dit alleen te doen in het geval van kleine, niet-artikel / inhoud gedeelten van uw site, waar het geen prioriteit is voor koppeniveaus om een documentoverzicht te maken dat effectief een inhoudsopgave vormt.
HTML5's Nieuw
Gebruiksregels
tags zoals vereist, via HTML5. Maar dat betekent niet dat ze op willekeurige locaties vrijelijk moeten worden toegevoegd. taggebruik dat afkomstig was van oude documentomtrekken, dus ook zijn er nu nieuwe regels gebaseerd op het HTML5-document dat het algoritme schetst.
tags per sectie root of inhoud sectie. niveau kop tussen de opening tag en de eerste contentsectie, om het algehele document te labelen. niveaukop moet worden gebruikt om een inhoudsgedeelte te labelen, dit moet de eerste kop zijn die in de sectie verschijnt, omdat de eerste kop altijd wordt geïnterpreteerd als het sectielabel. niveaukop wordt gebruikt om een inhoudsgedeelte te labelen, alle andere koppen in die sectie moeten H2 of lager zijn om een nauwkeurig documentoverzicht te maken. -tags. Met de HTML5-specificatie kan elke headingtag fungeren als label voor een sectie, uit door naar . Nogmaals, ik raad altijd aan om te gebruiken niveau-tags om de inhoud van het artikel te markeren. Zorg er voor een sectielabel voor dat u dezelfde regels volgt als hierboven vermeld en vervangt in elke regel met uw gekozen tag.
Informatie over het segmenteren van inhoudselementtags
en -tags. Ze lijken op elkaar, maar met een belangrijk onderscheid. tags moeten worden gebruikt waar een deel van de inhoud volledig uit een pagina kan worden gehaald en nog steeds logisch is op zichzelf zonder omringende inhoud. tags moeten daarentegen worden gebruikt voor inhoud die is gegroepeerd op basis van een thema, maar is alleen zinvol in de context van de inhoud eromheen.
tags zijn ontworpen om belangrijke navigatieblokken op een webpagina aan te geven, zoals een menubalk of paginering. Ze moeten niet worden toegepast op reguliere links, alleen op belangrijke secties die volledig zijn gewijd aan navigatie. tags kunnen effectief worden omschreven als het element 'al het andere' voor inhoud die geen artikel, sectie of navigatie is. W3C schrijft deze tag voor gebruik voor wanneer iets tangentieel gerelateerd is aan de inhoud er omheen, maar staat los van de hoofdinhoud van de pagina, zoals zijbalken, blogrolls enzovoort. en tags bezoek:
Snelle tip: omgaan met taglines
tags op onze sitetitels op elk gebied van onze sites. Echter, ondanks dat het een gangbare praktijk is, technisch gesproken tags mogen niet worden gebruikt voor zelfstandige subkoppen of taglines.
tags kunnen worden gebruikt voor een slogan als ze zijn gegroepeerd met de hoofdkop binnen een reeks -tags. echter, de wordt verwijderd uit de HTML5-specificatie en het gebruik ervan zorgt ervoor dat de validatiecontroles van de code mislukken. of
markeer en pas CSS toe om ze op sleutellijnen te laten lijken, om uw presentatiedoel te bereiken zonder uw documentoverzicht negatief te beïnvloeden.
Verdere HTML5-elementen om te gebruiken
tags in HTML5 en hoe het nieuwe document dat het algoritme schetst, werkt. Om die reden heb ik geen HTML5-elementen aangeraakt die niet zijn beoordeeld door het algoritme voor het schetsen van het document.De
element moet één keer per pagina worden gebruikt om het hoofdinhoudsgebied van die pagina aan te geven.
Whackamoon peulvruchten!
Het juiste gebruik van pinda's
Hoe pinda's te eten
Superieure pinda-voedingsmethoden
Onjuiste toepassing van pinda's
Kokende bonen
Is koken bonen echt de moeite waard?
De Element
element kan worden gebruikt aan het begin van een sectie root, of inhoud sectie, om inleidende inhoud voor die sectie te groeperen.
Whackamoon peulvruchten!
Kokende bonen
Is koken bonen echt de moeite waard?
De
element is eigenlijk het omgekeerde van de element, in zoverre dat het kan worden gebruikt in de einde van een sectie root of content sectie, om aanvullende inhoud voor die sectie te groeperen.
Whackamoon peulvruchten!
Kokende bonen
Is koken bonen echt de moeite waard?
Afsluiten
Accentsconagua