","err_audit_input_required":"Plak eerst HTML met uw metatags.","mockups_heading":"Hoe het eruit ziet als een linkvoorbeeld","mockups_disclaimer":"Deze vier kaarten zijn gestileerde benaderingen van de echte link-preview-chrome van elk platform, uitsluitend gebouwd voor planningsdoeleinden - ze zijn geen live ophaalactie of screenshot van Twitter/X, Facebook, LinkedIn of Discord, en platforms kunnen hun eigen preview-gebruikersinterface in de loop van de tijd aanpassen.","mockup_twitter_heading":"Twitter / X","mockup_facebook_heading":"Facebook","mockup_linkedin_heading":"LinkedIn","mockup_discord_heading":"Onenigheid","mockup_image_alt":"Voorbeeldafbeelding linken","mockup_no_image":"Geen afbeelding opgegeven","mockup_no_image_short":"Geen afbeelding","domain_default_fallback":"voorbeeld.com","audit_missing_title":"Ontbrekende og:title — de meeste platforms tonen zonder deze een algemene of lege titel.","audit_missing_description":"Ontbrekende og:description — de voorbeeldkaart toont geen samenvattingstekst.","audit_missing_image":"Ontbrekende og:image — de meeste platforms tonen geen afbeelding, of vallen terug op de eerste afbeelding die op de pagina wordt gevonden.","audit_missing_url":"Ontbrekende og:url: zonder dit kunnen gedeelde alternatieve URL's (met trackingparameters, AMP-versies, enz.) mogelijk niet worden geconsolideerd op de canonieke pagina.","audit_title_too_long":"og:title is {length} tekens — over het punt van ~{max} tekens waar de meeste platforms het zullen afkappen.","audit_title_long":"og:title is {length} tekens — over het punt van ~{max} tekens waar sommige platforms het beginnen af te korten, hoewel het elders nog steeds volledig kan worden weergegeven.","audit_title_ok":"og:title is {length} tekens — binnen het veilige bereik voor de meeste platforms.","audit_description_too_long":"og:description is {length} tekens — meer dan ~{max} tekens waar de meeste platforms dit zullen afsnijden.","audit_description_long":"og:description is {length} tekens — over het punt van ~{max} tekens waar sommige platforms het beginnen af ​​te korten.","audit_description_ok":"og:description is {length} tekens — binnen het veilige bereik voor de meeste platforms.","audit_url_not_absolute":"og:url-waarde \"{value}\" is geen absolute http(s)-URL; het moet de volledige canonieke URL van de pagina zijn.","audit_image_not_absolute":"og:image-waarde \"{value}\" is geen absolute http(s)-URL — de meeste platforms vereisen een volledig gekwalificeerde afbeeldings-URL.","audit_image_dims_small":"Aangegeven og:image:width/height is {w}×{h} — lager dan het algemeen aanbevolen minimum van 1200×630 voor linkvoorbeelden.","audit_image_dims_ok":"Aangegeven og:image:width/height is {w}×{h} — voldoet aan het algemeen aanbevolen minimum van 1200×630.","audit_image_dims_unparseable":"og:image:width/og:image:height zijn aanwezig, maar geen geldige getallen.","audit_image_dims_unknown":"Geen og:image:width/og:image:height gedeclareerd — werkelijke pixelafmetingen kunnen niet worden geverifieerd zonder de afbeelding op te halen, wat deze tool vanwege het ontwerp nooit doet, vanwege privacy. Aanbevolen minimum: 1200×630.","audit_twitter_card_missing":"Geen twitter:card-tag — Twitter/X zal over het algemeen terugvallen op de equivalente og:-tags, maar een expliciete twitter:card is betrouwbaarder.","audit_twitter_card_invalid":"twitter:kaartwaarde \"{value}\" is niet een van de vier waarden die de kaartvalidator van Twitter accepteert: samenvatting, samenvatting_grote_afbeelding, app, speler.","audit_twitter_card_ok":"twitter:card is \"{value}\", een geldige waarde.","audit_large_image_needs_image":"twitter:card is summary_large_image maar er is geen og:image of twitter:image gevonden — dit kaarttype heeft een afbeelding nodig om correct te kunnen worden weergegeven.","audit_twitter_title_fallback":"Geen twitter:title ingesteld - Twitter/X valt terug naar og:title.","audit_twitter_description_fallback":"Geen twitter:description ingesteld — Twitter/X valt terug naar og:description.","audit_twitter_image_fallback":"Geen twitter:image ingesteld — Twitter/X valt terug naar og:image.","audit_duplicate_tag_item":"'{tag}' wordt {count} keer gedeclareerd. Alleen de laatste parsering die door de meeste platforms wordt geparseerd, wordt daadwerkelijk van kracht."};
⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

