Datavju
Logg innSe ditt eget resultat
Velg språk
Datavju
Logg innSe ditt eget resultat
Velg språk

Metadata for siden (Head)

Metadata beskriver en side for nettleseren og tjenester som leser HTML-en. Bruk Head for å angi tittelen på nettleserfanen, en beskrivelse og dokumentlenker, som en kanonisk URL.

Slik fungerer Head

Head lagrer elementer ved siden av sidens synlige Body. Title og Meta beskriver dokumentet. Link angir et forhold til en annen ressurs. Preview og Prerender bruker disse lagrede verdiene. En publisering inneholder verdiene fra versjonen du publiserer.

Datavju legger inn UTF-8 som tegnsett og et visningsområde som bruker enhetens bredde med startskala 1. Angi Title og beskrivelse for hver side. Title og Description under General for en Site beskriver nettstedets innstillinger og fyller ikke automatisk ut disse Head-elementene.

Angi nettlesertittelen

Title gir teksten i nettleserfanen. En synlig Heading gir overskriften folk leser på siden.

  1. Åpne siden og velg Head i Story-verktøylinjen.
  2. Hvis Head er tom, velger du Add Head Component.
  3. Åpne menyen på Head-raden og velg Add Title.
  4. Utvid Head og velg Title. Skriv Northstar lighting — Desk lamps and pendants i Text.
  5. Åpne Preview og kontroller tittelen på nettleserfanen.
Head-redigeringsverktøyet med Title, Link og Meta for Northstar-eksempelkatalogen.

Legg til en beskrivelse

Gi denne siden en egen oppsummering, slik at tjenester som leser metadataene, kan skille den fra resten av nettstedet.

  1. Åpne Head-menyen og velg Add Meta.
  2. Velg det nye Meta-elementet og Add property.
  3. Åpne Attributes og legg til Name. Skriv description.
  4. Legg til Content (attribute) og skriv Desk lamps and pendants from the synthetic Northstar catalog.
  5. Åpne Preview og kontroller dokumentets head. Du får et meta-element med name satt til description og beskrivelsen som content.

Legg til en kanonisk URL

Legg til en dokumentlenke med den fullstendige offentlige adressen du foretrekker for innholdet.

Bruk hele den offentlige adressen du vil bruke. En kanonisk lenke forteller tjenester som leser metadataene, hvilken adresse du foretrekker for innholdet. Den endrer ikke sidens sti. Konfigurer stien gjennom Page og Site.

  1. Åpne Head-menyen og velg Add Link.
  2. Velg Link-elementet. Legg til Href og skriv https://northstar.example/lighting.
  3. Legg til Rel og skriv canonical.
  4. Kontroller dokumentets head i Preview og Prerender. Begge inneholder den kanoniske lenken.

Title gir teksten i nettleserfanen, Meta gir navngitte verdier, og Link angir et forhold til en annen ressurs.

  • Text på Title: Starter tom. Skriv én beskrivende tittel for siden. Eksempel: Lighting guide — Northstar.
  • Name på Meta: Legg den til fra Attributes og skriv metadatanavnet, som description eller author.
  • Content (attribute) på Meta: Starter tom. Skriv verdien som hører til valgt Name.
  • Href på en Head Link: Starter tom. Skriv ressursens adresse. Dette er kontrollen i Head. Synlige lenker i Body bruker Hyperlink.
  • Rel på en Head Link: Starter tom. Skriv lenkeforholdet, som canonical eller stylesheet, ut fra ressursen du vil angi.
  • Andre attributter: Legg bare til attributter som passer for det aktuelle Head-elementet. Et eksternt stilark trenger for eksempel riktig Href og Rel sammen.

Legg til dokumentstiler

Bruk Add Style i Head for CSS-regler på dokumentnivå. Start med Styles-artikkelen for delt utseende som legges på utvalgte elementer.

