```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO and Open Graph Data Inspector</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
        }
        #urlInput {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        #inspectButton {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #inspectButton:hover {
            background-color: #45a049;
        }
        #results {
            margin-top: 20px;
        }
        .result-item {
            margin-bottom: 10px;
        }
        .result-item strong {
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>SEO and Open Graph Data Inspector</h1>
        <input type="text" id="urlInput" placeholder="Enter URL to inspect">
        <button id="inspectButton">Inspect</button>
        <div id="results"></div>
    </div>

    <script>
        document.getElementById('inspectButton').addEventListener('click', async () => {
            const url = document.getElementById('urlInput').value;
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = 'Loading...';

            try {
                const response = await fetch(url);
                const html = await response.text();
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');

                let results = '';

                // SEO Data
                const title = doc.querySelector('title')?.textContent;
                const description = doc.querySelector('meta[name="description"]')?.getAttribute('content');
                const keywords = doc.querySelector('meta[name="keywords"]')?.getAttribute('content');

                results += `<div class="result-item"><strong>Title:</strong> ${title || 'Not found'}</div>`;
                results += `<div class="result-item"><strong>Description:</strong> ${description || 'Not found'}</div>`;
                results += `<div class="result-item"><strong>Keywords:</strong> ${keywords || 'Not found'}</div>`;

                // Open Graph Data
                const ogTitle = doc.querySelector('meta[property="og:title"]')?.getAttribute('content');
                const ogDescription = doc.querySelector('meta[property="og:description"]')?.getAttribute('content');
                const ogImage = doc.querySelector('meta[property="og:image"]')?.getAttribute('content');
                const ogUrl = doc.querySelector('meta[property="og:url"]')?.getAttribute('content');

                results += `<div class="result-item"><strong>OG Title:</strong> ${ogTitle || 'Not found'}</div>`;
                results += `<div class="result-item"><strong>OG Description:</strong> ${ogDescription || 'Not found'}</div>`;
                results += `<div class="result-item"><strong>OG Image:</strong> ${ogImage || 'Not found'}</div>`;
                results += `<div class="result-item"><strong>OG URL:</strong> ${ogUrl || 'Not found'}</div>`;

                resultsDiv.innerHTML = results;
            } catch (error) {
                resultsDiv.innerHTML = `Error: ${error.message}`;
            }
        });
    </script>
</body>
</html>
```

This HTML code creates a simple web-based tool for inspecting SEO and Open Graph data of a given URL. Here's a breakdown of its functionality:

1. It provides an input field for users to enter a URL.
2. When the "Inspect" button is clicked, it fetches the HTML content of the provided URL using the AllOrigins API to bypass CORS restrictions.
3. It then parses the HTML and extracts relevant SEO and Open Graph metadata.
4. The extracted data is displayed in a user-friendly format, including:Page titleMeta descriptionMeta keywordsOpen Graph titleOpen Graph descriptionOpen Graph image URLOpen Graph URL
The tool uses basic CSS for styling and vanilla JavaScript for functionality, making it easy to understand and modify if needed. Users can simply copy this code into an HTML file and open it in a web browser to use the tool.







Inspect and analyze SEO and Open Graph metadata of any webpage with our free online tool. Extract title, description, keywords, and Open Graph data.

Use our free SEO and Open Graph data inspector tool to extract and analyze metadata from any webpage. Improve your website's search engine optimization.

SEO and Open Graph Data Inspector Tool