Created
September 19, 2024 05:37
-
-
Save twinkfrag/988f878862a852b062f77bc4ddbf1f8f to your computer and use it in GitHub Desktop.
OGPを軽くチェックするブックマークレット
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 参考: https://sinap.jp/blog/md5pj5uixdzi | |
| テキスト結合等不要なコードの整理を適用 | |
| */ | |
| (function(){ | |
| const body = document.querySelector('body'); | |
| const metas = document.querySelectorAll('meta'); | |
| let og_type, og_title, og_sitename, og_admin, og_locale, og_image, og_url, og_description, h_description; | |
| metas.forEach(meta => { | |
| const property = meta.getAttribute("property"); | |
| if (property) { | |
| switch (property) { | |
| case 'og:type': og_type = meta.content; break; | |
| case 'og:title': og_title = meta.content; break; | |
| case 'og:site_name': og_sitename = meta.content; break; | |
| case 'fb:admins': og_admin = meta.content; break; | |
| case 'og:locale': og_locale = meta.content; break; | |
| case 'og:image': og_image = meta.content; break; | |
| case 'og:url': og_url = meta.content; break; | |
| case 'og:description': og_description = meta.content; break; | |
| } | |
| } else if (meta.name === "description") { | |
| h_description = meta.content; | |
| } | |
| }); | |
| const h_title = document.querySelector('title').innerHTML; | |
| const h_url = document.URL; | |
| let addtext = ` | |
| <div onClick="close();" class="ogp-check" id="ogp-wrapper"> | |
| <style> | |
| div.sinap_ogp_chk_wrapper { | |
| width: 100%; | |
| height: 2000px; | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 2000; | |
| font-size: 12px; | |
| color: #000; | |
| text-align: left; | |
| top: 0; | |
| left: 0; | |
| } | |
| div.sinap_ogp_chk_wrapper div.check-content { | |
| width: 600px; | |
| height: auto; | |
| background-color: rgba(255, 255, 255, .9); | |
| margin: 50px auto; | |
| padding: 20px; | |
| } | |
| div.sinap_ogp_chk_wrapper div.check-content h2 { | |
| font-size: 1em; | |
| margin-bottom: 15px; | |
| width: 100%; | |
| background-color: #666666; | |
| color: #fff; | |
| padding: 3px; | |
| text-align: left; | |
| } | |
| div.sinap_ogp_chk_wrapper p.value-content { | |
| margin-left: 20px; | |
| overflow: hidden; | |
| border-bottom: 1px solid #cccccc; | |
| padding-bottom: 2px; | |
| margin-bottom: 5px; | |
| text-align: left; | |
| } | |
| div.sinap_ogp_chk_wrapper p.value-content span { | |
| float: left; | |
| font-size: 0.8em; | |
| display: block; | |
| padding: 2px; | |
| text-align: left; | |
| } | |
| div.sinap_ogp_chk_wrapper span.label { | |
| width: 200px; | |
| font-weight: bold; | |
| text-align: left; | |
| } | |
| div.sinap_ogp_chk_wrapper p.note { | |
| margin-top: 10px; | |
| margin-bottom: 20px; | |
| font-weight: bold; | |
| color: blue; | |
| text-align: left; | |
| } | |
| div.sinap_ogp_chk_wrapper p.note.error { | |
| color: red; | |
| font-size: 1em; | |
| text-align: left; | |
| } | |
| </style> | |
| <div class="check-content"> | |
| <div class="value-list" id="image"> | |
| <h2>イメージタグ</h2> | |
| <p class="value-content"><span class="label">イメージタグ</span><span class="value"><img src="${og_image}"></span></p> | |
| ${og_image === undefined ? '<p class="note error">× og:imageが設定されていません。</p>' : ` | |
| <p class="value-content"><span class="label">url</span><span class="value">${og_image}</span></p> | |
| ${og_image.match(/http:\/\/[^\/]*/) && h_url.match(/http:\/\/[^\/]*/) && og_image.match(/http:\/\/[^\/]*/)[0].replace("http://", "") !== h_url.match(/http:\/\/[^\/]*/)[0].replace("http://", "") ? | |
| '<p class="note error">× og:imageを別のドメインから読み込んでいます。</p>' : | |
| '<p class="note">○ og:imageが設定されています。</p>' | |
| } | |
| `} | |
| </div> | |
| <div class="value-list" id="url"> | |
| <h2>URL値</h2> | |
| <p class="value-content"><span class="label">og:url</span><span class="value">${og_url}</span></p> | |
| <p class="value-content"><span class="label">アドレスバー</span><span class="value">${h_url}</span></p> | |
| ${og_url === undefined ? '<p class="note error">× og:urlが設定されていません。</p>' : og_url !== h_url ? '<p class="note error">× og:urlとアドレスバーの値がちがいます。</p>' : '<p class="note">○ og:urlとアドレスバーの値は同一のものです。</p>'} | |
| </div> | |
| <div class="value-list" id="title"> | |
| <h2>タイトル値</h2> | |
| <p class="value-content"><span class="label">og:title</span><span class="value">${og_title}</span></p> | |
| <p class="value-content"><span class="label">titleタグ</span><span class="value">${h_title}</span></p> | |
| ${og_title === undefined ? '<p class="note error">× og:titleが設定されていません。</p>' : og_title !== h_title ? '<p class="note error">× og:titleとタイトルタグの値がちがいます。</p>' : '<p class="note">○og:titleとタイトルタグの値は同一のものです。</p>'} | |
| </div> | |
| <div class="value-list" id="description"> | |
| <h2>デスクリプション値</h2> | |
| <p class="value-content"><span class="label">og:description</span><span class="value">${og_description}</span></p> | |
| <p class="value-content"><span class="label">descriptionタグ</span><span class="value">${h_description}</span></p> | |
| ${og_description === undefined ? '<p class="note error">× og:descriptionが設定されていません。</p>' : og_description !== h_description ? '<p class="note error">× og:descriptionとmata:descriptionの値がちがいます。</p>' : '<p class="note">○ og:descriptionとmata:descriptionの値は同一のものです。</p>'} | |
| </div> | |
| <div class="value-list"> | |
| <h2>その他固定値</h2> | |
| <p class="value-content"><span class="label">og:site_name</span><span class="value">${og_sitename}</span></p> | |
| <p class="value-content"><span class="label">og:type</span><span class="value">${og_type}</span></p> | |
| <p class="value-content"><span class="label">og:locale</span><span class="value">${og_locale}</span></p> | |
| <p class="value-content"><span class="label">fb:admins</span><span class="value">${og_admin}</span></p> | |
| ${og_sitename !== undefined && og_type !== undefined && og_locale !== undefined && og_admin !== undefined ? '<p class="note">○ その他の項目は設定されています</p>' : `<p class="note error">× ${[og_sitename === undefined ? 'og:sitename' : '', og_type === undefined ? 'og:type' : '', og_locale === undefined ? 'og:locale' : '', og_admin === undefined ? 'fb:admin' : ''].filter(Boolean).join(', ')} が設定されていません</p>`} | |
| </div> | |
| </div> | |
| </div>`; | |
| const existingDiv = document.getElementById('sinap_ogp_chk_div'); | |
| if (existingDiv) body.removeChild(existingDiv); | |
| const divElem = document.createElement('div'); | |
| divElem.className = "sinap_ogp_chk_wrapper"; | |
| divElem.id = "sinap_ogp_chk_div"; | |
| divElem.innerHTML = addtext; | |
| window.scroll(0, 0); | |
| body.appendChild(divElem); | |
| divElem.onclick = () => body.removeChild(divElem); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| javascript:(function(){const b=document.querySelector('body');const m=document.querySelectorAll('meta');let og_type,og_title,og_sitename,og_admin,og_locale,og_image,og_url,og_description,h_d;m.forEach(meta=>{const p=meta.getAttribute("property");if(p){switch(p){case 'og:type':og_type=meta.content;break;case 'og:title':og_title=meta.content;break;case 'og:site_name':og_sitename=meta.content;break;case 'fb:admins':og_admin=meta.content;break;case 'og:locale':og_locale=meta.content;break;case 'og:image':og_image=meta.content;break;case 'og:url':og_url=meta.content;break;case 'og:description':og_description=meta.content;break;}}else if(meta.name==="description"){h_d=meta.content;}});const h_t=document.querySelector('title').innerHTML;const h_u=document.URL;let addtext=`<div onClick="close();" class="ogp-check" id="ogp-wrapper"><style>div.sinap_ogp_chk_wrapper{width:100%;height:2000px;position:absolute;background-color:rgba(0,0,0,0.5);z-index:2000;font-size:12px;color:#000;text-align:left;top:0;left:0;}div.sinap_ogp_chk_wrapper div.check-content{width:600px;height:auto;background-color:rgba(255,255,255,.9);margin:50px auto;padding:20px;}div.sinap_ogp_chk_wrapper div.check-content h2{font-size:1em;margin-bottom:15px;width:100%;background-color:#666666;color:#fff;padding:3px;text-align:left;}div.sinap_ogp_chk_wrapper p.value-content{margin-left:20px;overflow:hidden;border-bottom:1px solid #cccccc;padding-bottom:2px;margin-bottom:5px;text-align:left;}div.sinap_ogp_chk_wrapper p.value-content span{float:left;font-size:0.8em;display:block;padding:2px;text-align:left;}div.sinap_ogp_chk_wrapper span.label{width:200px;font-weight:bold;text-align:left;}div.sinap_ogp_chk_wrapper p.note{margin-top:10px;margin-bottom:20px;font-weight:bold;color:blue;text-align:left;}div.sinap_ogp_chk_wrapper p.note.error{color:red;font-size:1em;text-align:left;}</style><div class="check-content"><div class="value-list" id="image"><h2>イメージタグ</h2><p class="value-content"><span class="label">イメージタグ</span><span class="value"><img src="${og_image}"></span></p>${og_image===undefined?'<p class="note error">× og:imageが設定されていません。</p>':`<p class="value-content"><span class="label">url</span><span class="value">${og_image}</span></p>${og_image.match(/http:\/\/[^\/]*/)&&h_u.match(/http:\/\/[^\/]*/)&&og_image.match(/http:\/\/[^\/]*/)[0].replace("http://","")!==h_u.match(/http:\/\/[^\/]*/)[0].replace("http://","")?'<p class="note error">× og:imageを別のドメインから読み込んでいます。</p>':'<p class="note">○ og:imageが設定されています。</p>'}`} </div><div class="value-list" id="url"><h2>URL値</h2><p class="value-content"><span class="label">og:url</span><span class="value">${og_url}</span></p><p class="value-content"><span class="label">アドレスバー</span><span class="value">${h_u}</span></p>${og_url===undefined?'<p class="note error">× og:urlが設定されていません。</p>':og_url!==h_u?'<p class="note error">× og:urlとアドレスバーの値がちがいます。</p>':'<p class="note">○ og:urlとアドレスバーの値は同一のものです。</p>'}</div><div class="value-list" id="title"><h2>タイトル値</h2><p class="value-content"><span class="label">og:title</span><span class="value">${og_title}</span></p><p class="value-content"><span class="label">titleタグ</span><span class="value">${h_t}</span></p>${og_title===undefined?'<p class="note error">× og:titleが設定されていません。</p>':og_title!==h_t?'<p class="note error">× og:titleとタイトルタグの値がちがいます。</p>':'<p class="note">○og:titleとタイトルタグの値は同一のものです。</p>'}</div><div class="value-list" id="description"><h2>デスクリプション値</h2><p class="value-content"><span class="label">og:description</span><span class="value">${og_description}</span></p><p class="value-content"><span class="label">descriptionタグ</span><span class="value">${h_d}</span></p>${og_description===undefined?'<p class="note error">× og:descriptionが設定されていません。</p>':og_description!==h_d?'<p class="note error">× og:descriptionとmata:descriptionの値がちがいます。</p>':'<p class="note">○ og:descriptionとmata:descriptionの値は同一のものです。</p>'}</div><div class="value-list"><h2>その他固定値</h2><p class="value-content"><span class="label">og:site_name</span><span class="value">${og_sitename}</span></p><p class="value-content"><span class="label">og:type</span><span class="value">${og_type}</span></p><p class="value-content"><span class="label">og:locale</span><span class="value">${og_locale}</span></p><p class="value-content"><span class="label">fb:admins</span><span class="value">${og_admin}</span></p>${og_sitename!==undefined&&og_type!==undefined&&og_locale!==undefined&&og_admin!==undefined?'<p class="note">○ その他の項目は設定されています</p>':`<p class="note error">× ${[og_sitename===undefined?'og:sitename':'',og_type===undefined?'og:type':'',og_locale===undefined?'og:locale':'',og_admin===undefined?'fb:admin':''].filter(Boolean).join(', ')} が設定されていません</p>`}</div></div></div>`;const e=document.getElementById('sinap_ogp_chk_div');if(e)b.removeChild(e);const d=document.createElement('div');d.className="sinap_ogp_chk_wrapper";d.id="sinap_ogp_chk_div";d.innerHTML=addtext;window.scroll(0,0);b.appendChild(d);d.onclick=()=>b.removeChild(d);})(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| javascript:(function(){ | |
| const b=document.querySelector('body'); | |
| const m=document.querySelectorAll('meta'); | |
| let og_type,og_title,og_sitename,og_admin,og_locale,og_image,og_url,og_description,h_d; | |
| m.forEach(meta=>{ | |
| const p=meta.getAttribute("property"); | |
| if(p){ | |
| switch(p){ | |
| case 'og:type':og_type=meta.content;break; | |
| case 'og:title':og_title=meta.content;break; | |
| case 'og:site_name':og_sitename=meta.content;break; | |
| case 'fb:admins':og_admin=meta.content;break; | |
| case 'og:locale':og_locale=meta.content;break; | |
| case 'og:image':og_image=meta.content;break; | |
| case 'og:url':og_url=meta.content;break; | |
| case 'og:description':og_description=meta.content;break; | |
| } | |
| }else if(meta.name==="description"){ | |
| h_d=meta.content; | |
| } | |
| }); | |
| const h_t=document.querySelector('title').innerHTML; | |
| const h_u=document.URL; | |
| let addtext=` | |
| <div onClick="close();" class="ogp-check" id="ogp-wrapper"> | |
| <style> | |
| div.sinap_ogp_chk_wrapper{ | |
| width:100%; | |
| height:2000px; | |
| position:absolute; | |
| background-color:rgba(0,0,0,0.5); | |
| z-index:2000; | |
| font-size:12px; | |
| color:#000; | |
| text-align:left; | |
| top:0; | |
| left:0; | |
| } | |
| div.sinap_ogp_chk_wrapper div.check-content{ | |
| width:600px; | |
| height:auto; | |
| background-color:rgba(255,255,255,.9); | |
| margin:50px auto; | |
| padding:20px; | |
| } | |
| div.sinap_ogp_chk_wrapper div.check-content h2{ | |
| font-size:1em; | |
| margin-bottom:15px; | |
| width:100%; | |
| background-color:#666666; | |
| color:#fff; | |
| padding:3px; | |
| text-align:left; | |
| } | |
| div.sinap_ogp_chk_wrapper p.value-content{ | |
| margin-left:20px; | |
| overflow:hidden; | |
| border-bottom:1px solid #cccccc; | |
| padding-bottom:2px; | |
| margin-bottom:5px; | |
| text-align:left; | |
| } | |
| div.sinap_ogp_chk_wrapper p.value-content span{ | |
| float:left; | |
| font-size:0.8em; | |
| display:block; | |
| padding:2px; | |
| text-align:left; | |
| } | |
| div.sinap_ogp_chk_wrapper span.label{ | |
| width:200px; | |
| font-weight:bold; | |
| text-align:left; | |
| } | |
| div.sinap_ogp_chk_wrapper p.note{ | |
| margin-top:10px; | |
| margin-bottom:20px; | |
| font-weight:bold; | |
| color:blue; | |
| text-align:left; | |
| } | |
| div.sinap_ogp_chk_wrapper p.note.error{ | |
| color:red; | |
| font-size:1em; | |
| text-align:left; | |
| } | |
| </style> | |
| <div class="check-content"> | |
| <div class="value-list" id="image"> | |
| <h2>イメージタグ</h2> | |
| <p class="value-content"><span class="label">イメージタグ</span><span class="value"><img src="${og_image}"></span></p> | |
| ${og_image===undefined?'<p class="note error">× og:imageが設定されていません。</p>':` | |
| <p class="value-content"><span class="label">url</span><span class="value">${og_image}</span></p> | |
| ${og_image.match(/http:\/\/[^\/]*/) && h_u.match(/http:\/\/[^\/]*/) && og_image.match(/http:\/\/[^\/]*/)[0].replace("http://","")!==h_u.match(/http:\/\/[^\/]*/)[0].replace("http://","")? | |
| '<p class="note error">× og:imageを別のドメインから読み込んでいます。</p>': | |
| '<p class="note">○ og:imageが設定されています。</p>' | |
| } | |
| `} | |
| </div> | |
| <div class="value-list" id="url"> | |
| <h2>URL値</h2> | |
| <p class="value-content"><span class="label">og:url</span><span class="value">${og_url}</span></p> | |
| <p class="value-content"><span class="label">アドレスバー</span><span class="value">${h_u}</span></p> | |
| ${og_url===undefined?'<p class="note error">× og:urlが設定されていません。</p>':og_url!==h_u?'<p class="note error">× og:urlとアドレスバーの値がちがいます。</p>':'<p class="note">○ og:urlとアドレスバーの値は同一のものです。</p>'} | |
| </div> | |
| <div class="value-list" id="title"> | |
| <h2>タイトル値</h2> | |
| <p class="value-content"><span class="label">og:title</span><span class="value">${og_title}</span></p> | |
| <p class="value-content"><span class="label">titleタグ</span><span class="value">${h_t}</span></p> | |
| ${og_title===undefined?'<p class="note error">× og:titleが設定されていません。</p>':og_title!==h_t?'<p class="note error">× og:titleとタイトルタグの値がちがいます。</p>':'<p class="note">○og:titleとタイトルタグの値は同一のものです。</p>'} | |
| </div> | |
| <div class="value-list" id="description"> | |
| <h2>デスクリプション値</h2> | |
| <p class="value-content"><span class="label">og:description</span><span class="value">${og_description}</span></p> | |
| <p class="value-content"><span class="label">descriptionタグ</span><span class="value">${h_d}</span></p> | |
| ${og_description===undefined?'<p class="note error">× og:descriptionが設定されていません。</p>':og_description!==h_d?'<p class="note error">× og:descriptionとmata:descriptionの値がちがいます。</p>':'<p class="note">○ og:descriptionとmata:descriptionの値は同一のものです。</p>'} | |
| </div> | |
| <div class="value-list"> | |
| <h2>その他固定値</h2> | |
| <p class="value-content"><span class="label">og:site_name</span><span class="value">${og_sitename}</span></p> | |
| <p class="value-content"><span class="label">og:type</span><span class="value">${og_type}</span></p> | |
| <p class="value-content"><span class="label">og:locale</span><span class="value">${og_locale}</span></p> | |
| <p class="value-content"><span class="label">fb:admins</span><span class="value">${og_admin}</span></p> | |
| ${og_sitename!==undefined&&og_type!==undefined&&og_locale!==undefined&&og_admin!==undefined?'<p class="note">○ その他の項目は設定されています</p>':`<p class="note error">× ${[og_sitename===undefined?'og:sitename':'',og_type===undefined?'og:type':'',og_locale===undefined?'og:locale':'',og_admin===undefined?'fb:admin':''].filter(Boolean).join(', ')} が設定されていません</p>`} | |
| </div> | |
| </div> | |
| </div>`; | |
| const e=document.getElementById('sinap_ogp_chk_div'); | |
| if(e)b.removeChild(e); | |
| const d=document.createElement('div'); | |
| d.className="sinap_ogp_chk_wrapper"; | |
| d.id="sinap_ogp_chk_div"; | |
| d.innerHTML=addtext; | |
| window.scroll(0,0); | |
| b.appendChild(d); | |
| d.onclick=()=>b.removeChild(d); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment