🖥️ Предварительный просмотр SPER & snippet

Просмотр SPER

Напечатайте заголовок страницы, мета-описание и URL, чтобы увидеть прямой, пиксел-аккоратный просмотр результатов Google на рабочем столе и мобильном, с предупреждениями о ломке перед тем, как они стоят на вас щелчки.

0 ЦАР · 0px
0 ЦАР · 0px
e
example.com
https://example.com

Как использовать предварительный просмотр СЕРВ

Четыре быстрых шага к снайперу, который показывает полностью и получает щелчок.

1

Введите заголовок страницы

Нажмите заглавную тег, которую вы планируете использовать. Персонаж и счетчики пикселей обновляют в режиме реального времени, чтобы вы могли увидеть, как близко вы к пределу рабочего стола Google ~600px.

2

Добавить свой URL и мета-описание

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

3

Переключение между рабочим столом и мобильным

Настроить вкладки настольных и мобильных для проверки обеих схем, поскольку мобильный использует более узкую колонку и переворачивает титулы на больше строк.

4

Устанавливать предупреждения о сверкании

Правка до тех пор, пока предупредительные чипы не станут зелеными. Нарисуйте что-нибудь, что будет обозначено как слишком широкое, чтобы Google показал ваше полное название и описание вместо эллипсиза.

Вопросы SPER

Google truncates lines заглавных ссылок на рабочем столе на 600 пикселях, а не на фиксированном числе символов, потому что широкие персонажи, такие как W и M, занимают больше пространства, чем узкие, как i и l. Этот инструмент измеряет реальную оставляемую ширину пикселя, чтобы вы могли точно увидеть, где будет отрезано ваше название.
Google обычно отображает около 920 пикселей мета-описания на рабочем столе (около 155-160 символов) и меньше на мобильном. Все, что дольше, переводится с помощью эллипсиса. В презентации показано как настольное, так и мобильное соединение в прямом эфире, как вы печатаете.
В мобильных результатах используется более узкая колонка и другой размер шрифта, поэтому названия, окрашенные в больше строк, и описания, вырезаны короче. Этот инструмент делает обе компоновки друг за другом, чтобы вы могли оптимизировать для каждой.
Нет. Предварительный просмотр полностью прогоняется в вашем браузере с помощью API для измерения текста Canvas. Ничего, что вы набираете, регистрируете или храните, так что вы можете безопасно проверить неопубликованные страницы и внутренние URL.

Для разработчиков

Этот предварительный просмотр СЕРВ на 100% проигрывает клиентуру — измерение пикселя происходит в вашем браузере, так что ничего, что вы печатаете, не загружается.

✓ Частная по дизайну — нет сервера с круглыми рейсами

Транкция измеряется так же, как браузер рисует текст — с Canvas measureText API. Вот основная идея, которую вы можете запустить в свой собственный трубопровод:

// Measure rendered pixel width like Google does
const ctx = document.createElement('canvas').getContext('2d');
function titleWidth(text, font = '20px arial') {
  ctx.font = font;
  return ctx.measureText(text).width; // > 600 => truncated on desktop
}
console.log(titleWidth('Your page title here'));

Нужно, чтобы это было по шкале — проверка тысяч титуловашей CMS или CI? См. планы :