html 实时清单 - 此脚本将检查元标记，站点地图，GA，favicon，共享元标记是否已正确设置。不是花哨的

Posted 2021-05-11

 <!-- Pre live checklist. Delete this section when is ready to go live. -->
	
	<!-- Delete From   -->
	<script type="application/javascript">
		window.onload = function() { 
			
		   var message = "<ul>";
		   // SEO
		   var keywords = $('meta[name=keywords]').attr("content");
		   var description = $('meta[name=description]').attr("content");
		   var author = $('meta[name=author]').attr("content");
		   
		   //Open Graph
		   var ogurltag = $('meta[property="og:url"]').attr('content');
		   var ogtitletag = $('meta[property="og:title"]').attr('content');
		   var ogdescriptiontag = $('meta[property="og:description"]').attr('content');
		   var ogimagetag = $('meta[property="og:image"]').attr('content');
		   
		   //Twitter Graph
		   var twitterurltag = $('meta[name="twitter:url"]').attr('content');
		   var twittertitletag = $('meta[name="twitter:title"]').attr('content');
		   var twitterdescriptiontag = $('meta[name="twitter:description"]').attr('content');
		   var twitterimagetag = $('meta[name="twitter:image"]').attr('content');
		   
		   //canonical
		   var canonical = $('link[rel="canonical"]').attr('href');
		   
		   if(keywords == "" || description == "" || author == "" ){
			   message += "<li>Meta tags are empty</li>";
		   }
		   if(ogurltag == "http://yourdomain.com/" || ogurltag == "" || ogtitletag == "Open Graph Title" || ogtitletag == "" || ogdescriptiontag == "Open Graph Description"  || ogdescriptiontag == "" ||  ogimagetag == "" || ogimagetag == "http://yourdomain.com/path/to/image.jpg"){
			   message += "<li>Open Graph share meta tags are empty. Please remove it if is not required. </li>";
		   }
		   if(twitterurltag == "http://yourdomain.com/" || twitterurltag == "" || twittertitletag == "Open Graph Title" || twittertitletag == ""  || twitterdescriptiontag == "Open Graph Description" || twitterdescriptiontag == "" || twitterimagetag == "" || twitterimagetag == "http://yourdomain.com/path/to/image.jpg"){
			   message += "<li>Twitter Graph share meta tags tags are empty. Please remove it if is not required. </li>";
		   }
		   
/*
		   if(canonical == "http://yourdomain.com/" || canonical == ""){
			   message += "<li>Check canonical href</li>";
		   }
*/
		   
		   // check Favicon
		   function check_favicon(){
			   
			  var apple_icon = $('link[rel="apple-touch-icon"]').attr("sizes");
			  if(!apple_icon){
				  message += "<li>Favicon hasn't been installed properly. please go to <a href='http://realfavicongenerator.net/' target='_blank'>http://realfavicongenerator.net/</a> for more info</li>";
				  
			  }
			  
		   }
		   check_favicon();
		   
		   
		   // check Google Analytic
		   function check_ga() {
			  if (typeof ga === 'function') {
			    ga(function(tracker) {
				  if(tracker.get('trackingId') == "UA-XXXXX-X"){
					  message += "<li>UA-XXXXX-X is not valid Google Analytic </li>";
				  }
			   	});
			  } else {
			    	message += "<li>No Google Analytics detected</li>";
			  }
			}
			
		   check_ga();
		   
		   //Check Sitemap
		   function UrlExists(url)
			{
			    var http = new XMLHttpRequest();
			    http.open('HEAD', url, false);
			    http.send();
			    return http.status!=404;
			}	
			if(!UrlExists("/sitemap.xml")){
				message += "<li>No sitemap</li>";
			}
			
	
		    $.getJSON("http://jsonip.com?callback=?", function (data) {
			    
			    if(data.ip == "203.87.59.62"){
				    $("body").append("<div class='prelive'><div class='prelive-content'><h2>Live checklist - Only visible on Efront IP</h2>"+message+"</ul></div><div class='toogle-btn'>Click here to show</div></div>");
				    $('.toogle-btn').click(function(){
					   if($(this).html()=="Click here to show"){
						   $(this).html("Click here to hide");
					   }else{
						   $(this).html("Click here to show");
					   }
					   $(".prelive-content").slideToggle();
				    });
			    }
			    
			});
		};		
		
	</script>
	<style>
		.prelive{
			font-family: arial;
			position: fixed;
			right: 0px;
			width: 400px;padding: 10px;
			background: #fff;
			top:0%;
			font-size: 13px !important;
			z-index: 9999
		}
		.prelive h2{
			font-size: 24px;
		}
		.prelive a{
			color: #000;font-style: italic;
		}
		.prelive-content{
			display: none;
		}
		.prelive ul{
			margin-left: 20px;
		}
		.prelive ul li{
			list-style: disc;
			margin-bottom: 5px;
		}
		.toogle-btn{
			margin-top: 20px;
			cursor: pointer;
			font-weight: bold;
			text-align: right;
		}
	</style>
	
	<!-- Delete To -->