SEO Playbook · Element

Diagramblokke: Tilgængelige grafer med ærlige akser

Byg en diagramblok, der afslører et reelt mønster med ærlige akser, en eksplicit pointe, kildedata og et tilgængeligt alternativ for alle onlinelæsere.

12 min read

En diagramblok er et afgrænset datavisningselement, der kombinerer en graf med dens pointe, titel, etiketter, kilde, periode og et tilgængeligt dataalternativ. Brug den, når dataenes form svarer på spørgsmålet hurtigere end en række af præcise værdier.

Illustrative supporthenvendelser per kvartal

Søjlediagram over illustrative supporthenvendelser fra Q1 til Q4Henvendelser falder fra 120 i Q1 til 72 i Q4, med mellemliggende værdier på 108 og 84.1201088472Q1Q2Q3Q4Henvendelser

Pointe: I dette illustrative datasæt falder henvendelserne hvert kvartal, fra 120 i Q1 til 72 i Q4.

Se diagramdata
Illustrative supporthenvendelsesdata
KvartalHenvendelser
Q1120
Q2108
Q384
Q472
Illustrative data oprettet for at demonstrere elementet; ikke et AmICited- eller kunderesultat.

Hvorfor dette element er vigtigt

Diagrammer udnytter visuel mønstergenkendelse. En læser kan opdage en stigning, et gab, en klynge eller en ændring i hældning, før de sammenligner de samme værdier celle for celle. Det hjælper, når mønsteret – ikke præcis opslag – er pointen. Det er også farligt: beskårne akser, ulige intervaller eller arealeffekter kan få en lille forskel til at se afgørende ud. Et diagram fortjener sin plads kun, når det reducerer anstrengelse uden at ændre evidensen.

Læserpsykologi gør den skrevne pointe essentiel. Folk husker måske en retning eller relativ størrelse lettere end en fodnote. Angiv den afgrænsede konklusion i tekst, inklusive population og periode, når det er nødvendigt. Hævd aldrig kausalitet ud fra korrelation eller en generel tendens ud fra et udvalgt interval.

Maskinekstraherbarhed kræver serienavne, etiketter, værdier, enheder, kilde, periode og konklusion som tekst. En crawler eller AI-svarmotor fortolker muligvis ikke en SVG-sti, et canvas, et skærmbillede, en hover-tilstand eller en farveligende. Blokken parrer derfor det visuelle med ordnede data til hjælpeteknologi, indeksering, verifikation og genbrug.

Element-skrivereglerne har forrang: vælg dette element, fordi et afsnits formål er at afsløre et kvantitativt mønster, ikke fordi en graf vil pynte på siden. Hvis opgaven er præcis opslag eller sammenligning punkt for punkt, så brug en tabel, selv når diagramsoftware er tilgængelig.

Hvornår skal det bruges

Brug et diagram, når læseren har brug for at se en af fire former: ændring over en ordnet sekvens, forskelle på tværs af et overskueligt sæt kategorier, fordelingen af observationer eller sammenhængen mellem to kvantitative variable. Et linjediagram kan afsløre retning over tid; et søjlediagram kan rangere kategorier; et histogram kan afsløre fordeling; og et punktdiagram kan afsløre sammenhæng og afvigere. Datasættet skal være tilstrækkeligt komplet, konsekvent målt og relevant for påstanden.

En enkel test adskiller diagram fra tabel: hvis læseren først skal bemærke et mønster, så vælg et diagram; hvis de skal finde en præcis værdi, så vælg en tabel. Hvis begge dele betyder noget, så inkluder en kompakt tabel i diagramblokken, så de to output ikke kan afvige.

Almindelige næsten-missere inkluderer:

  • To værdier: skriv en sætning eller lille sammenligning. To søjler afslører sjældent et mønster mere direkte.
  • En lang kategoriliste: brug en grupperet tabel. Tredive søjler skaber problemer med etiketter og mobilvisning.
  • Et par overskriftsmålinger: brug et statistikbånd, når tallene er uafhængige højdepunkter snarere end én serie.
  • En proces eller kronologi: brug en tidslinje, når mærker ikke kodificerer mængde.
  • En kausal påstand ud fra en sammenhæng: et punktdiagram kan vise, at to variable bevæger sig sammen; det kan ikke fastslå, at den ene forårsagede den anden.
  • En dekorativ “datahistorie”: hvis fjernelse af diagrammet ikke mister nogen konklusion, så fjern det.
  • En sammenligning med lange kvalitative kriterier: brug en sammenligningstabel , fordi kategorier som supportpolitik eller implementeringsfit ikke kan kodificeres ærligt som søjlelængde.

