Grund: vad module-hero är
module-hero är första visningssektionen i CCMS och sätter sidans huvudbudskap direkt med bild, titel, undertitel och primär CTA.
Den är optimerad för att bära både varumärkesintryck och konverteringshandling på ett ställe.
Hero-modulen påverkar ofta LCP mest av alla moduler, så innehåll och media här är särskilt viktiga.
Val 1: kärnnycklar och struktur
Top-level ligger i hero med nycklar som module_type, full_height, aria_label, title och subtitle.
Bakgrundsbilden använder art-direction via background_image.tall och background_image.wide.
Logotypen styrs via logo_image.*, och CTA:n via button.* med text, link/href, target och icon.
Val 2: full-height, align och bildvarianter
full_height=true lägger på klassen full-height och ändrar både höjd och typografisk skala via CSS-variabler.
Builden normaliserar design.align_hero och design.align_hero_short till left eller center, samt genererar motsvarande item-align-värden.
tall/wide ger orienteringsstyrd art-direction i <picture>, där portrait/landscape får egna bildkällor.
Val 3: CTA-länk, auto-href och auto-svg
Hero-knappen använder hero.button.auto_href och hero.button.auto_svg som builden räknar ut från button.link, button.href och button.icon.
Om icon saknas kan builden välja en standardikon baserat på länktype (tel, mailto, intern sektion eller extern länk).
Hero-template renderar dock inte hero.button.aria_label i nuläget, så den nyckeln påverkar inte HTML-utdata utan template-ändring.
Val 4: critical CSS, preload och tracking
Builden väljer hero-del av critical CSS beroende på full_height och skriver ut den i hero.auto_critical_css samt global critical-css-block.
I <head> preloaddas portrait/landscape hero-bilder som AVIF-källor för snabbare första rendering.
Hero-knappen har track-clicks och går via generisk länktracking. För tel:/mailto: kan desktop-flödet först scrolla till module-contact i stället för direkt öppning.
Val 5: SEO, schema och AI-optimering
Hero-copy ska vara kort och entydig: tydlig positionering i title, konkret nyttosats i subtitle och exakt handling i knappen.
Vid schema kan ImageObject för hero/media kombineras med en action-typ som matchar CTA:n, till exempel ScheduleAction eller SubscribeAction.
Synlig CTA-intention och schema-intention måste matcha, annars blir signalerna svagare för både sök och AI.