-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanalyzer.js
134 lines (119 loc) · 5.47 KB
/
analyzer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
function ErrorTracker(analysisResult) {
const data = analysisResult;
// Error Check
titleCheck(data?.title);
descriptionCheck(data?.description);
}
// Count
let highIssues = null;
let mediumIssues = null;
let lowIssues = null;
let testPassed = null;
// Icon classes
const successIcon = ["an", "an-chack", "seo-icon", "seo-icon-success"];
const dangerIcon = ["an", "an-triangle", "seo-icon", "seo-icon-danger"];
const warningIcon = ["an", "an-square", "seo-icon", "seo-icon-warning"];
const infoIcon = ["an", "an-circle", "seo-icon", "seo-icon-info"];
// Alert classes
const successAlert = ["alert", "alert-success"];
const dangerAlert = ["alert", "alert-danger"];
const warningAlert = ["alert", "alert-warning"];
const infoAlert = ["alert", "alert-info"];
function titleCheck(title) {
const container = document.querySelector("[csi-title]");
const infoText = container.querySelector("[info-message]");
const icon = container.querySelector("[info-icon]");
const box = container.querySelector("[info-box]");
const tLength = container.querySelector("[info-length]");
const successCondition = title.length >= 45 && title.length <= 60;
const warningCondition = title.length < 45 && title.length > 25;
tLength.innerHTML = `${title.length} Characters`;
icon.className = "";
box.className = "";
if (successCondition) {
icon.classList.add(...successIcon);
box.classList.add(...successAlert);
infoText.innerHTML = "The webpage is using a good title tag.";
testPassed++;
} else if (warningCondition) {
icon.classList.add(...warningIcon);
box.classList.add(...warningAlert);
infoText.innerHTML = `The webpage is using a title tag with a length of <strong>${title.length} characters.</strong> We recommend using a title with a length between <strong>45 - 60 characters</strong> in order to fit Google Search results that have a 600-pixel limit.`;
mediumIssues++;
} else if (!title) {
icon.classList.add(...dangerIcon);
box.classList.add(...dangerAlert);
infoText.innerHTML = `This <strong>webpage lacks a title tag!</strong> Including a title tag is crucial as it provides a concise overview of the page for search engines.`;
highIssues++;
} else if (title.length > successCondition) {
icon.classList.add(...dangerIcon);
box.classList.add(...dangerAlert);
infoText.innerHTML = `The webpage is using a title tag with a length of <strong>${title.length} characters.</strong> It is recommended to use well-written and engaging titles with a length between <strong>45 - 60 characters</strong>.`;
highIssues++;
} else {
icon.classList.add(...dangerIcon);
box.classList.add(...dangerAlert);
infoText.innerHTML = `The webpage is using a title tag with a length of <strong>${title.length} characters.</strong> Please review the title length for optimal results.`;
highIssues++;
}
}
function descriptionCheck(description) {
const container = document.querySelector("[csi-description]");
const infoText = container.querySelector("[info-message]");
const icon = container.querySelector("[info-icon]");
const box = container.querySelector("[info-box]");
const tLength = container.querySelector("[info-length]");
const successCondition =
description.length >= 120 && description.length <= 160;
const warningCondition = description.length < 120 && description.length > 80;
tLength.innerHTML = `${description.length} Characters`;
icon.className = "";
box.className = "";
if (successCondition) {
icon.classList.add(...successIcon);
box.classList.add(...successAlert);
infoText.innerHTML = "This webpage has a good meta description.";
testPassed++;
} else if (warningCondition) {
icon.classList.add(...warningIcon);
box.classList.add(...warningAlert);
infoText.innerHTML = `This webpage has a meta description tag that is <strong>${description.length} characters long.</strong> It is recommended to use well-written and engaging meta descriptions with a length between <strong>80 and 160 characters (including spaces).</strong>`;
mediumIssues++;
} else if (!description) {
icon.classList.add(...dangerIcon);
box.classList.add(...dangerAlert);
infoText.innerHTML = `This page is <strong>lacking a meta description tag!</strong> This element is required to provide a brief overview of the page to search engines.`;
highIssues++;
} else if (description.length > successCondition) {
icon.classList.add(...dangerIcon);
box.classList.add(...dangerAlert);
infoText.innerHTML = `The webpage has a meta description tag with a length of <strong>${description.length} characters.</strong> It is recommended to use well-written and engaging meta descriptions with a length between <strong>80 and 160 characters (including spaces)</strong>.`;
highIssues++;
} else {
icon.classList.add(...dangerIcon);
box.classList.add(...dangerAlert);
infoText.innerHTML = `The webpage has a meta description tag with a length of <strong>${description.length} characters.</strong> Please review the description length for optimal results.`;
highIssues++;
}
}
result1 = {
"6.38%": "3 High Issues",
"14.89%": "7 Medium Issues",
"12.77%": "6 Low Issues",
"65.96%": "31 tests passed",
outof100: 70,
};
result2 = {
"4.26%": "2 High Issues",
"12.77%": "6 Medium Issues",
"10.64%": "5 Low Issues",
"72.34%": "34 tests passed",
outof100: 76,
};
result3 = {
"6.38%": "3 High Issues",
"10.64%": "5 Medium Issues",
"8.51%": "4 Low Issues",
"74.47%": "35 tests passed",
outof100: 76,
};