OGP & Meta Tag Validator

Paste your HTML to validate Open Graph (OGP) and Twitter Card meta tags. Detects missing tags and bad og:image URLs, and previews the social share card.

Inspecting the meta tags that decide how a link looks when shared

The title, description and image that appear when a link is posted to a social network are decided by the Open Graph and Twitter Card meta tags written in the page's ``. This tool extracts them from the HTML you paste in, points out missing tags and faulty values, and previews the result in something close to the card as it will actually appear.

**The commonest fault by far is writing `og:image` as a relative path.** The crawlers fetch the image from their own servers, so a path such as `/img/ogp.png` cannot be resolved and **the card arrives with the image missing.** Always write it as an absolute URL beginning with `https://`. **The other thing worth knowing is that these services cache what they crawl.** Correcting a tag may leave the old content on display, and you then have to prompt a refetch through each service's debugging tool. Note also that a Twitter Card falls back to the `og:` tags where no `twitter:` tag exists, so there is no need to write both.

How to use it

  1. Paste in the HTML source The contents of `` alone will do, or the whole page if that is easier.
  2. Try the samples first A good example and a bad one are provided, so you can see how the judgements differ before you start.
  3. Read the points raised **Missing tags and any `og:image` that is not an absolute URL are called out.**
  4. Check the appearance in the preview You can see how the title wraps and where the description is cut before you post anything.

Tips for getting more out of it

  • The recommended og:image size is 1200×630px (a 1.91:1 aspect ratio). Images that are too small or the wrong aspect ratio may be cropped unexpectedly by social platforms.
  • Crawlers used by Facebook, LINE, and Slack read og:title/og:description, while X (Twitter) has its own twitter:title/twitter:description. Setting both ensures a correct preview on every platform.
  • If twitter:card is missing, X will try to fall back to og:title/og:description, but the image may not render correctly, so it is best to set it explicitly.
  • Set og:url to the canonical, absolute (https://) URL of the page. This also helps avoid duplicate-content confusion caused by URLs with tracking parameters.
  • Right after changing your meta tags, social platforms may still show a cached, outdated preview. Use each platform's re-scrape tool (e.g. Facebook's Sharing Debugger) to refresh the cache.

Where it comes in useful

Checking an article before publication

**If a link looks broken once it is out, caching means correcting it does not put things right.** Looking first is the surer course.

Verifying what a template produces

Paste the `` your CMS or framework emitted and confirm that the intended tags are there.

Reviewing a change of image

**Whether a new `og:image` is an absolute URL is exactly the sort of thing that goes unnoticed.**

Taking a lead from other sites

Paste the source of a page that displays well and see which tags it takes the trouble to set.

Open Graph terms

