Want to learn how to fetch a site title from a webpage using JavaScript? Extracting a webpage’s title can be useful for various applications, from creating custom browser extensions to automating web data extraction. This guide will show you an easy and effective way to retrieve the title using JavaScript.
Why Fetching the Site Title Is Useful
- Web Automation: Use extracted titles for automated reporting or tools.
- Custom Extensions: Build browser extensions that display webpage titles.
- Content Curation: Automatically capture titles for bookmarking or sharing.
Technical Requirements
- JavaScript: Core language to fetch and manipulate the title.
- HTML: A basic webpage structure for testing the script.
- Browser: A modern web browser with JavaScript enabled.
Step-by-Step Implementation
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Site Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Website Title Fetcher</h1>
<p>Enter a website URL below to fetch its title:</p>
<input type="text" id="url-input" placeholder="https://example.com">
<button id="fetch-title">Fetch Title</button>
<div id="output"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f3f4f6;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
input {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
#output {
margin-top: 20px;
font-size: 1.2em;
color: #333;
}
JavaScript Code
// script.js
document.getElementById("fetch-title").addEventListener("click", async () => {
const urlInput = document.getElementById("url-input").value.trim();
const output = document.getElementById("output");
// Clear previous output
output.textContent = "";
if (!urlInput) {
output.textContent = "Please enter a valid URL.";
return;
}
try {
const response = await fetch(
`https://api.allorigins.win/get?url=${encodeURIComponent(urlInput)}`
);
if (!response.ok) throw new Error("Failed to fetch the webpage.");
const data = await response.json();
const parser = new DOMParser();
const doc = parser.parseFromString(data.contents, "text/html");
const title = doc.querySelector("title");
output.textContent = title
? `Title: ${title.textContent}`
: "Title not found on this webpage.";
} catch (error) {
output.textContent = `Error: ${error.message}`;
}
});
Result
Real-World Applications
- Using JavaScript to Enhance Web Automation and Fetch Titles
- Boost User Experience by Fetching Site Titles with JavaScript
By using JavaScript to fetch a site title from a webpage, you can streamline data extraction, enhance SEO analysis, and automate web tasks efficiently. This method is easy to implement, works seamlessly across modern browsers, and adds functionality to your web development projects.