Sådan bruger du det
- Indtast den og:title og og:description, du bruger, eller planlægger at bruge, på siden.
- Indsæt den fulde URL til og:image. Værktøjet indlæser den og viser dens faktiske pixelstørrelse.
- Tilføj sidens URL eller domæne, og sammenlign derefter forhåndsvisningerne af det store og det lille kort, og ret eventuelle advarsler.
Sådan fungerer det
Når nogen deler et link, henter de fleste sociale netværk og chat-apps siden og læser dens Open Graph-tags: og:title, og:description, og:image og og:url. Derefter bygger de et kort. Et bredt billede på ca. 1,91:1 giver normalt et stort kort med billedet øverst; et lille eller kvadratisk billede giver ofte et kompakt kort med et miniaturebillede ved siden af teksten.
Dette værktøj viser to generiske korttyper, så du kan vurdere længde og billedbeskæring. Det kontrollerer billedets naturlige størrelse, når browseren har indlæst det: under 200 × 200 px springer mange apps billedet over, under 600 × 315 px har de tendens til at bruge det lille layout, og et forhold langt fra 1,91:1 betyder beskæring. 1200 × 630 px er den generelt anbefalede størrelse, fordi den forbliver skarp på skærme med høj pixeltæthed.
Forhåndsvisningen kan ikke vise nøjagtigt, hvad en bestemt app vil vise. Apps varierer i, hvor mange linjer af titel og beskrivelse de viser, nogle ignorerer beskrivelsen, og de fleste cachelagrer en forhåndsvisning i et stykke tid efter den første deling, så ændringer i dine tags vises måske ikke med det samme. Mange platforme tilbyder deres eget debugværktøj til at opdatere cachen.
Eksempler
Et skærmbillede brugt som og:image
Et skærmbillede på 1440 × 900 har et forhold på 1,6:1. Værktøjet advarer om forholdet: I et stort kort ville toppen og bunden blive beskåret. Ved at eksportere en 1200 × 630-version undgår du overraskelser.
Et logo som det eneste billede
Et logo på 180 × 180 er under 200 × 200 px, så mange apps vil ikke vise et billede. Brug i stedet et større, bredt banner, der indeholder logoet.
Kontrol af titellængde
En og:title på 90 tegn ombrydes til tre linjer i forhåndsvisningen af det store kort. At forkorte den til ca. 60 tegn holder kortet ryddeligt i de fleste apps.
Ofte stillede spørgsmål
Hvorfor ser mit link forskelligt ud på Facebook, LinkedIn og X?
Hver platform gengiver kort med sit eget layout, egen beskæring og egne tekstgrænser, og nogle viser beskrivelsen, mens andre ikke gør. Denne forhåndsvisning er en generisk tilnærmelse, ikke en kopi af en bestemt platforms design.
Jeg har ændret og:image, men det gamle billede vises stadig. Hvorfor?
Platforme cachelagrer linkforhåndsvisninger. Brug platformens eget debugværktøj til at hente siden igen, eller vent, indtil cachen udløber. Det hjælper også at ændre billedets filnavn.
Kan jeg bruge et SVG- eller WebP-billede?
SVG understøttes ikke af de fleste platforme. WebP virker i mange apps, men ikke alle; JPG eller PNG er det sikreste valg.
Hvorfor kan værktøjet ikke indlæse mit billede?
URL'en kan kræve login, pege på en HTML-side i stedet for et billede, eller serveren kan blokere anmodninger fra andre websteder. Hvis browseren ikke kan indlæse den her, kan en social platforms crawler sandsynligvis heller ikke.
Privatliv
Tekst, du indtaster, forbliver i din browser. For at tjekke billedet henter din browser det direkte fra den URL, du indtaster (uden at sende en referrer), så serveren ser en almindelig billedanmodning. Intet sendes til TIG Tools.