metachecker.github.io/index.html at main · JakeHolcroft/metachecker.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SEO Meta Checker</title>
<style>
    body { font-family: Arial, sans-serif; margin: 40px; }
    textarea { width: 100%; height: 150px; }
    button { padding: 10px 20px; font-size: 16px; margin-bottom: 20px; }
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    th { background-color: #f4f4f4; }
    .ok { color: green; }
    .bad { color: red; }
    .warn { color: orange; }
</style>
</head>
<body>

<h2>SEO Meta Checker (Table Output)</h2>

<p>Enter one URL per line:</p>

<textarea id="urls"></textarea><br>
<button onclick="checkUrls()">Check Meta Tags</button>

<table id="results">
    <thead>
        <tr>
            <th>URL</th>
            <th>Title</th>
            <th>Title Status</th>
            <th>Description</th>
            <th>Description Status</th>
            <th>Image Status</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
async function fetchHTML(url) {
    const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(url)}`;
    const response = await fetch(proxyUrl);
    if (!response.ok) throw new Error("Fetch failed");
    return await response.text();
}

function checkLength(text, min, max) {
    if (!text) return { status: "bad", message: "Missing" };
    const len = text.length;
    if (len >= min && len <= max) return { status: "ok", message: `Length OK (${len})` };
    return { status: "warn", message: `Length ${len} (outside ${min}-${max})` };
}

async function checkUrls() {
    const tbody = document.querySelector("#results tbody");
    tbody.innerHTML = ""; // clear previous results

    const urls = document.getElementById('urls')
        .value
        .split('\n')
        .map(u => u.trim())
        .filter(u => u);

    for (const url of urls) {
        let title = "", description = "", ogImage = "";
        let titleCheck, descCheck;

        try {
            const html = await fetchHTML(url);
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, "text/html");

            title = doc.querySelector("title")?.textContent.trim() || "";
            description = doc.querySelector('meta[name="description"]')?.content?.trim() || "";
            ogImage =
                doc.querySelector('meta[property="og:image"]')?.content ||
                doc.querySelector('meta[name="twitter:image"]')?.content ||
                "";

            titleCheck = checkLength(title, 50, 60);
            descCheck = checkLength(description, 110, 160);

        } catch (err) {
            title = description = "";
            ogImage = "";
            titleCheck = descCheck = { status: "bad", message: "Failed to fetch" };
        }

        const row = document.createElement("tr");
        row.innerHTML = `
            <td>${url}</td>
            <td>${title || "Missing"}</td>
            <td class="${titleCheck.status}">${titleCheck.message}</td>
            <td>${description || "Missing"}</td>
            <td class="${descCheck.status}">${descCheck.message}</td>
            <td class="${ogImage ? "ok" : "bad"}">${ogImage ? "Found" : "Missing"}</td>
        `;
        tbody.appendChild(row);
    }
}
</script>

</body>
</html>