Hvor skal det placeres

Placer diagrammet efter det afsnit, der introducerer spørgsmålet, populationen, målet og perioden. Sæt pointen direkte før eller efter det, og forklar derefter implikationer og begrænsninger. I forskning hører hvert diagram til ved siden af sit resultat. I et casestudy skal du etablere baseline og intervention, før du viser ændring.

Hold titel, visning, forklaring, pointe, dataalternativ, kilde og noter inden for én figurramme. Fodnoter kan følge figuren, men en annonce, tilmeldingsformular eller urelateret billede må ikke afbryde den. Kilden skal være synlig uden at åbne dataalternativet.

Placer det ikke ved siden af et lige så fremtrædende diagram, en uafhængig tabel eller et statistikbånd, der gentager dets data, en pristabel, et karrusel eller en højt prioriteret handlingsopfordring. Disse parringer konkurrerer eller skaber flere sandhedskilder. Adskil datavisninger med forklaring.

Anatomi

Det mærkede skærmbillede skal identificere disse områder:

  1. Pointe: én sætning, der angiver mønsteret uden billedet.
  2. Figur-titel: en neutral beskrivelse af mål, population og periode.
  3. Plot: området, hvor position, længde eller retning kodificerer værdier.
  4. Akse og skalaer: synlige etiketter, enheder, deleger, intervaller og baseline.
  5. Serieetiketter: direkte etiketter, hvor det er muligt; ellers en forklaring, der ikke kun er farvebaseret.
  6. Annotation: en valgfri note knyttet til et datapunkt, aldrig en erstatning for metodologi.
  7. Dataalternativ: en tabel eller ordnet tekst, der indeholder de indtegnede værdier.
  8. Billedtekst og kilde: omfang, oprindelse, rapporteringsperiode og eventuel beregningsnote.

Designeksempler

Hver variant bruger todimensionelle mærker, synlige enheder, en pointe, kildedata og et tilgængeligt alternativ. Der er ingen 3D-, piktogram-, måler- eller dobbeltakse-variant, fordi dekoration og konkurrerende skalaer forvrænger sammenligning.

Linjediagram: brug til værdier målt ved ensartede ordnede intervaller, normalt tid. Manglende observationer skal fremstå som huller snarere end opdigtede forbindelser. Mere end fire serier kræver normalt at opdele diagrammet eller vælge en tabel.

Søjlediagram: brug til sammenligning eller rangering på tværs af diskrete kategorier. Start den kvantitative akse ved nul, fordi søjlelængde repræsenterer størrelse. Foretræk vandrette søjler, når etiketter er lange, og sorter efter værdi, medmindre en naturlig orden har betydning.

Punktdiagram: brug til sammenhængen mellem to kvantitative variable. Vis individuelle observationer, navngiv begge mål, oplys om eventuel tilpasset trendlinje, og undgå kausalt sprog, medmindre forskningsdesignet understøtter det.

Stablet søjlediagram: brug, når både total og sammensætning betyder noget på tværs af et lille antal grupper. Hold segmentrækkefølgen stabil og begræns stakken til fire kategorier. Hvis læsere primært har brug for at sammenligne hver komponent, brug grupperede søjler eller små multipla i stedet.

Parametre

“Kilde” nedenfor betyder det forfatterbestemte sted, hvorfra rendereren henter feltet, ikke den evidensudbyder, der citeres af diagrammet.

Grænsefladeparametre for diagramblok
NavnTypePåkrævetMin/maksStandardKilde
titleAlmindelig strengJa5–16 ord; 110 tegnIngenFørste overskrift i brødtekst
typeEnum: line, bar, scatter, stacked-barJaÉn værdiIngenAttribut
takeawayAlmindelig tekstsætningJa15–35 ordIngenBrødtekst efter første overskrift
dataOrdnede tabeldataJa2–20 punkter per serie; 1–4 serierIngenBrødtekst
x-labelAlmindelig strengBetinget1–6 ordKategori- eller periodefeltnavnAttribut
y-labelAlmindelig strengJa1–6 ord, inklusive enhedIngenAttribut
y-minTalNej; nul påkrævet for søjlerInden for det dokumenterede måleområde0 for søjletyper; beregnet for linje og punktdiagramAttribut
y-maxTalNejStørre end den største værdiRenderer-valgt delekantAttribut
sourceAlmindelig tekst med valgfri URLJa1–3 primære kilderIngenAttribut
periodDato, interval eller periodestrengJaÉn nøjagtig dækningsperiodeIngenAttribut
altAlmindelig strengJa20–60 ordIngenAttribut
show-dataBooleskNejtrue eller falsetrueAttribut

