SEO Analysis Tool

Script Seo Analysis Tool Here’s a revised version of your HTML page that allows checking basic information of the current page (if running locally),

SEO Analysis Tool

Enter URL for SEO Analysis:

How to perform a basic SEO analysis?

To perform a basic SEO analysis within a client-side environment (HTML/JavaScript), you can only inspect certain aspects of a webpage directly through the browser.

Since JavaScript running in the browser cannot fetch or analyze the content of external websites directly due to cross-origin restrictions, we need to focus on what we can analyze locally or within the same domain.

Script Seo Analysis Tool

Here’s a revised version of your HTML page that allows checking basic information of the current page (if running locally), such as title, meta description, H1 tag, and canonical tag.

Note: that this will only work if the script is running on the same domain as the page being analyzed:

Script Code Page Analysis Tool

HTML Code:

     ```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO Analysis Tool</title>
    <style>
  
        .containercopy {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input[type="text"] {
            width: calc(100% - 22px);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-group button {
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }
        .results {
            margin-top: 20px;
        }
        .results p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="containercopy">
        <h1>SEO Analysis Tool</h1>
        <div class="form-group">
            <label for="url">Enter URL for SEO Analysis:</label>
            <input type="text" id="url" placeholder="https://example.com">
        </div>
        <div class="form-group">
            <button onclick="analyzeSEO()">Analyze</button>
        </div>
        <div class="results" id="results">
            <!-- Results will be displayed here -->
        </div>
    </div>

    <script>
        async function analyzeSEO() {
            const url = document.getElementById('url').value;
            if (!url) {
                alert('Please enter a URL.');
                return;
            }

            // Basic SEO checks
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error('Network response was not ok');
                
                const text = await response.text();
                const parser = new DOMParser();
                const doc = parser.parseFromString(text, 'text/html');

                // Extract SEO elements
                const title = doc.querySelector('title') ? doc.querySelector('title').textContent : 'No title found';
                const metaDescription = doc.querySelector('meta[name="description"]') ? doc.querySelector('meta[name="description"]').getAttribute('content') : 'No meta description found';
                const h1 = doc.querySelector('h1') ? doc.querySelector('h1').textContent : 'No H1 tag found';
                const canonical = doc.querySelector('link[rel="canonical"]') ? doc.querySelector('link[rel="canonical"]').getAttribute('href') : 'No canonical tag found';

                // Display results
                const results = `
                    <p><strong>Title:</strong> ${title}</p>
                    <p><strong>Meta Description:</strong> ${metaDescription}</p>
                    <p><strong>H1 Tag:</strong> ${h1}</p>
                    <p><strong>Canonical Tag:</strong> ${canonical}</p>
                `;
                document.getElementById('results').innerHTML = results;
            } catch (error) {
                document.getElementById('results').innerHTML = `<p>Error fetching the URL: ${error.message}</p>`;
            }
        }
    </script>
</body>
</html>
```

Key Changes:

1. Fetch API:

The `fetch` function retrieves the page content from the URL. This is an asynchronous operation.

2. DOMParser:

Parses the HTML text response to extract SEO elements.

3. Error Handling:

Added error handling to manage issues like network errors or invalid URLs.

Limitations:

Cross-Origin Restrictions:

This approach might not work due to CORS (Cross-Origin Resource Sharing) restrictions.

In practice, to fully analyze other sites, you'd need a server-side solution or use a third-party SEO API.

Same-Origin Policy:

For security reasons, most browsers restrict JavaScript from accessing content from different origins (domains) directly.

Gpldroid Seo Tools Apps

SEO Analysis Tool

SEO Analysis Tool