OG- en Twitter-kaartgenerator - Bouwer van metatags, auditor en preview

Bouw kant-en-klare Open Graph- en Twitter Card-<meta>-tags uit een formulier, of plak een bestaande <head> om deze te controleren op ontbrekende tags, titel/beschrijvingslengte en twitter:card-geldigheid - en bekijk vervolgens beide in echt opnieuw vormgegeven Twitter/X-, Facebook-, LinkedIn- en Discord-link-card-mockups.

Buy Me a Coffee at ko-fi.com
Verwerken... 0%
Invoer lezen
Tags bouwen/controleren
Voorvertoningen renderen
Klaar

Resultaat

Open Graph- en Twitter Card-metatags bepalen hoe een link eruit ziet op het moment dat deze in Slack, iMessage, een tweet of een Discord-kanaal wordt geplakt - een titel, beschrijving en afbeelding gekozen door de eigen <head> van de pagina, niet door wat het platform toevallig uit de zichtbare hoofdtekst schrapt. Deze tool is zowel een bouwer als een auditor, en geen generieke sjabloonvuller. In de BUILD-modus vult u een titel, beschrijving, afbeeldings-URL, canonieke URL, inhoudstype en Twitter-kaarttype in en wordt het exacte <meta property="og:..."> en <meta name="twitter:..."> tagblok samengesteld, klaar om in de <head> van uw pagina te plakken, waarbij elk veld dat u leeg laat, wordt overgeslagen in plaats van holle tags met lege inhoud uit te zenden.

In de AUDIT-modus plakt u uw bestaande <head>-opmaak of de HTML van een hele pagina en de tool ontleedt deze met de eigen DOMParser van de browser om elke og: en twitter: metatag die al aanwezig is te extraheren, en voert vervolgens de controles uit die er echt toe doen: de vier vaak vereiste tags (og:title, og:description, og:image, og:url) worden gemarkeerd als ze ontbreken; og:title wordt gemeten tegen het punt van ongeveer 60 tekens waar sommige platforms het beginnen af ​​te korten en het punt van ongeveer 90 tekens waar de meeste platforms dat zullen doen; og:description wordt gemeten aan de hand van het bereik van grofweg 155 tot 200 tekens dat de meeste platforms toestaan ​​voordat het wordt afgebroken; twitter:card wordt gecontroleerd aan de hand van de echte vier waarden die de kaartvalidator van Twitter accepteert (samenvatting, samenvatting_grote_afbeelding, app, speler) en gemarkeerd als het iets anders is; en dubbele tags (dezelfde eigenschap tweemaal gedeclareerd, een verrassend vaak voorkomende fout bij het kopiëren en plakken) worden bij naam genoemd.