show-data=false er kun tilladt, når en tilsvarende datatabel eller komplet værdi-for-værdi-tekstalternativ allerede er programmatisk forbundet med figuren. Det er aldrig en licens til at publicere et rent visuelt diagram.

Syntaks og kodeeksempler

Alle tre notationer bevarer den samme titel, pointe, datasæt, skala, kilde, periode og alternativ tekst. Figurerne er illustrative.

Bærbar Markdown-direktiv

:::chart-block{type=bar y-label="Henvendelser" y-min=0 source="Illustrativt redaktionelt datasæt" period="2026 Q1–Q4" alt="Henvendelser falder i hvert kvartal, fra 120 i Q1 til 72 i Q4."}
## Illustrative supporthenvendelser per kvartal

Pointe: Henvendelser falder hvert kvartal, fra 120 i Q1 til 72 i Q4.

| Kvartal | Henvendelser |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

Den første overskrift kortlægges til title; pointen og den kanoniske datatabel kortlægges til brødtekstfelter.

Hugo shortcode

Hugo-adapteren bruger navngivne parametre og udleder det visuelle og tabellen fra ét brødtekstdatasæt. Denne notation specificerer den tilsigtede kortlægning.

{{< chart-block type="bar" yLabel="Henvendelser" yMin="0" source="Illustrativt redaktionelt datasæt" period="2026 Q1–Q4" alt="Henvendelser falder i hvert kvartal, fra 120 i Q1 til 72 i Q4." >}}
## Illustrative supporthenvendelser per kvartal

Pointe: Henvendelser falder hvert kvartal, fra 120 i Q1 til 72 i Q4.

| Kvartal | Henvendelser |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

WordPress-blok

<!-- wp:amicited/chart-block {"type":"bar","title":"Illustrative supporthenvendelser per kvartal","yLabel":"Henvendelser","yMin":0,"source":"Illustrativt redaktionelt datasæt","period":"2026 Q1–Q4","alt":"Henvendelser falder i hvert kvartal, fra 120 i Q1 til 72 i Q4.","takeaway":"Henvendelser falder hvert kvartal, fra 120 i Q1 til 72 i Q4."} -->
<table><thead><tr><th>Kvartal</th><th>Henvendelser</th></tr></thead><tbody><tr><th>Q1</th><td>120</td></tr><tr><th>Q2</th><td>108</td></tr><tr><th>Q3</th><td>84</td></tr><tr><th>Q4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

Blokken kan gengive SVG eller canvas, men gemt og server-gengivet output skal bevare pointen og tabellen. JavaScript kan forbedre interaktion, men må aldrig levere de eneste etiketter eller værdier.

Eksempler

God: det visuelle og ordene fortæller den samme afgrænsede historie

Pointe: I det illustrative datasæt falder den mediane løsningstid fra 18 timer i januar til 12 timer i april; diagrammet fastslår ikke hvorfor.

MånedMedian løsningstid
Januar18 timer
Februar17 timer
Marts14 timer
April12 timer

Linjediagrammet bruger jævne månedlige intervaller og en mærket “Timer”-akse fra 10 til 20. Denne oplyste ikke-nul linjeskala er passende, fordi position, ikke søjlelængde, kodificerer værdier. Tabellen viser hvert punkt, og teksten tilskriver ikke faldet en intervention.

Dårlig: grafen skaber kunstig hastværk

Et søjlediagram med titlen “Løsningstid kollapser efter lancering” viser de samme 18-, 17-, 14- og 12-timers værdier på en akse, der begynder ved 11,5. Søjlerne ser ud til at skrumpe næsten til ingenting. Januar er mærket “før”, april “efter”, mellemliggende måneder er skjult bag hover, og hverken interventionsdatoen eller en kilde vises. Rød-til-grøn farve leverer den eneste præstationsmæssige betydning.

