JS властивість Document.title

Загальний опис

Властивість title об'єкта Document відіграє ключову роль у веб-розробці, надаючи можливість отримати або встановити заголовок поточного документа. Заголовок документа є важливим елементом, який зазвичай відображається у вкладці браузера та є критичним для SEO (пошукової оптимізації), а також для забезпечення кращого користувацького досвіду, допомагаючи користувачам ідентифікувати зміст веб-сторінок у своїх закладках чи історії перегляду. Використання цієї властивості може бути особливо корисним у динамічних веб-додатках, де зміст сторінки оновлюється без перезавантаження, дозволяючи розробникам оновлювати заголовок, щоб він відповідав новому змісту.

Властивість title дозволяє легко отримати поточний заголовок документа за допомогою простого звернення:

console.log(document.title);

Цей код виведе поточний заголовок документа у консоль. Це може бути корисно для розробників, які хочуть зробити діагностику або аналіз заголовків сторінок під час виконання своїх скриптів.

Ще одним важливим аспектом є можливість встановлення нового заголовка для документа. Це можна зробити простим призначенням нового рядкового значення властивості title:

document.title = "Новий заголовок сторінки";

Після виконання цього коду заголовок вкладки браузера буде оновлено до "Новий заголовок сторінки", що дозволяє динамічно змінювати заголовок відповідно до змісту або контексту веб-додатку.

Розширене використання

У складніших веб-додатках, де зміст динамічно змінюється на основі взаємодії користувача або отриманих даних, властивість title може бути використана для відображення відповідних змін у заголовку. Наприклад, у веб-додатку для електронної комерції заголовок може бути оновлений, щоб відображати назву продукту, на який користувач дивиться в даний момент:

function updateTitleWithProductName(productName) {
  document.title = `Перегляд продукту: ${productName}`;
}

Цей підхід допомагає підвищити залученість користувачів та оптимізувати сторінки для пошукових систем, оскільки вони можуть точніше індексувати зміст сторінки на основі її заголовка.

правити

Порада

Заголовок сторінки, встановлений за допомогою Document: title, відіграє ключову роль у пошуковій оптимізації (SEO) та усвідомленості користувача. При розробці веб-сайту переконайтеся, що заголовок відображає зміст сторінки та містить важливі ключові слова.

автор: Bond правити

Порада

Для веб-додатків, які підтримують мультимовність, динамічне оновлення Document: title може покращити користувацький досвід, адаптуючи заголовок сторінки до вибраної мови користувача. Використання цієї властивості дозволить легко змінити заголовок у відповідності до мовних налаштувань.

автор: Bond правити

Порада

При використанні фреймворків чи бібліотек для односторінкових застосунків (SPA), таких як React або Angular, можна використовувати Document: title для оновлення заголовка при переході між компонентами або маршрутами. Це допомагає підтримувати коректний заголовок вкладки браузера, що сприяє кращому орієнтуванню користувачів у структурі вашого веб-додатку.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.title

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	4	≤12.1	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

// Змінюємо заголовок сторінки
document.title = "Новий заголовок сторінки";

function updateTitleWithTime() {
  var currentDateTime = new Date(); // Отримуємо поточний час і дату
  // Форматуємо час як годину і хвилини
  var formattedTime = currentDateTime.getHours() + ":" + currentDateTime.getMinutes();
  // Оновлюємо заголовок сторінки, включаючи поточний час
  document.title = "Час зараз: " + formattedTime;
}

// Встановлюємо інтервал для оновлення заголовка кожну хвилину
setInterval(updateTitleWithTime, 60000);