Javascript has become an essential language for web development, powering complex web applications and dynamic user experiences. One of the most basic yet important tasks in Javascript is getting the page title – the text shown in the browser tab. This article will provide a comprehensive, practical guide to getting the page title using Javascript, including key concepts, code examples, and tips for implementation.
What is the Page Title?
The page title refers to the text contained within the <title> tags in the page’s HTML head section. For example:
<head>
<title>My Page Title</title>
</head>
This title may be different from any on-page headings visible to the user. The title is displayed in the browser tab and can be accessed and manipulated with Javascript.
Why Get the Page Title?
There are several reasons you may want to get the page title in your Javascript code:
- Display the title in the UI: Retrieve the title to display it elsewhere in your UI for branding purposes or to show the user what page they are on.
- Track page changes: Get the title on each page to monitor navigation and page changes for analytics.
- SEO: Dynamically update the title for search engine optimization.
- Windowing: When opening pages in new tabs/windows, you may want to set their titles.
Challenges with Getting the Page Title
While accessing the page title is straightforward, there are some potential pitfalls to be aware of:
Browser Differences
The document.title property is well-supported across browsers but there may be slight differences in behavior that need to be handled.
Dynamic Titles
If the page title is updated dynamically, you need to ensure you get the latest value on each access.
Title vs Heading
The title is independent from any on-page headings visible to the user. Don’t confuse the two.
Accessing the Page Title in Javascript
The page title can be accessed through the document.title property. There are a couple common approaches to get access to the document object:
Using the Document Object Directly
You can directly access the native document object and its title property:
const pageTitle = document.title;
Via jQuery
jQuery provides easy access to the document object and its properties:
const pageTitle = $(document).prop('title');
This takes advantage of jQuery’s prop() method to get the title property.
Cross-Browser Compatibility
The document.title property has excellent browser support across all major browsers, but it’s always good practice to test any edge cases.
Manipulating the Page Title Dynamically
Once you have access to the page title, you can manipulate it dynamically via Javascript:
Changing Title Case
To capitalize the entire title:
document.title = pageTitle.toUpperCase();
Adding Additional Text
Prefix the title to reflect navigation, for example:
document.title = 'My Site | ' + pageTitle;
Updating on User Action
You can update the title in response to user events, like button clicks:
$('#update-title').click(function() {
const newTitle = 'Updated Title';
document.title = newTitle;
});
This allows you to update the title dynamically based on user input or other factors.
Handling Special Characters
When updating the title, be sure to handle any special characters properly for the text to display correctly.
Best Practices
Follow these tips for best results when getting and setting the page title:
- Check compatibility – Ensure
document.titleis supported on your target browsers before using. - Get on each access – Don’t cache the title value since it may change dynamically.
- Keep titles short – Concise, descriptive titles work best.
- Handle special characters – Encode any special characters properly.
- Monitor changes – Log title changes to understand page navigation.
Common Use Cases
Some examples of getting the page title in real-world applications:
Search Results Page – Set the page title to “Search Results for: [query]” to identify the current results.
Product Page – Update the title dynamically to the current product name.
Page Analytics – Track page views by logging the title on each page change.
Page Templates – Set the initial page title for common templates.
Key Takeaways
- The page title is displayed in the browser tab and specified in
<title>tags. - Access it via
document.titleand manipulate dynamically with Javascript. - Handle cross-browser differences and special characters properly.
- Get the title on each access to ensure you have the latest value.
- Useful for display, tracking analytics, SEO, and more.
Getting the page title is a fundamental Javascript skill that unlocks many possibilities like better SEO, branded UIs, and improved analytics. Use this guide to help implement page title access effectively in your projects.
Example Code
Here are some complete code examples illustrating getting and setting the page title with Javascript:
Get Current Page Title
Get the current page title on load:
// On page load
const currentTitle = document.title;
console.log(currentTitle);
Update Page Title
Update the page title in response to a button click:
// Get button element
const updateBtn = document.getElementById('update-title');
// Update title on button click
updateBtn.addEventListener('click', function() {
// Get current title
const currentTitle = document.title;
// Update title
document.title = 'New Title ' + currentTitle;
});
Display Title in UI
Display the page title in the UI:
// Get page title
const pageTitle = document.title;
// UI element to display title
const titleDisplay = document.getElementById('title-display');
// Set inner text to title
titleDisplay.innerText = pageTitle;
Conclusion
Getting the page title is a quick yet useful Javascript skill to have in your toolkit. This guide covers the key concepts like properly accessing the title across browsers, manipulating it dynamically, and real-world use cases.
There are many creative applications for getting the page title with Javascript – use this as a reference for your projects to implement it effectively. This fundamental ability unlocks many possibilities for better metadata, UIs, analytics and more.
by the Bito team. 
