{{ summary.heading }}
{{ summary.primary }}
{{ summary.line }}
{{ badge.label }}
Use the exact page or content title that should appear in link previews.
Write one or two natural sentences; the checklist flags very short, long, or duplicated copy.
Enter the final public URL, including https:// and the canonical path.
Use a public HTTPS image URL; 1200 by 630 pixels is a broad social-preview default.
Describe the preview image itself; keep X card alt text within 420 characters.
Use the public brand or site label that should appear beside the preview.
Choose the closest object type; article unlocks optional article-specific metadata below.
Keep summary_large_image for visual pages; choose summary for compact cards.
Width and height hints help crawlers resolve the image without guessing.
× px
Use the real served MIME type, or omit the structured image type tag.
Use underscore format like en_US, or leave blank to omit the tag.
Leave blank unless the domain has a real public X account.
Keep enabled when the snippet should control X/Twitter previews explicitly.
Use an absolute author/profile URL, or leave blank to omit article:author.
Use an ISO timestamp such as 2026-05-06T09:00:00+08:00.
Leave blank when the page has no separate updated timestamp.
Use a concise section name such as Product, Engineering, or Guides.
Each non-empty value becomes a separate article:tag meta tag.
{{ headMarkup }}
Family Tag Content Crawler role Copy
{{ row.family }} {{ row.tag }} {{ row.content }} {{ row.note }}
Level Check Evidence Action Copy
{{ row.level }} {{ row.area }} {{ row.evidence }} {{ row.action }} 

        

      

    

  

                

                

                    

                        

                            Tags: Devtools, HTTP
                        

                        

                            Export to PDF
                            Fullscreen
                        

                    

                

            

        

    


                    
        

        

        

            

            
        

        


                                                                                                                                                                                                                                                        
        

        

            
            

                Customize

                

                    

                        

                            
                            
                        


                        

                            
                            
                        


                        

                            
                            
                        

                    


                    

                        Advanced

                        

                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    :
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                
                                
                            


                            

                                
                                
                            

                        

                    

                

            

            
        


        

            
            
            
        


        
        

    

    

        

  
  
Open Graph metadata gives a shared URL a stable title, type, canonical address, and preview image for link cards. Many crawlers also read a short description, site name, locale, and image details so the same page is easier to identify when it appears in feeds, messages, bookmarks, and collaboration tools.

  
Share previews fail quietly when the metadata is incomplete. A missing image can leave a plain text link, a relative or mistyped URL can point crawlers at the wrong object, and a title that is clear on the page can still truncate badly inside a compact card. The markup sits in the document head, so these mistakes are easy to miss during visual review.

  

    Page facts flowing into Open Graph tags, X card tags, crawler checks, and final head markup
  

  
Open Graph should be read as a preview instruction, not a promise that every service will render the same card. Platforms cache results, crop images differently, and may ignore fields that are missing, malformed, or blocked from crawler access. A clean metadata set reduces those problems, but the deployed URL still needs a live crawler test.

  
The useful goal is a head snippet that describes one public page object clearly. The title, description, URL, image, and type should all point to the same page, and optional article or locale fields should be added only when they are true for that page.






  
Technical Details:

  
The Open Graph protocol represents a page as an object. The core object properties are og:title, og:type, og:image, and og:url. Optional properties such as og:description, og:site_name, and og:locale add context for crawlers and preview builders.

  
Image metadata has its own structure. The root image URL is followed by related hints such as pixel width, height, MIME type, and alternative text. Those hints do not prove that the image is reachable, but they help a crawler understand the asset without guessing. The image still needs to be public, crawlable, and sized for the card layout that matters.

  
X card metadata uses twitter:* names, but it overlaps with the same page facts. The card type decides whether the URL asks for a compact summary or a large-image card. X can fall back to supported Open Graph fields in some cases, but explicit X card tags make the intended card easier to inspect before launch.


  
Rule Core:

  

    

      
      
        

          Metadata Group
          Representative Tags
          Review Meaning
        

      
      
        

          Core object
          og:title, og:type, og:url, og:description
          The shared object needs a clear title, object type, canonical share URL, and concise summary.
        

        

          Preview image
          og:image, og:image:width, og:image:height, og:image:type, og:image:alt
          The image URL should be absolute and reachable, with optional size, type, and accessible image description hints.
        

        

          Site and locale
          og:site_name, og:locale
          The site label and locale should describe the public page, not an internal project name or draft language.
        

        

          Article metadata
          article:author, article:published_time, article:modified_time, article:section, article:tag
          Article-only fields should be present only when the Open Graph type is article and the values match the published content.
        

        

          X card metadata
          twitter:card, twitter:site, twitter:title, twitter:description, twitter:image, twitter:image:alt
          Explicit X tags repeat the page facts for X preview crawlers and carry the selected card layout.
        

      
    

  


  