Og:title
The heading shown on the card. **It can differ from ``, which lets you word it more briefly for social media.**</dd> <dt class="glossary-term" id="glossary-1">Og:description</dt> <dd class="glossary-definition">The descriptive text on the card. It is cut off if too long, so put the substance first.</dd> <dt class="glossary-term" id="glossary-2">Og:image</dt> <dd class="glossary-definition">The image on the card. **Always give it as an absolute URL.** Around 1200 by 630 pixels is a convenient size.</dd> <dt class="glossary-term" id="glossary-3">Og:type</dt> <dd class="glossary-definition">The kind of page. `article` is usual for a piece of writing and `website` for anything else.</dd> <dt class="glossary-term" id="glossary-4">Twitter:card</dt> <dd class="glossary-definition">The shape of the card. Setting `summary_large_image` displays the image at full width.</dd> <dt class="glossary-term" id="glossary-5">Og:url</dt> <dd class="glossary-definition">The canonical URL of the page. **It is where shares are consolidated, so take care not to write a URL carrying query parameters.**</dd> </dl> </div> </div> </div> <div class="row mt-4 section-faq"> <div class="col-md-12"> <div class="faq-card"> <h2 class="h4"><svg class="svg-icon-inline me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-help-circle" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 16v.01" /> <path d="M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483" /> </svg>Frequently Asked Questions</h2> <div class="accordion accordion-flush mt-3" id="faq-accordion"> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-0"> Why doesn't my og:image show up when I share the page on social media? </button> </h3> <div id="faq-0" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">The most common cause is a relative image URL (like <code>/img/a.png</code>). Most crawlers cannot resolve relative URLs, so always use an absolute URL starting with <code>https://</code>. It can also fail to show if your server blocks the crawler's User-Agent, or if the image is too small.</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-1"> Do I need both og:title and the <title> tag? </button> </h3> <div id="faq-1" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">Yes, they serve different purposes, so setting both is recommended. <code><title></code> is used for the search results title and the browser tab, while <code>og:title</code> is used for the card title when the page is shared on social media. Many crawlers fall back to <code><title></code> if og:title is missing, but the result may not match what you intended.</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-2"> Which value should I choose for twitter:card? </button> </h3> <div id="faq-2" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">For a typical article or blog page, <code>summary_large_image</code> is recommended, since it displays a large image. If a small thumbnail is enough, use <code>summary</code> instead. <code>app</code> and <code>player</code> are meant for app-install prompts and embedded video/audio respectively, and are not typical choices for a regular web page.</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-3"> I fixed my meta tags, but the social media preview still hasn't updated. Why? </button> </h3> <div id="faq-3" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">Social platforms cache the results of their crawl, so an outdated preview can persist even after you fix the tags. You need to explicitly request a re-crawl using each platform's tool — for example Facebook/LINE's Sharing Debugger, or X's Card Validator — to refresh the cache.</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-4"> What happens if a page has no OGP tags at all? </button> </h3> <div id="faq-4" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">Most crawlers will fall back to <code><title></code> and <code>meta description</code> to build a preview, but no image will be shown, resulting in a plain link-and-text preview. Since this affects click-through rates, it's best to set at least <code>og:title</code>, <code>og:description</code>, and <code>og:image</code>.</div> </div> </div> </div> </div> </div> </div> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Why doesn't my og:image show up when I share the page on social media?","acceptedAnswer":{"@type":"Answer","text":"The most common cause is a relative image URL (like /img/a.png). Most crawlers cannot resolve relative URLs, so always use an absolute URL starting with https://. It can also fail to show if your server blocks the crawler's User-Agent, or if the image is too small."}},{"@type":"Question","name":"Do I need both og:title and the <title> tag?","acceptedAnswer":{"@type":"Answer","text":"Yes, they serve different purposes, so setting both is recommended. <title> is used for the search results title and the browser tab, while og:title is used for the card title when the page is shared on social media. Many crawlers fall back to <title> if og:title is missing, but the result may not match what you intended."}},{"@type":"Question","name":"Which value should I choose for twitter:card?","acceptedAnswer":{"@type":"Answer","text":"For a typical article or blog page, summary_large_image is recommended, since it displays a large image. If a small thumbnail is enough, use summary instead. app and player are meant for app-install prompts and embedded video/audio respectively, and are not typical choices for a regular web page."}},{"@type":"Question","name":"I fixed my meta tags, but the social media preview still hasn't updated. Why?","acceptedAnswer":{"@type":"Answer","text":"Social platforms cache the results of their crawl, so an outdated preview can persist even after you fix the tags. You need to explicitly request a re-crawl using each platform's tool — for example Facebook/LINE's Sharing Debugger, or X's Card Validator — to refresh the cache."}},{"@type":"Question","name":"What happens if a page has no OGP tags at all?","acceptedAnswer":{"@type":"Answer","text":"Most crawlers will fall back to <title> and meta description to build a preview, but no image will be shown, resulting in a plain link-and-text preview. Since this affects click-through rates, it's best to set at least og:title, og:description, and og:image."}}]}</script> <div class="row mt-4 section-article"> <div class="col-md-12"> <div class="article-card"> <img src="https://toolbase.cc/img/toolkun.png" alt="Tool-kun" style="float:right;width:56px;margin:0 0 .5rem 1.25rem;opacity:.9"> <h2 class="h4">Side Note — Why OGP exists — Facebook built it to make the "Like" button work</h2> <p>The Open Graph Protocol (OGP) was created by Facebook in 2010 to help popularize its "Like" button. At the time, sharing a web page on Facebook produced little more than a bare link and title, and click-through rates suffered. Facebook's solution was to let a page itself declare how it should look when shared, by adding a new <code><meta property="og:xxx"></code> namespace to plain HTML.</p> <p>Interestingly, OGP is built on top of <strong>RDFa</strong>, a W3C specification for embedding structured data in HTML. By reusing an existing standard, Facebook was able to ship the new feature without needing cooperation from browser vendors or other companies — just a handful of extra meta tags on top of existing pages. That "extend without breaking backward compatibility" approach worked, and OGP became a de facto standard adopted well beyond Facebook, on platforms like Slack, LINE, and Discord.</p> <p>Twitter never adopted OGP outright; instead it created its own separate namespace, <strong>Twitter Cards</strong> (<code>twitter:xxx</code>). This was arguably as much a competitive choice as a technical one — not wanting to simply adopt a spec that originated with rival Facebook. As a result, most sites still need to duplicate both og: and twitter: tags today, which is one reason tools like this validator remain useful.</p> <div class="related-trivia"> <p class="related-trivia-label"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-books" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 5a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -14" /> <path d="M9 5a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -14" /> <path d="M5 8h4" /> <path d="M9 16h4" /> <path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041" /> <path d="M14 9l4 -1" /> <path d="M16 16l3.923 -.98" /> </svg> Read related trivia </p> <ul class="related-trivia-list"> <li> <a href="https://toolbase.cc/en/dev/seo/jsonld_validator"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 6l6 6l-6 6" /> </svg> <span>Side Note — Why JSON-LD replaced Microdata and RDFa</span> </a> </li> <li> <a href="https://toolbase.cc/en/dev/server/security_headers_checker"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 6l6 6l-6 6" /> </svg> <span>Side Note — securityheaders.com and the history of clickjacking defense</span> </a> </li> </ul> </div> <div class="trivia-collection-link"> <a href="https://toolbase.cc/en/trivia"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-library" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M7 5.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /> <path d="M4.012 7.26a2.005 2.005 0 0 0 -1.012 1.737v10c0 1.1 .9 2 2 2h10c.75 0 1.158 -.385 1.5 -1" /> <path d="M11 7h5" /> <path d="M11 10h6" /> <path d="M11 13h3" /> </svg> Browse all trivia </a> </div> </div> </div> </div> </div> <div class="container"> <div class="row mt-4 section-related"> <div class="col-md-12"> <p class="related-tools-label">People who viewed this tool also viewed</p> <div class="row g-3"> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/en/dev/seo/robots_txt" class="text-decoration-none tool-card-link" title="Paste your robots.txt content to check its syntax. Parses User-agent, Disallow, Allow, and Sitemap directives and visualizes crawler access rules."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-robot" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M6 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -4" /> <path d="M12 2v2" /> <path d="M9 12v9" /> <path d="M15 12v9" /> <path d="M5 16l4 -2" /> <path d="M15 14l4 2" /> <path d="M9 18h6" /> <path d="M10 8v.01" /> <path d="M14 8v.01" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">robots.txt Validator</p> <p class="mb-0 text-muted small">Paste your robots.txt content to check its syntax. Parses User-agent, Disallow, Allow, and Sitemap directives and visualizes crawler access rules.</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/en/dev/seo/sitemap_validator" class="text-decoration-none tool-card-link" title="Paste your sitemap.xml to validate it against the sitemaps.org protocol — checks the urlset namespace, required loc elements, lastmod/priority formatting, and Google's 50,000 URL limit."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sitemap" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M15 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M6 15v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1" /> <path d="M12 9l0 3" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">Sitemap.xml Validator</p> <p class="mb-0 text-muted small">Paste your sitemap.xml to validate it against the sitemaps.org protocol — checks the urlset namespace, required loc elements, lastmod/priority formatting, and Google's 50,000 URL limit.</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/en/dev/seo/jsonld_validator" class="text-decoration-none tool-card-link" title="Paste HTML or raw JSON-LD to validate FAQPage, BreadcrumbList, and Article structured data. Instantly spot missing required properties and common Google Rich Results mistakes."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-schema" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 2h5v4h-5l0 -4" /> <path d="M15 10h5v4h-5l0 -4" /> <path d="M5 18h5v4h-5l0 -4" /> <path d="M5 10h5v4h-5l0 -4" /> <path d="M10 12h5" /> <path d="M7.5 6v4" /> <path d="M7.5 14v4" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">JSON-LD Structured Data Validator</p> <p class="mb-0 text-muted small">Paste HTML or raw JSON-LD to validate FAQPage, BreadcrumbList, and Article structured data. Instantly spot missing required properties and common Google Rich Results mistakes.</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/en/dev/seo/ads_txt" class="text-decoration-none tool-card-link" title="Paste your ads.txt content to check its syntax instantly. Validates the DOMAIN, PUBLISHER_ID, and RELATIONSHIP (DIRECT/RESELLER) fields line by line, helping you correctly set up the file that guards against unauthorized ad inventory reselling (domain spoofing)."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-ad-2" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M11.933 5h-6.933v16h13v-8" /> <path d="M14 17h-5" /> <path d="M9 13h5v-4h-5v4" /> <path d="M15 5v-2" /> <path d="M18 6l2 -2" /> <path d="M19 9h2" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">ads.txt Validator</p> <p class="mb-0 text-muted small">Paste your ads.txt content to check its syntax instantly. Validates the DOMAIN, PUBLISHER_ID, and RELATIONSHIP (DIRECT/RESELLER) fields line by line, helping you correctly set up the file that guards against unauthorized...</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/en/dev/seo/hreflang_validator" class="text-decoration-none tool-card-link" title="Paste the hreflang tags from your HTML <head> to automatically detect common multilingual SEO mistakes: missing x-default, missing self-reference, invalid language codes, and duplicate declarations."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-world-www" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4" /> <path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4" /> <path d="M12.5 3a16.989 16.989 0 0 1 1.828 4" /> <path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4" /> <path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4" /> <path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4" /> <path d="M2 10l1 4l1.5 -4l1.5 4l1 -4" /> <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4" /> <path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">Hreflang Tag Validator</p> <p class="mb-0 text-muted small">Paste the hreflang tags from your HTML <head> to automatically detect common multilingual SEO mistakes: missing x-default, missing self-reference, invalid language codes, and duplicate declarations.</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/en/dev/seo/manifest_validator" class="text-decoration-none tool-card-link" title="Paste your manifest.json to check whether it meets PWA installability requirements. Verifies required fields such as name, start_url, display, and icons, and flags missing maskable icons in a clear checklist."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-app-window" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /> <path d="M6 8h.01" /> <path d="M9 8h.01" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">Web App Manifest (manifest.json) Validator</p> <p class="mb-0 text-muted small">Paste your manifest.json to check whether it meets PWA installability requirements. Verifies required fields such as name, start_url, display, and icons, and flags missing maskable icons in a clear checklist.</p> </div> </div> </div> </div> </a> </div> </div> </div> </div> </div> </main> <footer> <div class="container mt-4"> <div class="row"> <div class="col-12"> <div class="d-flex align-items-center gap-3 my-3"> <hr class="flex-grow-1 m-0"> <img src="https://toolbase.cc/img/toolkun-up.png" alt="" style="height:40px; opacity:.75;"> <hr class="flex-grow-1 m-0"> </div> <p class="text-center text-secondary small mt-3 mb-3">The calculation results and information on this site are provided for reference purposes only. We make no guarantee of accuracy or completeness, and accept no liability for any loss arising from their use.</p> <p class="text-center mb-3"> <a href="https://toolbase.cc/en/about" class="text-muted small me-3">About Toolbase</a> <a href="https://toolbase.cc/en/feedback?tool=dev.seo.ogp_validator" class="text-muted small me-3">Feedback</a> <a href="https://toolbase.cc/en/terms" class="text-muted small me-3">Terms of Service</a> <a href="https://toolbase.cc/en/privacy" class="text-muted small me-3">Privacy Policy</a> <a href="https://toolbase.cc/en/licenses" class="text-muted small me-3">Open Source Licenses</a> <a href="#" onclick="showCookieSettings(); return false;" class="text-muted small">Cookie Settings</a> </p> <p class="text-center mb-3" style="font-size:.75rem;"> <a href="https://toolbase.cc/dev/seo/ogp_validator" hreflang="ja" class="text-muted">日本語</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/en/dev/seo/ogp_validator" hreflang="en" class="text-body fw-semibold">English</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/zh/dev/seo/ogp_validator" hreflang="zh" class="text-muted">简体中文</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/zh-Hant/dev/seo/ogp_validator" hreflang="zh-Hant" class="text-muted">繁體中文</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/es/dev/seo/ogp_validator" hreflang="es" class="text-muted">Español</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/pt/dev/seo/ogp_validator" hreflang="pt" class="text-muted">Português</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/de/dev/seo/ogp_validator" hreflang="de" class="text-muted">Deutsch</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/fr/dev/seo/ogp_validator" hreflang="fr" class="text-muted">Français</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/it/dev/seo/ogp_validator" hreflang="it" class="text-muted">Italiano</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/ko/dev/seo/ogp_validator" hreflang="ko" class="text-muted">한국어</a> </p> <p class="text-center"> <a href="https://codebase.co.jp" target="_blank" class="text-muted" style="font-size:.75rem; opacity:.6;">Codebase Inc.</a> </p> </div> </div> </div> </footer> <div class="modal fade" id="toolSearchModal" tabindex="-1" aria-hidden="true" data-endpoint="https://toolbase.cc/en/search-index.json" data-error-message="Could not load the tool list. Please check your connection and try again."> <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered"> <div class="modal-content"> <div class="modal-header border-bottom-0"> <div class="input-group"> <span class="input-group-text bg-white border-end-0"><svg class="svg-icon-inline text-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" /> </svg></span> <input type="text" id="toolSearchInput" class="form-control border-start-0" placeholder="Search tools..." autocomplete="off"> </div> <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body p-0"> <ul id="toolSearchResults" class="list-group list-group-flush"></ul> <p id="toolSearchEmpty" class="text-muted text-center py-4 px-3 d-none mb-0">No matching tools found</p> </div> </div> </div> </div> <div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1090"></div> <link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/app-DJY5gZmy.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/bootstrap.bundle.min-CYJJg-x7.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/rolldown-runtime-DAXXjFlN.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/favorites-CHkhC6V5.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/toast-wr68XIKP.js" /><script type="module" src="https://toolbase.cc/build/assets/app-DJY5gZmy.js"></script> <link rel="preload" as="style" href="https://toolbase.cc/build/assets/index-CU7vBhfN.css" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/index-BQgUPmBB2.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/vue.esm-bundler-CZulxOyf.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/rolldown-runtime-DAXXjFlN.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/_plugin-vue_export-helper-BDNMzG2s.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/csrf-DLdgo79t.js" /><link rel="stylesheet" href="https://toolbase.cc/build/assets/index-CU7vBhfN.css" /><script type="module" src="https://toolbase.cc/build/assets/index-BQgUPmBB2.js"></script></body> </html>