Velg Style Type og skriv deretter Selector Name. Element Selector bruker et HTML-element, som body. Class Selector (.) bruker et klassenavn, som catalog. ID Selector (#) bruker en ID, som hero. Pseudo-class Selector (:) bruker et tilstandsnavn, som root. Pseudo-element Selector (::) bruker en generert del, som selection. Skriv navnet uten prefikset som vises ved typen.

At Rule (@) tilbyr Font Face, Keyframes og Media. At-Rule Identifier starter uten et valg. Velg typen du trenger. Legg skriftdeklarasjoner for hele dokumentet på siden. Gjenbrukbare Components inni siden holder stilene lokale for sin plassering og utelater egne font-face-regler i det genererte resultatet.

Legg til en Media-regel i Head

Bruk en Media-regel når CSS på dokumentnivå skal avhenge av en betingelse i nettleseren.

Modifier tilbyr None, only, not og and. Media Type tilbyr all, screen og print. Features starter tom. Hver betingelse har tom Feature Type og Value fra start. Tekstfelt tar en CSS-verdi, som 600px. Listefelt tilbyr de tillatte verdiene. Fjern en foreldet egenskap, betingelse eller regel med knappen for å fjerne den. Bruk responsive tilstander i en delt Style for en vanlig breddeendring på et element.

  1. Legg til en Head Style. Sett Style Type til At Rule (@) og deretter At-Rule Identifier til Media.
  2. Velg Add Condition under Media Conditions. Betingelsen starter med Modifier None, Media Type all og ingen Features.
  3. Velg Add Feature. Sett Feature Type til max-width, skriv 600px i Value og velg Done.
  4. Gå tilbake til CSS Rules og velg Add Rule. En ny regel starter som Class Selector med Selector Name newSelector og ingen deklarasjoner.
  5. Sett Selector Name til klassen som brukes av målelementet. Legg til CSS-innstillingene denne betingelsen skal endre, og velg Done.
  6. Kontroller bredder som oppfyller og ikke oppfyller betingelsen, i Preview og Prerender.

Definer nøkkelbilder for en animasjon

Definer navngitte prosenttrinn. Legg deretter animasjonen på elementet du vil animere.

Bruk knappene ved trinnet til å redigere eller slette det. Hold animasjonen kort, og kontroller at innholdet fortsatt er brukbart uten bevegelse.

  1. Legg til en Head Style med Style Type At Rule (@) og At-Rule Identifier Keyframes.
  2. Skriv Keyframes Name, for eksempel fadeIn. Navnet og Keyframes Steps starter tomme.
  3. Velg Add Step. Et nytt trinn starter på 0% uten Declarations.
  4. Rediger trinnet, skriv Percentage og legg til CSS-innstillingene for dette punktet. Sett for eksempel Opacity til 0 ved 0%.
  5. Legg til et nytt trinn ved 100% med Opacity 1. Velg Done etter at du har redigert hvert trinn.
  6. Sett Animation på målelementet til fadeIn 200ms ease-out. Kontroller deretter resultatet i Preview og Prerender.

Konfigurer en skriftkilde

Den valgte Head Link må ha Resource URL, slik at velgeren for skriftkilde kan lese filadressen.

Velgeren for skriftkilde leser Resource URL. Bruk Href for en vanlig canonical- eller stylesheet-lenke.

  1. Legg til en Head Link for skriftressursen. Legg til Resource URL under Attributes. Sett Resource Location til External og skriv URL-en til skriftfilen. Bruk Internal hvis du heller vil laste opp en tillatt skriftfil.
  2. Legg til en Head Style med Style Type At Rule (@) og At-Rule Identifier Font Face.
  3. Font Face Sources starter tom. Velg skriftlenken i Select Resource og bruk plusstegnet for å legge den til.
  4. Kontroller URL-en og velg Select Format. Formatene er OpenType Collection, Embedded OpenType, OpenType, TrueType, WOFF 1.0 og WOFF 2.0.
  5. Legg til de nødvendige skriftdeklarasjonene, inkludert familienavnet. Bruk dette navnet i Font Family på siden.
  6. Kontroller skriften i Preview. Endre en kildeadresse eller bruk Delete for å fjerne en kilde ved behov.

Legg til strukturerte skript

Et Head Script bruker konfigurerte operasjoner, som å sette en lokal variabel før siden tas i bruk.

Set Dataset Filter, Set Dataset Limit og Set Dataset Model bruker valgt Dataset og de tilhørende feltene for filter, grense eller modell. Velg operasjon før du fyller ut innstillingene. Bruk Interactions for klikk, inndata, fokus og andre brukerhendelser.

  1. Velg Add Script i Head-menyen og velg deretter Script-elementet.
  2. Bruk plusstegnet ved Properties og åpne Scripts-kategorien, som har kodeikonet.
  3. Legg til Set Variable og velg en lokal Variable. Under Set Variable Value With velger du Boolean og setter Boolean Value til True eller False.
  4. Test variabelens startverdi i Preview og Prerender.

Eksempler

Gi hver katalogside sin egen tittel, oppsummering og kanoniske adresse.

Eksempel: en katalogside

For Northstar-eksempelkatalogen setter du Title Text til Northstar lighting — Desk lamps and pendants, Meta Name til description og Content til Desk lamps and pendants from the synthetic Northstar catalog. Legg til Link Href https://northstar.example/lighting med Rel canonical. Redigeringsverktøyet, Preview og Prerender bruker de samme tre verdiene.

Eksempel: en egen veiledningsside

På Lighting guide bruker du Title Text Lighting guide — Northstar og en beskrivelse som Compare desk lamps and pendants for different rooms. Gi siden sin egen kanoniske adresse, https://northstar.example/lighting-guide. Hver side beskriver da sitt eget innhold i stedet for å gjenta katalogens tittel.

Begrensninger og vanlige feil

Metadata lagres per side og kommer med i den offentlige versjonen når du publiserer.

  • Behold én ønsket tittel og én kanonisk lenke. Fjern doble Head-elementer når du undersøker uventede metadata.
  • Bruk Href for en Head Link og Hyperlink for en synlig Link i Body.
  • Kontroller det genererte Head-innholdet etter at du endrer attributter. Head-elementer vises i dokumentets metadata i stedet for i den synlige sidedelen.
  • Publiser kontrollerte metadataendringer for å oppdatere den offentlige versjonen. Søketjenester avgjør selv om og hvordan de bruker metadataene.
  • Bruk de tilgjengelige enkle velgertypene. Universelle, etterkommerbaserte og sammensatte velgere i Head krever mer enn det støttede utvalget tilbyr. Delte Styles har egne kontroller for å velge hvilke elementer de gjelder.

Page · Site · Story · Styles · Interactions