The generated tag list is deterministic. Required title text becomes og:title and, when X tags are enabled, twitter:title. A valid canonical share URL becomes og:url. A valid preview image URL becomes og:image and can be followed by structured image hints. Optional article fields are emitted only for the article object type.


  
Validation Boundaries:

  

    

      
      
        

          Checklist Cue
          Boundary
          Practical Check
        

      
      
        

          og:title
          Empty titles block copying; titles below 20 characters ask for review; titles above 95 characters raise a warning.
          Use the same meaning as the visible page heading and keep the most important words early.
        

        

          og:description
          Blank descriptions still generate other tags, but descriptions below 70 or above 200 characters ask for review or warning.
          Write one or two sentences that add context instead of repeating the full title.
        

        

          og:url
          The share URL must parse as an absolute http or https URL; http URLs warn.
          Use the final public address and confirm the crawler sees the same page without a fragment.
        

        

          og:image
          The image URL must parse as an absolute http or https URL; http URLs warn.
          Prefer a public https image and test the URL without cookies or bot-specific access.
        

        

          Image dimensions
          Values below 300x157 warn, and aspect ratios outside roughly 1.7:1 to 2.1:1 ask for review.
          Use 1200x630 as a broad large-card default when the page has a wide preview asset.
        

        

          Image alt text
          Missing alt text asks for review when an image is present; values above 420 characters warn.
          Describe the preview image itself, not the page or the brand in general.
        

        

          Article fields
          Article author must be an absolute URL when provided, and article times are reviewed against ISO-like datetime text.
          Leave article fields blank unless the page is an article and the timestamp or author URL is ready to publish.
        

      
    

  

  
The JSON output mirrors the current settings, status, counts, head markup, tag ledger, and crawler checklist. Treat it as a review payload for handoff. The head snippet and checklist remain the main surfaces to inspect before tags are pasted into a page template.






  
Everyday Use & Decision Guide:

  
Start with Share title, Share description, Canonical share URL, Preview image URL, and Site name. That first pass should produce core Open Graph tags, image tags, X card tags when enabled, and a crawler checklist that names anything blocking copy.

  
Keep Open Graph type on website for ordinary landing pages, docs pages, dashboards, and utility pages. Choose article only when the page has real article metadata to publish. The article choice unlocks author, published time, modified time, section, and repeated tag fields, so using it casually can add misleading metadata.

  
    
    
  • Use summary_large_image when the preview image is strong enough to carry a large card.
    • 
    
  • Choose summary when the image is square, secondary, or likely to crop poorly.
    • 
    
  • Leave X site handle blank unless the domain has a real public handle.
    • 
    
  • Add Image dimensions when the deployed asset size is known.
    • 
    
  • Leave Image MIME type blank if the served type has not been confirmed.
    • 
    
  • Keep Emit X card fallback tags enabled when the snippet should state the X card title, description, and image explicitly.
    • 
  

  
The main stop sign is Share preview tags need fixes. Copy and download actions are blocked while required title, canonical URL, or image URL errors remain. Warnings and review rows still matter because they often point to previews that technically generate markup but may be cropped, truncated, inaccessible, or too vague.

  
Do not treat a ready summary as proof that a social platform has refreshed its preview. Check Tag Ledger to review every emitted tag, then test the deployed URL with the preview or debugger tool used by the platform where the link will be shared.






  
Step-by-Step Guide:

  
Fill the page facts first, then use the generated checklist to decide whether the head snippet is ready to copy.

  
    
    
  1. Enter Share title. The summary should move toward Share preview tags ready once the title is present and no other required field is failing.
    2. 
    
  2. Add Share description. If Crawler Checklist reports a short, long, or duplicated description, revise the summary before publishing the tags.
    3. 
    
  3. Set Canonical share URL with the full https page address. A bare domain, relative path, or malformed URL appears as an og:url error.
    4. 
    
  4. Set Preview image URL. A missing or invalid value appears as an og:image error and blocks copying the head tags.
    5. 
    
  5. Add Preview image alt text and Site name. The checklist should report ready rows when those values are useful and within the supported length checks.
    6. 
    
  6. Choose Open Graph type and X card type. If summary_large_image is selected without a valid image, the checklist warns about the X card image.
    7. 
    
  7. Open Advanced for image dimensions, MIME type, locale, X site handle, the X fallback toggle, and article fields. Invalid locale, author URL, or timestamp values appear as review rows instead of entering the tag list silently.
    8. 
    
  8. Review Head Tags and Tag Ledger. The ledger shows the family, tag name, content, crawler role, and row-level copy action for each emitted tag.
    9. 
    
  9. Copy from Head Tags only after blocking errors are gone, then test the deployed URL before relying on the public preview.
    10. 
  






  
