Softonic

Open Graph-förhandsvisning

Steg 1 / 2
Nästa

Skriv in titel, beskrivning, webbplatsnamn, sidans URL och bildens URL, så renderar det här verktyget ett Facebook- och X (Twitter)-delningskort live som uppdateras vid varje tangenttryckning. Det är en designlekplats för dina Open Graph-taggar: ingenting hämtas eller publiceras, så du kan öva in rubrikens längd och bildens beskärning tills kortet ser rätt ut, och sedan föra över texten till dina riktiga og:-taggar.

Så byggs förhandsvisningen upp

  1. 1

    Skriv in kortets fält

    Titel, webbplatsnamn, beskrivning, sidans URL och bildens URL. Varje fält motsvarar en og:-tagg.

  2. 2

    Se korten uppdateras

    Facebook- och X-modellerna renderas om medan du skriver, med varje plattforms verkliga layout och avkortning.

  3. 3

    Lägg till en bild-URL

    Klistra in en absolut https-bildadress för att se beskärningen; lämna den tom så visar Facebook-kortet en platshållare.

  4. 4

    Kopiera in i dina og:-taggar

    När kortet läses väl för du över samma titel, beskrivning och bild till din sidas metataggar.

Vad varje fält blir

Fält Open Graph-tagg Visas i kortet
Titel og:title Fet rubrik, avkortad till en rad
Beskrivning og:description Grå undertitel, begränsad till två rader
Webbplatsnamn og:site_name Liten etikett ovanför Facebook-rubriken
URL og:url Domänen visas; värden styr den
Bild-URL og:image Beskuren till 1.91:1 på båda modellkorten

Verktyget läser ut värden ur URL:en du skriver, så https://blog.example.com/post visar blog.example.com på kortet.

De två korten och hur de skiljer sig

  • Facebook visar bilden beskuren till 1.91:1, sedan domänen i kapitäler, den feta titeln på en rad och beskrivningen på upp till två rader. Utan en bild-URL renderas en grå platshållare, vilket är den enskilt vanligaste orsaken till en platt delning utan bild ute i verkligheten.
  • X (Twitter) visar ett rundat summary_large_image-kort: bilden i en 2:1-beskärning, domänen, titeln och beskrivningen under.

Få texten att passa

  • Titel: sikta på 60 till 70 tecken. Facebook kapar runt 88 och X runt 70, så en titel inom 70 tecken förblir hel överallt.
  • Beskrivning: håll den under ungefär 160 tecken; kortet begränsar till två rader och resten kastas.
  • Bild: designa i 1200 x 630 px så att beskärningen 1.91:1 blir ren, och lägg den på en absolut https://-URL. En relativ sökväg laddas inte när taggarna väl är i drift.
  • Webbplatsnamn: kort och enbart varumärke, ingen slogan. Det sitter ovanför rubriken som en etikett.

Checklista för publiceringsdagen

  • [ ] Titel under 70 tecken
  • [ ] Beskrivning under 160 tecken
  • [ ] Bild-URL är absolut (https, inte // eller en relativ sökväg)
  • [ ] Bild designad i 1200 x 630 px, JPG eller PNG
  • [ ] URL matchar den canonical du kommer att publicera
  • [ ] Texten kopierad till de riktiga og:-taggarna och sedan verifierad med en kontroll

Vanliga frågor

Nej. Du skriver in kortets fält för hand och verktyget skissar hur de skulle se ut. Det är en designlekplats, inte en skrapare, så det fungerar även innan sidan är online. För att läsa taggarna som redan finns på en sida klistrar du i stället in den sidans HTML i Open Graph-kontrollen.

Ett Facebook-kort och ett X (Twitter)-kort med stor bild. De använder samma Open Graph-värden, så ett kort som läses väl här är en bra fingervisning för LinkedIn, Slack, Discord och andra appar som fäller ut från samma og:-taggar, var och en med lite olika gränser.

För att bildfältet är tomt, eller för att URL:en du klistrade in inte är en fungerande absolut https-adress. Lägg till en fullständig https-bild-URL så syns beskärningen direkt. När den går live håller du filen under 5 MB och serverar den med en publik innehållstyp image/*.

Varje plattform kapar vid en olika punkt (Facebook nära 88 tecken, X nära 70), och modellkortet speglar det. Korta titeln till 60 till 70 tecken så förblir den hel på alla plattformar.

Relaterade verktyg

Metabeskrivning – längdkontroll

Mät en metabeskrivning i tecken och uppskattade pixlar, jämför redaktionella riktvärden och granska layoutexempel för dator och mobil.

Kontroll av HTTP-säkerhetsrubriker

Klistra in HTTP-svarsrubriker och granska HSTS, CSP, ramskydd, MIME-, referrer- och cross-origin-policyer lokalt i webbläsaren.

Extraherare för externa länkar

Klistra in rå HTML, ange valfritt en bas-URL och få en ren lista utan dubbletter över alla externa http/https-länkar i koden för länkgranskningar och SEO-granskningar.

FAQ-schemagenerator

Generera FAQPage-markup i JSON-LD från dina fråge- och svarspar så att sidan kan kvalificera sig för Googles rika resultat och svarsrutor.

Google SERP-simulator

Förhandsgranska en ungefärlig Google-liknande sökträff med teckengränser för mobil och dator. Utkastet stannar i den här webbläsarsessionen.

Kanonisk taggtaggar

Generera en giltig rel=canonical-länktag för valfri URL. Inkluderar URL-validering och vanliga misstag att undvika.

Verktyget finns på andra språk