De afmetingen van afbeeldingen krijgen een eerlijke behandeling: deze tool kan de werkelijke pixelgrootte van uw afbeelding niet verifiëren zonder deze op te halen, en doet dat bewust nooit, in overeenstemming met het beleid van deze site om geen externe verzoeken in te dienen. Als uw HTML al og:image:width en og:image:height declareert, worden deze gedeclareerde getallen gecontroleerd aan de hand van het algemeen aanbevolen minimum van 1200×630; Als dat niet het geval is, krijgt u een duidelijke handleiding in plaats van een verzonnen voldoende of onvoldoende. Beide modi geven dezelfde vier link-preview-mockups weer - Twitter/X (schakelend tussen de compacte "samenvatting" miniatuurlay-out en de volledige breedte "summary_large_image"-lay-out, afhankelijk van de twitter:card-waarde), Facebook, LinkedIn en Discord - elk echt opnieuw vormgegeven om overeen te komen met de eigen typografie en lay-outconventies van dat platform in plaats van één vak met een ander logo, en elk is duidelijk gelabeld als een illustratieve benadering voor planningsdoeleinden, aangezien echte platforms hun preview-chrome in de loop van de tijd veranderen en dit tool haalt ze nooit op of schrapt ze nooit om te controleren.

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • De BUILD-modus stelt og:title, og:description, og:image, og:url, og:type, og:site_name en bijpassende twitter:card/twitter:site/twitter:title/description/image-tags samen, waarbij elk leeg gelaten veld wordt overgeslagen, met een kopie met één klik van het klaar-om-te-plakken-blok.
  • De AUDIT-modus extraheert elke og:/twitter: <meta>-tag uit geplakte HTML via de DOMParser van de browser, markeert ontbrekende vereiste tags (og:title/description/image/url), dubbele tags en ongeldige twitter:card-waarden.
  • Lengterichtlijnen gebruiken de echte vaak genoemde drempels: og:title ongeveer 60 tekens voordat sommige platforms deze beginnen af te korten (tot ongeveer 90 op de meest tolerante), og:description ongeveer 155-200 tekens.
  • Geeft de Twitter/X-kaart weer in de juiste lay-out voor het opgegeven kaarttype (een compacte "samenvatting"-kaart met een kleine vierkante miniatuur, of de lay-out "summary_large_image" over de volledige breedte) naast Facebook-, LinkedIn- en Discord-previews.

Belangrijkste voordelen

✓ Twee echte tools in één: een BUILD-modus die de exacte og: en twitter: <meta> tag-HTML uit een formulier genereert, en een AUDIT-modus die geplakte HTML ontleedt om uw bestaande tags te vinden en te beoordelen.
✓ Echte validatie, geen cosmetische checklist: ontbrekende vereiste tags, og:title/og:description-lengte gecontroleerd aan de hand van de daadwerkelijke limieten waarop platforms worden afgekapt, en twitter:card gecontroleerd aan de hand van de echte vier toegestane waarden.
✓ Eerlijk over wat niet offline kan worden geverifieerd: de afmetingen van afbeeldingspixels zijn slechts een richtlijn, tenzij uw HTML al og:image:width/og:image:height aangeeft, aangezien deze tool uw afbeelding nooit ophaalt - vanwege het ontwerp, uit privacyoverwegingen.
✓ Vier echt verschillende platformmodellen (Twitter/X's samenvatting vs samenvatting_grote_afbeelding layouts, Facebook, LinkedIn, Discord) opgebouwd uit dezelfde titel/beschrijving/afbeelding, duidelijk gelabeld als illustratief.

Toepassingen

  • • Stuur een nieuw blogbericht met de juiste sociale kaarten: vul de titel, beschrijving en een gehoste omslagafbeelding in, genereer het og:/twitter:-tagblok en plak het rechtstreeks in de <head> van de pagina.
  • • Controleer de <head> van een bestaande landingspagina na een CMS-migratie om een ontbrekende og:image, een og:title die lang genoeg is om op sommige platforms te worden ingekort, of een overgebleven ongeldige twitter:card-waarde op te sporen.
  • • Vergelijk hoe dezelfde titel en afbeelding worden gelezen in de compacte samenvattingskaart van Twitter/X versus de samenvatting_grote_afbeelding over de volledige breedte voordat u beslist welk twitter:kaarttype u wilt declareren.