Эффективные названия и многое другое

Этот пост был первоначально опубликован в https://tomekdev.com/posts/effective-titles-and-more . То, что вы видите в качестве GIF здесь, там интерактивно. ✌

Это не руководство SEO о том, как писать эффективные названия или (возможно, я должен сказать), как создать ClickBait. Нет. Мы поговорим о технических. Если бы вы хотите, чтобы мой совет по письму сказал бы о клише:

Название должно быть коротким и описательным

У меня была хорошая работа? Я не знаю, но если вы здесь читаете, может быть, это так.

Название сайта

Я полагаю, что вам следует поместить имя сайта в заголовок страницы, потому что это приземлится как имя закладки, если кто -то добавит вашу страницу в закладки (люди все еще делают это?):

Добавлена закладка с четкой индикацией сайта

И поможет в быстрой идентификации. Я вижу это полезно также в инструменте истории вашего браузера по выбору:

Имя сайта заметно в списке истории

Теперь, должны ли вы разместить имя сайта до или после заголовка для содержания страницы? Ну, я верю после это путь. Опять же, легкая идентификация вступает в игру. Если все начинается с «Tomek Dev», то вам нужно опустить его, чтобы понять, о чем эта страница. Взгляните на это:

Tomek Dev – Эффективные названия
Tomek Dev – Если есть вход, должна быть форма
Tomek Dev – Курация контента будет работой и как контент -маркетинг убил Интернет
Tomek Dev – динамическая частичная связь в Gatsby

Не выглядит так плохо, когда у меня есть в списке, верно? Верно. Но рассмотрим недвижимость панели инструментов браузера:

Вкладки упакованы. Избыточная информация здесь не помогает

Там нет места, но оно может быть еще меньше, если вы используете много вкладок. Наличие названия вашего контента в первую очередь и имя сайта второе поможет в идентификации. Название контента важнее для пользователя:

Вкладки все еще упакованы, но более ценная информация получает первую очередь

Какой сепаратор использовать

Я использую трубу – | Потому что мой папа – сантехник, и я проведу много своей жизни в терминале. Что еще я могу использовать? 😉 Помимо шуток, это может быть брендинг. Сходи с ума, если это твоя вещь:

Здесь ♣ разделяет название контента и название сайта

Страница юридической консультации с § как сепаратором? Почему бы и нет

В конце концов, худшее, что вы можете сделать, это иметь один заголовок для всего вашего приложения. Не делай этого . Даже если ваше приложение является просто инструментом, подумайте некоторое время, если у вас нет логических модулей. Потому что знаешь что? 👇

Название можно динамически изменять

Это хорошие новости (не только) для одностраничных приложений. Используйте его в Привлечь внимание пользователей к чему -то. Например, рассмотрим Facebook:

🤔 Что -то случилось, верно?

Они поощряют вас прочитать только что получившее вами сообщение. Все, что вам нужно сделать, чтобы изменить заголовок страницы, – это установить его таким образом:

document.title = 'A new title! | Tomek Dev';

Вот небольшой GIF, представляющий, как он работает:

Конечно, если пользователь уже находится на нашей странице, мы не должны отвлекать его от мигающего названия. Может быть, изменить его, только если вкладка не активна?

Рассмотрим этот пример, вы работаете над приложением для редактирования видео, а люди экспортируют свой фильм. Файл должен быть подготовлен, и это требует времени. Вы можете показать прогресс в заголовке, если они перейдут на другую вкладку и объявили об успехе. Это может выглядеть так:

Перво -на первый взгляд. Как обнаружить изменение видимости TAB? (Я только что использовал там правильные ключевые слова).

document.addEventListener('visibilitychange', function () {
  console.log(document.hidden);
});

Document.hidden Расскажу вам, что такое статус, и вы сможете изменить поведение соответствующим образом на ваши потребности. Когда дело доходит до примера выше, это было сделано таким образом:

const originalTitle = document.title;
let isTabHidden = false;
let percentage = 0;

function changeTitle(title) {
  if (isTabHidden) {
    document.title = title;
  } else {
    document.title = originalTitle;
  }
}

const interval = setInterval(() => {
  percentage += 1;

  if (percentage < 100) {
    changeTitle(`${percentage}% Preparing video | Tomek Dev`);
  } else {
    changeTitle('⚬ Your file is ready! | Tomek Dev');
    clearInterval(interval);
  }
}, 100);

document.addEventListener('visibilitychange', function () {
  isTabHidden = document.hidden;
});

Очевидно, это трюк, чтобы показать, как это может работать. В этом месте вы поместили свой код, который обновляет процентное значение. Это может исходить из бэкэнд -конечной точки, которая готовит видео. Независимо от того, является ли это WebSocket или обычным запросом XHR.

Примечание

Вы заметили, как прогресс замедляется, когда я перехожу на другую вкладку? Это потому, что я притворяюсь прогресс экспорта через SetInterval . Вкладка находится в фоновом режиме, поэтому Chrome выполняет функцию времени ( settimeout / SetInterval ) один раз в секунду в максимуме.

Орлиные люди могут заметить, что Видибельханж Слушатель не нужен в этом примере. Мы можем использовать Document.hidden прямо в нашем Changetitle функция Я добавил его здесь только для того, чтобы показать, что такой слушатель существует;) Это может быть полезно в некоторых реализациях.

И вы знаете, кто (вероятно) использует это событие? GitHub Анкет Откройте две вкладки, оставьте неспасенный комментарий в PR и перейдите на другую вкладку. Вы должны увидеть это:

Динамика

Позвольте мне дать вам еще несколько примеров того, как вы можете сделать свой титул прохладным.

В наши дни вы должны увидеть значок динамика 🔊, если звук воспроизводится на вкладке. Но это было не всегда так. Вы можете анимировать звук, играя по -разному:

Давайте покажем слушателя

Или танцор

Эквалайзер?

Название песни плавает

Но будь осторожен

Конечно, как и в случае с каждой сверхдержавой, есть одна вещь, которую вам нужно помнить. Не чрезмерно используйте это. Подобные эффекты могут быть очень хорошим дополнением к вашей странице. Это может расширить опыт и сделать его лучше. Но это также может быть раздражающим. Как кнопка закрытия, убегая от вашего курсора.

Резюме

Может быть, мы только что поцарапали поверхность того, что мы можем сделать с Но вот несколько выводов для вас:

Используйте короткое описательное название.
Поместите имя вашего сайта после заголовка, описывающего контент страницы.
Добавьте сепаратор между частями заголовка. Вы можете сходить с ума.
Используйте динамическую природу заголовка, чтобы расширить пользовательский опыт.
Приведите внимание пользователей на вкладку, если произошло что -то важное.
Не используйте динамические методы, чтобы избежать раздражающих пользователей.

Недвижимость лучшего бара браузера сейчас ваша.

Оригинал: “https://dev.to/tomekdev_/effective-titles-and-more-3mp”