OGP Checker
開いているページの OGP / Twitter Card をポップアップで確認するブックマークレット。localhost でも動きます。
下のボタンをブックマークバーにドラッグ&ドロップして登録してね。
ogp-checker← このボタンをブックマークバーへドラッグ
bookmarklet URL
javascript:(function%20ogpCheckerBookmarklet()%20%7B%20%09const%20MODAL_ID%20%3D%20%22__ogp_checker_modal_v1__%22%3B%20%09const%20existing%20%3D%20document.getElementById(MODAL_ID)%3B%20%09if%20(existing)%20%7B%20%09%09existing.remove()%3B%20%09%09return%3B%20%09%7D%20%09const%20metas%20%3D%20%7B%7D%3B%20%09const%20nodes%20%3D%20document.querySelectorAll(%22meta%22)%3B%20%09for%20(let%20i%20%3D%200%3B%20i%20%3C%20nodes.length%3B%20i%2B%2B)%20%7B%20%09%09const%20m%20%3D%20nodes%5Bi%5D%3B%20%09%09const%20key%20%3D%20m.getAttribute(%22property%22)%20%7C%7C%20m.getAttribute(%22name%22)%20%7C%7C%20m.getAttribute(%22itemprop%22)%3B%20%09%09const%20content%20%3D%20m.getAttribute(%22content%22)%3B%20%09%09if%20(key%20%26%26%20content)%20%7B%20%09%09%09const%20cur%20%3D%20metas%5Bkey%5D%3B%20%09%09%09if%20(cur%20!%3D%3D%20void%200)%20if%20(Array.isArray(cur))%20cur.push(content)%3B%20%09%09%09else%20metas%5Bkey%5D%20%3D%20%5Bcur%2C%20content%5D%3B%20%09%09%09else%20metas%5Bkey%5D%20%3D%20content%3B%20%09%09%7D%20%09%7D%20%09const%20og%20%3D%20%7B%7D%3B%20%09const%20twitter%20%3D%20%7B%7D%3B%20%09const%20basic%20%3D%20%7B%7D%3B%20%09const%20others%20%3D%20%7B%7D%3B%20%09const%20titleTag%20%3D%20document.title%20%7C%7C%20%22%22%3B%20%09const%20canonicalEl%20%3D%20document.querySelector(%22link%5Brel%3D%5C%22canonical%5C%22%5D%22)%3B%20%09const%20canonical%20%3D%20canonicalEl%20%3F%20canonicalEl.href%20%3A%20%22%22%3B%20%09Object.keys(metas).forEach((k)%20%3D%3E%20%7B%20%09%09const%20lk%20%3D%20k.toLowerCase()%3B%20%09%09if%20(lk.indexOf(%22og%3A%22)%20%3D%3D%3D%200)%20og%5Bk%5D%20%3D%20metas%5Bk%5D%3B%20%09%09else%20if%20(lk.indexOf(%22twitter%3A%22)%20%3D%3D%3D%200)%20twitter%5Bk%5D%20%3D%20metas%5Bk%5D%3B%20%09%09else%20if%20(lk%20%3D%3D%3D%20%22description%22%20%7C%7C%20lk%20%3D%3D%3D%20%22keywords%22%20%7C%7C%20lk%20%3D%3D%3D%20%22author%22%20%7C%7C%20lk%20%3D%3D%3D%20%22viewport%22%20%7C%7C%20lk%20%3D%3D%3D%20%22theme-color%22%20%7C%7C%20lk%20%3D%3D%3D%20%22robots%22)%20basic%5Bk%5D%20%3D%20metas%5Bk%5D%3B%20%09%09else%20others%5Bk%5D%20%3D%20metas%5Bk%5D%3B%20%09%7D)%3B%20%09function%20resolveUrl(u)%20%7B%20%09%09try%20%7B%20%09%09%09return%20new%20URL(u%2C%20document.baseURI).href%3B%20%09%09%7D%20catch%20%7B%20%09%09%09return%20u%3B%20%09%09%7D%20%09%7D%20%09function%20esc(s)%20%7B%20%09%09return%20String(s).replace(%2F%5B%26%3C%3E%22%27%5D%2Fg%2C%20(c)%20%3D%3E%20%7B%20%09%09%09return%20%7B%20%09%09%09%09%22%26%22%3A%20%22%26amp%3B%22%2C%20%09%09%09%09%22%3C%22%3A%20%22%26lt%3B%22%2C%20%09%09%09%09%22%3E%22%3A%20%22%26gt%3B%22%2C%20%09%09%09%09%22%5C%22%22%3A%20%22%26quot%3B%22%2C%20%09%09%09%09%22%27%22%3A%20%22%26%2339%3B%22%20%09%09%09%7D%5Bc%5D%3B%20%09%09%7D)%3B%20%09%7D%20%09function%20renderKV(obj)%20%7B%20%09%09const%20keys%20%3D%20Object.keys(obj)%3B%20%09%09if%20(!keys.length)%20return%20%22%3Cp%20class%3D%5C%22ogpx-muted%5C%22%3E%EF%BC%88%E3%81%AA%E3%81%97%EF%BC%89%3C%2Fp%3E%22%3B%20%09%09return%20keys.map((k)%20%3D%3E%20%7B%20%09%09%09const%20v%20%3D%20obj%5Bk%5D%3B%20%09%09%09const%20vals%20%3D%20Array.isArray(v)%20%3F%20v%20%3A%20%5Bv%5D%3B%20%09%09%09const%20isImage%20%3D%20%2Fimage%7C%3Aimage%24%2Fi.test(k)%3B%20%09%09%09const%20isUrl%20%3D%20%2Furl%7Cimage%7C%3Aurl%24%7C%3Aimage%24%2Fi.test(k)%3B%20%09%09%09const%20body%20%3D%20vals.map((val)%20%3D%3E%20%7B%20%09%09%09%09if%20(isImage)%20return%20%22%3Cdiv%20class%3D%5C%22ogpx-imgwrap%5C%22%3E%3Cimg%20src%3D%5C%22%22%20%2B%20esc(resolveUrl(val))%20%2B%20%22%5C%22%20alt%3D%5C%22%5C%22%20onerror%3D%5C%22this.style.display%3D%27none%27%3Bthis.nextElementSibling.style.display%3D%27block%27%5C%22%3E%3Cdiv%20class%3D%5C%22ogpx-imgerr%5C%22%20style%3D%5C%22display%3Anone%5C%22%3E%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E5%A4%B1%E6%95%97%3C%2Fdiv%3E%3Cdiv%20class%3D%5C%22ogpx-imgurl%5C%22%3E%22%20%2B%20esc(val)%20%2B%20%22%3C%2Fdiv%3E%3C%2Fdiv%3E%22%3B%20%09%09%09%09if%20(isUrl)%20return%20%60%3Ca%20href%3D%22%24%7Besc(resolveUrl(val))%7D%22%20target%3D%22_blank%22%20rel%3D%22noopener%22%3E%24%7Besc(val)%7D%3C%2Fa%3E%60%3B%20%09%09%09%09return%20esc(val)%3B%20%09%09%09%7D).join(%22%3Cbr%3E%22)%3B%20%09%09%09return%20%22%3Cdiv%20class%3D%5C%22ogpx-row%5C%22%3E%3Cdiv%20class%3D%5C%22ogpx-key%5C%22%3E%22%20%2B%20esc(k)%20%2B%20%22%3C%2Fdiv%3E%3Cdiv%20class%3D%5C%22ogpx-val%5C%22%3E%22%20%2B%20body%20%2B%20%22%3C%2Fdiv%3E%3C%2Fdiv%3E%22%3B%20%09%09%7D).join(%22%22)%3B%20%09%7D%20%09const%20host%20%3D%20document.createElement(%22div%22)%3B%20%09host.id%20%3D%20MODAL_ID%3B%20%09host.style.cssText%20%3D%20%22position%3Afixed%3Binset%3A0%3Bz-index%3A2147483647%3B%22%3B%20%09const%20shadow%20%3D%20host.attachShadow(%7B%20mode%3A%20%22open%22%20%7D)%3B%20%09shadow.innerHTML%20%3D%20%22%3Cstyle%3E%3Ahost%20%7B%20all%3A%20initial%3B%20%7D*%20%7B%20box-sizing%3A%20border-box%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20%5C%22Segoe%20UI%5C%22%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%20%7D.ogpx-backdrop%20%7B%20position%3A%20fixed%3B%20inset%3A%200%3B%20background%3A%20rgba(0%2C0%2C0%2C.55)%3B%20%7D.ogpx-panel%20%7B%20position%3A%20fixed%3B%20top%3A%200%3B%20right%3A%200%3B%20height%3A%20100vh%3B%20width%3A%20min(480px%2C%20100vw)%3B%20background%3A%20%23ffffff%3B%20color%3A%20%231f2328%3B%20box-shadow%3A%20-4px%200%2020px%20rgba(0%2C0%2C0%2C.25)%3B%20display%3A%20flex%3B%20flex-direction%3A%20column%3B%20%7D%40media%20(prefers-color-scheme%3A%20dark)%20%7B%20.ogpx-panel%20%7B%20background%3A%20%23161b22%3B%20color%3A%20%23e6edf3%3B%20%7D%20%7D.ogpx-header%20%7B%20padding%3A%20.8rem%201rem%3B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20justify-content%3A%20space-between%3B%20border-bottom%3A%201px%20solid%20rgba(127%2C127%2C127%2C.3)%3B%20%7D.ogpx-header%20h2%20%7B%20margin%3A%200%3B%20font-size%3A%201rem%3B%20font-weight%3A%20700%3B%20%7D.ogpx-close%20%7B%20background%3A%20transparent%3B%20border%3A%200%3B%20font-size%3A%201.4rem%3B%20line-height%3A%201%3B%20cursor%3A%20pointer%3B%20color%3A%20inherit%3B%20padding%3A%200%20.3rem%3B%20%7D.ogpx-body%20%7B%20padding%3A%201rem%3B%20overflow-y%3A%20auto%3B%20flex%3A%201%3B%20font-size%3A%20.85rem%3B%20line-height%3A%201.5%3B%20%7D.ogpx-section%20%7B%20margin-bottom%3A%201.4rem%3B%20%7D.ogpx-section%20h3%20%7B%20margin%3A%200%200%20.5rem%3B%20font-size%3A%20.8rem%3B%20text-transform%3A%20uppercase%3B%20letter-spacing%3A%20.06em%3B%20color%3A%20%236b7280%3B%20border-bottom%3A%201px%20dashed%20rgba(127%2C127%2C127%2C.4)%3B%20padding-bottom%3A%20.2rem%3B%20%7D.ogpx-row%20%7B%20display%3A%20grid%3B%20grid-template-columns%3A%20120px%201fr%3B%20gap%3A%20.5rem%3B%20padding%3A%20.4rem%200%3B%20border-bottom%3A%201px%20solid%20rgba(127%2C127%2C127%2C.15)%3B%20%7D.ogpx-row%3Alast-child%20%7B%20border-bottom%3A%200%3B%20%7D.ogpx-key%20%7B%20font-family%3A%20ui-monospace%2C%20%5C%22SF%20Mono%5C%22%2C%20Menlo%2C%20Consolas%2C%20monospace%3B%20font-size%3A%20.78rem%3B%20color%3A%20%236b7280%3B%20word-break%3A%20break-all%3B%20%7D.ogpx-val%20%7B%20word-break%3A%20break-word%3B%20%7D.ogpx-val%20a%20%7B%20color%3A%20%2358a6ff%3B%20text-decoration%3A%20none%3B%20%7D.ogpx-val%20a%3Ahover%20%7B%20text-decoration%3A%20underline%3B%20%7D.ogpx-imgwrap%20img%20%7B%20max-width%3A%20100%25%3B%20height%3A%20auto%3B%20border-radius%3A%206px%3B%20border%3A%201px%20solid%20rgba(127%2C127%2C127%2C.3)%3B%20display%3A%20block%3B%20margin-bottom%3A%20.3rem%3B%20background%3A%20%23fff%3B%20%7D.ogpx-imgerr%20%7B%20color%3A%20%23d1242f%3B%20font-size%3A%20.75rem%3B%20margin-bottom%3A%20.3rem%3B%20%7D.ogpx-imgurl%20%7B%20font-size%3A%20.72rem%3B%20color%3A%20%236b7280%3B%20word-break%3A%20break-all%3B%20%7D.ogpx-muted%20%7B%20color%3A%20%236b7280%3B%20font-size%3A%20.8rem%3B%20margin%3A%200%3B%20%7D.ogpx-summary%20%7B%20background%3A%20rgba(88%2C166%2C255%2C.08)%3B%20border%3A%201px%20solid%20rgba(88%2C166%2C255%2C.3)%3B%20border-radius%3A%206px%3B%20padding%3A%20.6rem%20.8rem%3B%20margin-bottom%3A%201rem%3B%20font-size%3A%20.8rem%3B%20%7D.ogpx-summary%20code%20%7B%20background%3A%20rgba(127%2C127%2C127%2C.15)%3B%20padding%3A%200%20.3rem%3B%20border-radius%3A%203px%3B%20%7D%3C%2Fstyle%3E%3Cdiv%20class%3D%5C%22ogpx-backdrop%5C%22%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%5C%22ogpx-panel%5C%22%20role%3D%5C%22dialog%5C%22%20aria-label%3D%5C%22OGP%20Checker%5C%22%3E%3Cdiv%20class%3D%5C%22ogpx-header%5C%22%3E%3Ch2%3EOGP%20Checker%3C%2Fh2%3E%3Cbutton%20class%3D%5C%22ogpx-close%5C%22%20aria-label%3D%5C%22%E9%96%89%E3%81%98%E3%82%8B%5C%22%3E%C3%97%3C%2Fbutton%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%5C%22ogpx-body%5C%22%3E%3Cdiv%20class%3D%5C%22ogpx-summary%5C%22%3E%3Cdiv%3E%3Cstrong%3EURL%3A%3C%2Fstrong%3E%20%22%20%2B%20esc(location.href)%20%2B%20%22%3C%2Fdiv%3E%3Cdiv%3E%3Cstrong%3E%26lt%3Btitle%26gt%3B%3A%3C%2Fstrong%3E%20%22%20%2B%20esc(titleTag)%20%2B%20%22%3C%2Fdiv%3E%22%20%2B%20(canonical%20%3F%20%60%3Cdiv%3E%3Cstrong%3Ecanonical%3A%3C%2Fstrong%3E%20%24%7Besc(canonical)%7D%3C%2Fdiv%3E%60%20%3A%20%22%22)%20%2B%20%22%3C%2Fdiv%3E%3Cdiv%20class%3D%5C%22ogpx-section%5C%22%3E%3Ch3%3EOpen%20Graph%20(og%3A*)%3C%2Fh3%3E%22%20%2B%20renderKV(og)%20%2B%20%22%3C%2Fdiv%3E%3Cdiv%20class%3D%5C%22ogpx-section%5C%22%3E%3Ch3%3ETwitter%20Card%20(twitter%3A*)%3C%2Fh3%3E%22%20%2B%20renderKV(twitter)%20%2B%20%22%3C%2Fdiv%3E%3Cdiv%20class%3D%5C%22ogpx-section%5C%22%3E%3Ch3%3E%E5%9F%BA%E6%9C%AC%20meta%3C%2Fh3%3E%22%20%2B%20renderKV(basic)%20%2B%20%22%3C%2Fdiv%3E%3Cdiv%20class%3D%5C%22ogpx-section%5C%22%3E%3Ch3%3E%E3%81%9D%E3%81%AE%E4%BB%96%20meta%3C%2Fh3%3E%22%20%2B%20renderKV(others)%20%2B%20%22%3C%2Fdiv%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%22%3B%20%09const%20close%20%3D%20()%20%3D%3E%20host.remove()%3B%20%09const%20closeBtn%20%3D%20shadow.querySelector(%22.ogpx-close%22)%3B%20%09const%20backdrop%20%3D%20shadow.querySelector(%22.ogpx-backdrop%22)%3B%20%09if%20(closeBtn)%20closeBtn.addEventListener(%22click%22%2C%20close)%3B%20%09if%20(backdrop)%20backdrop.addEventListener(%22click%22%2C%20close)%3B%20%09const%20onKey%20%3D%20(e)%20%3D%3E%20%7B%20%09%09if%20(e.key%20%3D%3D%3D%20%22Escape%22)%20%7B%20%09%09%09close()%3B%20%09%09%09document.removeEventListener(%22keydown%22%2C%20onKey)%3B%20%09%09%7D%20%09%7D%3B%20%09document.addEventListener(%22keydown%22%2C%20onKey)%3B%20%09document.body.appendChild(host)%3B%20%7D)()%3Bvoid%200%3B
ページの <meta> タグをブラウザ内で読むだけで、ネットワークには送信されません。localhost や社内ページでも動きます。
使い方
- OGP を確認したいページを開きます (
localhostでも OK) - ブックマークバーに登録した「ogp-checker」をクリックします
- 右側にパネルで OGP / Twitter Card / 基本 meta 情報が表示されます