Interpreting Results:

  
Share preview tags ready means the required fields parsed and the generated head markup can be copied. It does not mean the image is reachable to every crawler, the URL has already been refreshed by a platform cache, or the preview will crop exactly the way it appears in your design file.

  

    

      
      
        

          Result Cue
          Meaning
          Next Check
        

      
      
        

          blocking issue
          A required title, canonical URL, image URL, or generated-tag condition failed.
          Fix the field named in the alert, then reopen Head Tags.
        

        

          warnings
          Markup can exist, but a publish risk is present, such as an http URL, long text, or weak image size.
          Resolve the warning unless that exact behavior is intentional for the page.
        

        

          reviews
          The generator found a value that may be valid but deserves a manual check, such as an unusual locale or missing site name.
          Confirm the field describes the deployed page and delete optional values that are not certain.
        

        

          Tag Ledger
          Each row shows the emitted family, tag, content, and crawler role.
          Compare the ledger against the final page title, image, URL, and article facts.
        

      
    

  

  
The common false confidence is assuming that valid-looking metadata controls every preview. Crawler access, platform support, image cache timing, robots rules, and crop behavior can still change what users see. Use the generated checks to avoid obvious markup mistakes, then verify the live URL.






  
Worked Examples:

  
Project dashboard landing page:

  
A title of Project Dashboard Checklist, description of Track project tasks, blockers, and launch readiness in one lightweight dashboard., canonical URL https://www.example.com/project-dashboard, image URL https://www.example.com/assets/project-dashboard-og.png, alt text Project dashboard checklist preview, site name ExampleCo, and dimensions 1200x630 should produce a ready summary with Open Graph, image, and X card rows in Tag Ledger.

  
Article page with timestamps:

  
An article can use Open Graph type set to article, author URL https://www.example.com/authors/ana, published time 2026-05-06T09:00:00+08:00, section Guides, and tags such as launch readiness, dashboard. The output should include repeated article:tag rows and ready checks for valid article fields.

  
Invalid share URL:

  
If Canonical share URL is entered as example.com/project-dashboard, the checklist reports that og:url must be a valid absolute URL. Replacing it with https://www.example.com/project-dashboard restores the og:url row and allows the snippet to be copied when no other blocking issue remains.

  
Large card without a usable image:

  
A page using summary_large_image with an invalid image URL shows an og:image error and an X card image warning. Fix the image URL first, then check Image dimensions and Image alt text before relying on the large-card preview.






  
FAQ:

  

    Why is copying disabled?
    
Copying is disabled when a blocking error remains. Fix the field named in the alert, usually Share title, Canonical share URL, or Preview image URL, then check Head Tags again.

  

  

    Should I use website or article?
    
Use website for general pages. Use article when the page has real article author, publication time, section, or topic tags that should be emitted as article metadata.

  

  

    Why did my X handle change?
    
X site handle is normalized to one leading @, keeps letters, numbers, and underscores, and trims the handle to 15 characters.

  

  

    Does a ready result prove the image will appear?
    
No. A ready result means the image URL parsed and the markup was generated. The deployed image still needs to be reachable by the platform crawler, served with the expected content type, and accepted by that platform.

  

  

    Why is alt text reviewed?
    
When a preview image is present, the tool emits og:image:alt and twitter:image:alt only when alt text is provided. Values above 420 characters raise a warning for X card image alt text.

  

  

    Does this submit my page data to a server?
    
The entered fields are assembled into head markup, tables, and JSON in the browser workflow. There is no upload field or server validation step for the generated tag content.

  






  
Glossary:

  

    
Open Graph

    
A metadata vocabulary that describes a shared page as an object with a title, type, image, and URL.

    
X card

    
A set of twitter:* meta tags that tells X which card layout, title, description, and image to use.

    
Canonical share URL

    
The final absolute page address emitted as og:url for the shared object.

    
Preview image

    
The public image URL emitted through og:image and, when enabled, twitter:image.

    
Article metadata

    
Optional properties such as author, published time, modified time, section, and repeated topic tags for article pages.

    
Tag ledger

    
The result table that lists each emitted metadata tag, its content, and its crawler role.

  






  
References: