1+ async function checkSEO ( ) {
2+ const url = document . getElementById ( 'url-input' ) . value ;
3+
4+ // Clear previous results
5+ document . getElementById ( 'tag-list' ) . innerHTML = '' ;
6+ document . getElementById ( 'status' ) . innerHTML = '' ;
7+
8+ if ( ! url ) {
9+ document . getElementById ( 'status' ) . textContent = ` Please enter a valid URL.` ;
10+ return ;
11+ }
12+
13+ try {
14+ // Use a proxy server to bypass CORS restrictions (AllOrigins or your custom proxy)
15+ const proxyUrl = 'https://api.allorigins.win/get?url=' ;
16+ const targetUrl = encodeURIComponent ( url ) ;
17+
18+ // Fetch the HTML content of the given URL through the proxy
19+ const response = await fetch ( proxyUrl + targetUrl ) ;
20+ if ( ! response . ok ) throw new Error ( 'Failed to fetch the URL' ) ;
21+
22+ const data = await response . json ( ) ;
23+ const html = data . contents ; // HTML content of the fetched URL
24+ const parser = new DOMParser ( ) ;
25+ const doc = parser . parseFromString ( html , 'text/html' ) ; // Parse HTML to DOM
26+
27+ // Get all <meta> tags from the document
28+ const metaTags = doc . getElementsByTagName ( 'meta' ) ;
29+ const tagList = document . getElementById ( 'tag-list' ) ;
30+ let jsonResults = [ ] ;
31+
32+ // Loop through the meta tags and create JSON objects
33+ Array . from ( metaTags ) . forEach ( tag => {
34+ const name = tag . getAttribute ( 'name' ) ;
35+ const property = tag . getAttribute ( 'property' ) ;
36+ const content = tag . getAttribute ( 'content' ) ;
37+
38+ // Create the base object for the meta tag
39+ let tagObject = {
40+ "Tag name" : name || property || "Unknown" ,
41+ "Content" : content || "No Content" ,
42+ "isMatch" : content ? true : false ,
43+ "IsFacebook" : ( property && property . includes ( 'og:' ) ) ? true : false ,
44+ "IsTwitter" : ( name && name . includes ( 'twitter' ) ) ? true : false ,
45+ "isGoogle" : ( name && name . includes ( 'google' ) ) ? true : false ,
46+ "fullTag" : tag . outerHTML
47+ } ;
48+
49+ // Push the tag object to JSON results
50+ jsonResults . push ( tagObject ) ;
51+
52+ // Create a tag item to display on the page
53+ const tagItem = document . createElement ( 'div' ) ;
54+ tagItem . classList . add ( 'card' , 'mb-3' ) ;
55+
56+ // Create tag name heading with icons
57+ const tagName = document . createElement ( 'h5' ) ;
58+ tagName . classList . add ( 'card-header' , 'd-flex' , 'justify-content-between' ) ;
59+
60+ // Create a div for icons to be aligned on the right
61+ const iconDiv = document . createElement ( 'div' ) ;
62+ iconDiv . classList . add ( 'd-flex' , 'align-items-center' ) ; // Ensuring icons are aligned properly
63+
64+ // Add icon if isMatch is Yes
65+ let iconHTML = "" ;
66+ if ( tagObject [ "isMatch" ] ) {
67+ iconHTML = `<i class="bi bi-check-circle text-success ms-auto"></i> ` ;
68+ } else {
69+ iconHTML = `<i class="bi bi-dash-circle ms-auto"></i> ` ;
70+ }
71+
72+ // Add Facebook icon if it's a Facebook tag
73+ if ( tagObject [ "IsFacebook" ] ) {
74+ iconHTML += `<i class="bi bi-facebook text-primary ms-2"></i> ` ;
75+ }
76+
77+ // Add Google icon if it's a Google tag
78+ if ( tagObject [ "isGoogle" ] ) {
79+ iconHTML += `<i class="bi bi-google text-danger ms-2"></i> ` ;
80+ }
81+
82+ // Add Twitter icon if it's a Twitter tag
83+ if ( tagObject [ "IsTwitter" ] ) {
84+ iconHTML += `<i class="bi bi-twitter text-info ms-2"></i> ` ;
85+ }
86+
87+ // Set the tag name with icons
88+ tagName . innerHTML = `${ tagObject [ "Tag name" ] } ${ iconHTML } ;
89+ tagItem . appendChild ( tagName ) ;
90+
91+ // Create description for other details
92+ const tagDescription = document . createElement ( 'div' ) ;
93+ tagDescription . classList . add ( 'card-body' ) ;
94+ tagDescription . innerHTML = `
95+ <pre>${ tagObject [ "fullTag" ] . replace ( / < / g, "<" ) . replace ( / > / g, ">" ) }
96+ ` ;
97+ tagItem . appendChild ( tagDescription ) ;
98+
99+ // Append the tag item to the list
100+ tagList . appendChild ( tagItem ) ;
101+ } ) ;
102+
103+ // Display the overall status
104+ if ( jsonResults . length > 0 ) {
105+ document . getElementById ( 'status' ) . textContent = `${ jsonResults . length } ;
106+ } else {
107+ document . getElementById ( 'status' ) . textContent = 'No meta tags found.' ;
108+ }
109+
110+ } catch ( error ) {
111+ console . error ( 'Error:' , error ) ;
112+ document . getElementById ( 'status' ) . textContent = 'An error occurred while fetching the URL.' ;
113+ }
114+ }
115+
116+ document . getElementById ( 'checkBtn' ) . addEventListener ( 'click' , checkSEO ) ;
0 commit comments