OG & Twitter Card Generator – Meta Tag Bygger, Auditør & Forhåndsvisning
Byg klar-til-indsættelse Open Graph og Twitter Card <meta> tags fra en formular, eller indsæt en eksisterende <head> for at auditere den for manglende tags, titel-/beskrivelseslængde og twitter:card gyldighed – og forhåndsvis derefter begge i autentisk genskabte Twitter/X-, Facebook-, LinkedIn- og Discord-linkkort-attrapper.
🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.
Resultat
Open Graph og Twitter Card meta tags bestemmer, hvordan et link ser ud i det øjeblik, det indsættes i Slack, iMessage, et tweet eller en Discord-kanal – en titel, beskrivelse og billede valgt af sidens egen <head>, ikke af hvad platformen tilfældigvis scraper fra den synlige brødtekst. Dette værktøj er både en bygger og en auditør, ikke en generisk skabelonudfylder. I BUILD-tilstand udfylder du en titel, beskrivelse, billed-URL, kanonisk URL, indholdstype og Twitter-korttype, og det sammensætter den præcise <meta property="og:..."> og <meta name="twitter:..."> tag-blok, klar til at indsætte i din sides <head>, og springer ethvert felt over, du efterlader tomt, i stedet for at udsende tomme tags med blankt indhold.
I AUDIT-tilstand indsætter du din eksisterende <head>-markup eller en hel sides HTML, og værktøjet analyserer den med browserens indbyggede DOMParser for at udtrække alle allerede tilstedeværende og: og twitter: meta tags og kører derefter de kontroller, der faktisk betyder noget: de fire almindeligt påkrævede tags (og:title, og:description, og:image, og:url) markeres, hvis de mangler; og:title måles i forhold til punktet omkring 60 tegn, hvor nogle platforme begynder at afkorte den, og punktet omkring 90 tegn, hvor de fleste platforme vil gøre det; og:description måles i forhold til intervallet omkring 155-200 tegn, som de fleste platforme tillader, før de skærer den af; twitter:card kontrolleres i forhold til de reelle fire værdier, som Twitter's Card validator accepterer – summary, summary_large_image, app, player – og markeres, hvis det er noget andet; og duplikerede tags (den samme egenskab angivet to gange, en overraskende almindelig kopi-indsæt-fejl) påpeges ved navn.
Billeddimensioner får en ærlig behandling: dette værktøj kan ikke verificere dit billedes faktiske pixelstørrelse uden at hente det, og det gør det bevidst aldrig, i overensstemmelse med dette sites politik om ingen eksterne forespørgsler. Hvis din HTML allerede angiver og:image:width og og:image:height, kontrolleres disse angivne tal i forhold til det bredt anbefalede minimum på 1200×630; hvis ikke, får du en klar vejledende note i stedet for en opdigtet bestået eller fejlet. Begge tilstande viser de samme fire linkforhåndsvisningsattrapper – Twitter/X (som skifter mellem sit kompakte "summary" miniaturelayout og fuldbredde "summary_large_image" layout afhængigt af twitter:card værdien), Facebook, LinkedIn og Discord – hver autentisk genskabt til at matche den pågældende platforms egen typografi og layoutkonventioner, snarere end én boks med et andet logo, og hver er klart markeret som en illustrativ tilnærmelse til planlægningsformål, da reelle platforme ændrer deres forhåndsvisningsdesign over tid, og dette værktøj aldrig henter eller scraper dem for at kontrollere.