Dette fejler, fordi søjler kræver en nul-baseline, titlen hævder kausalitet, og selektive etiketter forhindrer verifikation. Kun-hover-værdier udelukker tastatur-, berørings-, ekstraktions- og hjælpeteknologikontekster. Reparer det med en nul-baseline eller tydeligt skaleret linje, hver observation, kilde, periode, datatabel og en ikke-kausal pointe.

Schema-markup og tilgængelighed

Schema.org har ingen generel Chart- eller Graph-type. Et diagram forbliver evidens inden for en berettiget enhed på sideniveau såsom Article, Report eller Dataset. Forskning kan beskrive et reelt downloadbart datasæt med egenskaber som tidsmæssig dækning, variable, skaber og distribution. Opfind aldrig et datasæt, bedømmelse, tendens eller resultategenskab, fordi et diagram eksisterer.

Tilgængelighed kræver mere end alternativ tekst. Giv figuren en titel og billedtekst og et SVG et tilgængeligt navn og en beskrivelse. Canvas har brug for en tilsvarende DOM-repræsentation. Angiv indtegnede værdier i en tabel med ægte overskrifter, og hold pointen uden for grafikken, så den overlever udskrivning, ekstraktion og billedfejl.

Brug ikke farve som eneste serieidentifikator; tilføj direkte etiketter, linjemønstre, punktformer eller tekst. Tooltips skal være tastaturnåelige, afviselige og supplerende. Ved 200% zoom og smalle bredder skal et mærket diagramområde kunne ombrydes eller rulles uden at skabe rulning på sideniveau.

Respekter præferencer for reduceret bevægelse og undgå animeret tegning eller automatiske overgange. Hvis filtre ændrer data, annoncer tilstanden og vis aktive filtre i tekst. Et statisk diagram er ikke et tastaturmål, medmindre det har egentlige kontroller.

Skriveregler

Disse regler holder diagrammets visuelle autoritet proportional med dets evidens:

  • Skriv én pointe på 15–35 ord. Nævn retning eller sammenhæng, relevante endepunkter, population og periode, når de forhindrer tvetydighed.
  • Brug 2–20 punkter per serie og højst fire serier. Del tættere arbejde op i små multipla, en tabel eller et downloadbart datasæt.
  • Hold titler på 5–16 ord og etiketter på 1–6 ord. Titler beskriver; pointer konkluderer.
  • Brug samme enhed og måledefinition gennem en hel serie. Hvis en metode ændres, bryd linjen og forklar bruddet.
  • Start søjle- og stablet-søjle kvantitative akser ved nul. En linje- eller punktdiagramskala må kun være smallere, når grænser og enheder forbliver synlige, og valget ikke overdriver støj.
  • Brug lige visuel afstand for lige numeriske eller tidsmæssige intervaller. Placer ikke februar og december, som om de var tilstødende måneder, når mellemliggende perioder mangler.
  • Vis manglende værdier som manglende. Konverter dem aldrig til nul, forbind aldrig over dem stille, og interpoler ikke uden en angivet metode.
  • Mærk fremskrivninger, estimater, modellerede værdier og sæsonkorrigerede værdier direkte. Stil dem ikke som observerede data.
  • Undgå dobbeltakser, 3D-effekter, perspektiv, billedlig arealskalering, brudte akser, regnbuepaletter og udjævnede kurver, der antyder umålte værdier.
  • Angiv kilden, dækningsperioden, stikprøve eller kohorte, hvor relevant, og enhver transformation såsom indeksering, normalisering eller glidende gennemsnit.
  • Placer aldrig en handlingsopfordring, testimonial, reklamemærke, uunderstøttet kausal påstand eller væsentlig forbehold kun inde i billedet.
  • Udled grafen og dens tabel fra ét kanonisk datasæt. Hvis værdier ændres, opdater én gang og gengiv begge output.
  • Detaljeret metodologi og citater kan fortsætte i en nærliggende kildeblok , men diagrammet har stadig brug for en synlig kilde og periode for sig selv.

Indlægstyper, der bruger det

Feltet postTypes i front matter definerer de godkendte relationer nedenfor. Inklusion tillader et diagram, når et reelt kvantitativt mønster eksisterer; det kræver ikke, at forfattere fabrikerer en graf til hver side.

Brug af diagramblok efter registreret indlægstype
IndlægstypeBrugForetrukket placeringDiagrammet fortjener sin plads, når
Original forskningAnbefales, når det centrale resultat er kvantitativtVed siden af resultatet, efter metode og stikprøvekontekstDet afslører en tendens, fordeling, sammenligning eller sammenhæng, der understøtter undersøgelsens afgrænsede konklusion.
StatistikopsamlingValgfriEfter tal med en fælles definition og periodeDe udvalgte kilder kan sammenlignes på kompatible mål; urelaterede statistikker må ikke tvinges ind i én serie.
Benchmark-rapportAnbefalesEfter kohorte, måling og periode er defineretDet gør en fordeling eller segmentforskel tydeligere end en liste over benchmarkværdier.
CasestudyBetinget af verificerede longitudinelle dataEfter baseline og intervention; før fortolkningGentagne målinger viser ændring uden at overdrive tilskrivning eller skjule målevinduet.

QA-tjekliste

  • Læserens primære opgave er at se et mønster; præcis opslag alene ville betjenes bedre af en tabel.
  • Pointen er en hel sætning i HTML-tekst, stemmer overens med de indtegnede data og holder sig inden for evidensen.
  • Titlen navngiver målet, populationen og perioden, der er nødvendig for at forstå figuren.
  • Diagramtypen matcher den analytiske opgave: sekvens, kategorisammenligning, fordeling eller sammenhæng.
  • Søjlebaselines begynder ved nul; enhver anden skala er synlig, berettiget og ikke-vildledende.
  • Intervaller, enheder, nævnere, beregninger og manglende værdier er repræsenteret ærligt.
  • Serier er direkte mærket eller kan skelnes uden farve alene.
  • Hver væsentlig værdi er tilgængelig uden hover, JavaScript, animation eller billedfortolkning.
  • En datatabel eller komplet tekstalternativ bruger ægte overskrifter og matcher det visuelle nøjagtigt.
  • Kilden, dækningsperioden, kohorten eller stikprøven og transformationer er synlige ved siden af diagrammet.
  • Diagrammet og det tilgængelige alternativ stammer fra ét kanonisk datasæt.
  • Blokken sidder ikke ved siden af en duplikeret datavisning, konverteringsmodul eller konkurrerende højt prioriteret visning.
  • Diagrammet fungerer med tastaturinput, højkontrastindstillinger, 200% zoom, smalle skærme og reduceret bevægelse.
  • Ingen 3D-effekt, dobbeltakse, brudt akse, billedlig skalering, uunderstøttet kausal påstand eller dekorativ serie er tilbage.
  • Enhver struktureret data på sideniveau er berettiget og i overensstemmelse med den synlige evidens.
  • Den valgte indlægstype inkluderer diagramblokken i sin indholdskontrakt.

FAQ

Hvornår skal jeg bruge et diagram frem for en tabel?

Brug et diagram, når den første opgave er at se en tendens, fordeling, rangering eller sammenhæng. Brug en tabel, når læsere har brug for præcis opslag på tværs af mange felter. Når begge opgaver betyder noget, så hold en kompakt tabel inde i diagramblokken som dens tilgængelige dataalternativ.

Skal et søjlediagram starte ved nul?

Ja. Søjlelængde repræsenterer størrelse fra en baseline, så beskæring af den baseline ændrer det tilsyneladende forhold. Et linjediagram kan bruge en ikke-nul skala, når det synlige interval og enheder er eksplicitte, og den snævrere visning er analytisk nødvendig.

Er alternativ tekst nok til at gøre et diagram tilgængeligt?

Normalt ikke. Alternativ tekst bør identificere visningen og opsummere dens hovedmønster. Et diagram med flere værdier har også brug for en nærliggende datatabel eller tilsvarende tekst, der indeholder etiketter, værdier, enheder, kilde og periode.

Kan pointen kun stå i diagrammets titel?

Nej. En titel identificerer, hvad figuren viser; en pointe angiver, hvad læseren skal bemærke. Hold pointen som en hel sætning uden for grafikken, så den forbliver tilgængelig, når billedet ikke opfattes eller ekstraheres.

Opretter en diagramblok Schema.org-markup?

Nej. Brug kun gyldig markup på sideniveau såsom Article, Report eller Dataset, når siden uafhængigt kvalificerer sig. Diagrammet skaber ikke en ny schema-berettigelse eller retfærdiggør strukturerede påstande, der er fraværende i synlig evidens.

← All SEO Playbook guides

Klar til at føre det ud i livet?

Gratis tjek · 7-dages prøveperiode · intet kreditkort