Css медиа-запросы (media queries)

Description и Keywords для главной страницы

И все хорошо в модуле Metatags Quick, да только Description и Keywords для главной страницы он не прописывает. Досадный промах, который следует устранить своими силами. Переходим на сервер в каталог с активной темой Drupal и открываем на редактирование файл template.php.

В самый конец вставляем следующий код:

function НАЗВАНИЕТЕМЫ_page_alter($page) {
$meta_description = array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'name' => 'description',
'content' => 'Текст мета тега Description'
)
);
$meta_keywords = array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'name' => 'keywords',
'content' => 'Ключевые слова (keywords) через запятую'
)
);
 
drupal_add_html_head( $meta_keywords, 'meta_keywords' );
drupal_add_html_head( $meta_description, 'meta_description' );
}

В коде укажите название своей темы и описание, ключевые слова подходящие для главной страницы вашего сайта. Сохраните файл template.php после внесения изменений.

Как добавить мета-теги в WordPress с помощью плагина

С помощью плагина вы можете добавлять общие и уникальные метатеги на свой сайт WordPress. Мы рассмотрим, как добавить их с помощью плагина Meta Tag Manager. Если вы используете другой плагин, ознакомьтесь с его документацией, чтобы получить точные инструкции.

1. Сначала войдите в свою панель управления WordPress.

2. Щелкните Плагины > Добавить новый.

3. Найдите «Диспетчер метатегов». Когда появится результат поиска, нажмите «Установить сейчас» и «Активировать».

4. Вы будете автоматически перенаправлены на вкладку, содержащую все установленные плагины на вашем сайте. Вверху экрана вы должны увидеть сообщение, подтверждающее, что плагин активирован.

5. Перейдите в «Настройки» > «Диспетчер метатегов».

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

7. Затем перейдите на страницу «Общие параметры» и убедитесь, что сообщения, страницы и медиафайлы указаны в поле «Поддержка типа сообщения». Таким образом, при редактировании сообщения, страницы или медиафайла вы можете добавить метатеги, которые будут отображаться только для этого конкретного элемента.

8. При редактировании таким образом Менеджер метатегов будет отображаться как отдельное мета-поле, как показано ниже.

В демонстрации ниже вы увидите, что я нахожусь в редакторе сообщений. Я прокручиваю мета-поле Yoast SEO до мета-окна Meta Tag Manager и добавляю мета-тег описания, уникальный для этого конкретного поста.

Следуя тому же процессу, вы можете добавить уникальные метатеги ко всем своим сообщениям и страницам.

Как добавить и проверить метатеги на сайте

Во многих CMS нет возможности добавить метатеги через панель администратора, поэтому нужно устанавливать специальные плагины — например, Yoast SEO для WordPress; Easy Frontend SEO для Joomla. 

Если по умолчанию в вашей CMS нет возможности прописать теги или вы по каким-то причинам не можете установить нужный плагин, вы можете открыть php файл нужной вам страницы через ftp-клиент и добавить в него метатеги.

Проблемы с тегами встречаются у многих веб-ресурсов. В прошлом году мы проанализировали 80 000 сайтов на предмет самых популярных ошибок, которые мешают в продвижении ресурсов, и увидели такую картину. У 64,4% сайтов был не заполнен или вообще отсутствовал метатег Description, у 45,5% ресурсов дублировался Description, а у 52,3% — дублировался тег Title.

Поэтому если вы не уверены, что на вашем сайте порядок с тегами, перепроверяйте все страницы с помощью нашего инструмента «Аудит сайта». Он буквально за несколько минут просканирует все страницы на вашем сайте (включая поддомены) и проверит метатеги. 

В разделе «Анализ метатегов» вы увидите какие метатеги не прописаны, какие из них дублируются или слишком короткие/длинные. Рядом с каждой ошибкой вы увидите список URL, где она встречается.

В настройках вы можете самостоятельно задать оптимальную длину для Title и Description. А еще — настроить расписание автоматических проверок сайта и получать регулярные отчеты на свою почту, чтобы не пропустить никаких ошибок. 

Регистрируйтесь на платформе и проверяйте метатеги на своем сайте.

Что такое viewport

Viewport — это видимая пользователю область веб-страницы. Т.е. это то, что может увидеть пользователь, не прибегая к прокрутке.

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4″ до 6″. А самую большую — мониторы компьютеров, размеры диагоналей которых могут превышать 24″.

До появления смартфонов и планшетов, веб-страницы в основном просматривались на экранах компьютерах. Viewport этих экранов хоть и отличался, но не настолько сильно. Для создания сайтов до появления мобильных устройств в основном использовалась фиксированная или резиновая (гибкая) разметка.

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

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

Первое устройство — это смартфон Apple iPhone 3 (диагональ 3.5″). Данный телефон не имеет высокую плотность пикселей. У данной модели она составляет 163ppi (меньше 200ppi). Физическое разрешение данного смартфона составляет 320×480. Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров). Т.е. на веб-странице этого смартфона, текст, выполненный размером 16px, будет также хорошо читаемым как на мониторе компьютера.

Второе устройство — это смартфон Apple iPhone 4. Он имеет диагональ такую же как у смартфона Apple iPhone 3, т.е. 3.5″. Но отличается от него тем, что имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение — 640×960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Таким образом, текст будет реально выглядеть на 8px. Такая страница будет уже трудночитаемой. Чтобы сделать эту страницу пригодной для чтения, её представление необходимо увеличить в горизонтальном и вертикальном направлении в 2 раза (отмасштабировать).

Дублирующиеся мета-описания и заголовки

Вы можете проверить наличие дублированных метаописаний и названий, войдя в Инструменты Google для веб-мастеров -> Внешний вид поиска -> Улучшения HTML. Если у вас есть дубликаты, вы увидите что-то вроде этого:

Дублирующиеся мета-описания и названия – до

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

Пример дубликата мета-описания

Если вы серьезный блоггер, в ваших же интересах исправить это или рискнуть получить удар по трафику поисковых систем.

Синтаксис

Создание медиа-запроса начинается с ключевого слова после которого указывается одно или несколько условий. В качестве условия можно указывать тип устройства или требования к определённой характеристике. Требование к определённой характеристике записывается в круглых скобках.

Комбинирование нескольких условий выполняется с помощью логических операторов.

После составления , стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.

Пример медиа-запроса с одним условием:

Пример медиа-запроса с комбинированием нескольких условий:

Что такое Тайтл и Дескрипшн и почему они так важны для продвижения сайта

• По-простому: основной заголовок и краткое описание содержания страницы сайта.
• Для поисковых систем: один из основных источников данных о вашей странице (статье). Из этих тегов формируется сниппет сайта в поисковой выдаче.
• Для пользователей: первая информация о странице, которую они видят в поисковой выдаче.

Что такое сниппет в SEO?

Это блок (фрагмент) с информацией, который формируется в результатах поиска на основании данных, которые роботы Гугл или Яндекс получают от сайта. Состоит из: Title, Description, URL, а также расширенные данные: дата, быстрые ссылки, цены, рейтинг и многое другое.

Пример метатегов Title и Description в коде страницы:

Как мета-теги связаны с ограничениями канала или публикации

Официально связь мета-тега с ограничениями публикаций не подтверждается

Если написать в техническую поддержку, то вам скорее всего посоветуют не обращать на него внимание

Тем не менее, наличие мета-тега может говорить о следующих ситуациях:

• Канал новый, все статьи отмечены мета-тегом. Переживать не стоит, ждите проверки.
• Статья недавно опубликована или отредактирована. Сразу после публикации на статье установлен мета-тег, через некоторое время он пропадает.
• Мета-тег появился по непонятным причинам и говорит о каком-то сбое.
• Статья ограничена или находится в каком-то статусе, которые сводится к тому что статья не получает показов.

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

Т.е. отсутствие мета-тега не говорит о том, что с публикацией всё в порядке. А вот наличие мета-тега говорит о том, что с публикацией что-то не так.

Специалисты поддержки часто на обращение с вопросом о мета-тегах могут говорить, что на мета-тег не нужно обращать внимания, а с публикацией всё хорошо (а то что показов всего лишь 9 штук, так это просто статья никому не интересна).

При этом, мне неизвестны такие случаи, чтобы статья с мета-тегом успешно транслировалась в ленту и получала показы.

Настройка Keywords и Description в Drupal — модуль Metatags Quick

Установите в Drupal и активируйте (составляющие Extra functionality и Upgrade from nodewords нам не понадобятся).

Переходим в раздел «Конфигурация» — «Поиск и метаданные» — «Meta tags (quick) settings». Здесь представлен список всех доступных мета тегов.

Помимо особенно важных Description и Keywords есть еще и необязательные:

• Канонический URL — позволяет задать основной адрес страницы. Если на сайте будет несколько страниц с одинаковым контентом, но разными URL адресами, то основной из них будет считаться та, чей адрес указан в мета теге «Канонический URL».
• Авторские права (Copyright) — даем ссылку на свой сайт, чтобы показать авторство.
• Robots — позволяет разрешить или запретить индексацию отдельных страниц сайта.

Включаем мета теги для Материалов и Терминов таксономии. Каждый мета тег создаст для себя отдельное поле.

К примеру, заходим в «Структура» — «Типы материалов» — «Статья» — «Управление полями». Там уже созданы новые поля под мета теги. В моем случае это (Meta)Описание и (Meta)Ключевые слова. Можно для удобства отредактировать порядок вывода.

Далее идем на вкладку «Управление отображением». Значение мета тегов должно быть доступно только поисковым системам, но не обычным пользователям. Скрываем оба поля для полной версии материала и для анонса.

Тоже самое проделываем для всех типов материалов и терминов таксономии.

В модуле Metatags Quick есть подсистема Extra functionality, отвечающая за автоматическое формирование мета тегов на основе содержания страницы. Я специально не буду ее рассматривать, чтобы у вас не было соблазна ей воспользоваться. Title, Keywords и Description в Drupal обязательно нужно задавать для каждой страницы в ручную! Так что не ленитесь.

Что такое мета-тег Keywords

Мета-тег Keywords (от англ. «ключевые слова») – это специальный тег, который используется для SEO-продвижения и включает в себя слова-ключи. Они определяются в зависимости от того, какой контент размещен на веб-странице. С помощью тега можно выделить ключевые фразы, по которым потенциальный клиент сможет найти сайт в выдаче.

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

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

Спустя некоторое время популярные поисковики ввели санкции против тех сайтов, которые злоупотребляют данным тегом – их места в поиске стали понижаться.

Тег размещается в шапке сайта, сам синтаксис выглядит следующим образом:

<html>

 <head>

  <meta name="keywords" content="ключевые фразы или слова через запятую" />

 </head>

</html>

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

Почему мои медиа-запросы CSS3 не работают?

В файле styles.css я использую медиазапросы, в обоих из которых используется вариант:

Когда я уменьшаю окно, сайты меняют размер до нужного мне макета в обычном браузере (Safari, Firefox), однако макет мобильного телефона вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.

Может кто-то указать мне верное направление?

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

Теперь все работает на Android (2.2) и iPhone .

Не забудьте иметь стандартные объявления CSS над медиа-запросом, иначе запрос также не будет работать.

Я подозреваю, что ключевое слово only может быть проблемой здесь. У меня нет проблем с использованием медиа-запросов, как это:

@media screen and (max-width: 480px)

Я использовал загрузчик на пресс-сайте, но он не работал на IE8, я использовал css3-mediaqueries.js javascript, но все еще не работал. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css

css Линия связи такая же простая, как и над строкой

Сегодня у меня была похожая ситуация. Медиа-запрос не работает. Через некоторое время я обнаружил, что пробел после «и» пропал. Правильный медиа-запрос должен выглядеть так:

Последовательный порядок кода CSS также имеет значение, например:

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

Всегда упоминайте max-width и min-width в некоторых единицах, таких как px или rem. Это понял для меня. Если я напишу это без единицы и только числового значения, браузер не сможет прочитать медиа-запросы. пример: это неправильный экран @media only и (max-width: 950) и правильный экран @media only и (max-width: 950px)

Бросив еще один ответ в кольцо. Если вы пытаетесь использовать переменные CSS, то это тихо завершится неудачей.

Переменные CSS не работают в медиа-запросах (по замыслу).

Странная причина, которую я никогда раньше не видел: если вы используете селектор «родитель> потомок» вне медиазапроса (в Firefox 69), это может нарушить медиазапрос. Я не уверен, почему это происходит, но для моего сценария это не сработало .

Но добавление родителя, чтобы он соответствовал другому CSS дальше по странице, это работает .

Похоже, указание родителя не должно иметь значения, поскольку идентификатор очень специфичен и не должно быть никакой двусмысленности. Может быть, это ошибка в Firefox?

Фрагмент кода OP явно использует правильную разметку комментария, но CSS может прогрессировать постепенно — поэтому, если есть синтаксическая ошибка, все после этого может потерпеть неудачу. Пару раз я полагался на заслуживающие доверия источники, которые предоставили неправильную разметку комментариев, которая сломала мою таблицу стилей. Так как ОП предоставил лишь небольшой раздел их кода, я бы предложил следующее:

Убедитесь, что все ваши комментарии CSS используют эту разметку /* . */ — которая является правильной разметкой комментариев для CSS согласно MDN

Подтвердите свою CSS с помощью линтера или безопасного онлайн-валидатора. Вот один из W3

Больше информации: я пошел, чтобы проверить последние рекомендованные точки останова медиазапроса с начальной загрузки 4, и закончил копированием пластины котла прямо из их документов. Почти каждый блок кода был помечен комментариями в стиле javascript // , что нарушало мой код — и давало мне только загадочные ошибки компиляции, с которыми приходилось устранять неполадки, которые в тот момент вызывали у меня головокружение.

Текстовый редактор IntelliJ позволил мне закомментировать определенные строки CSS в файле LESS с помощью сочетания клавиш Ctrl + /, что было здорово, за исключением того, что он вставлялся // по умолчанию для нераспознанных типов файлов . Это не бесплатная программа, а less является довольно распространенным, поэтому я поверил в это и пошел с этим. Это сломало мой код. Есть меню настроек для обучения правильной разметке комментариев для каждого типа файла.

Как проверить мета теги страниц: ошибки в Title, H1 и Description

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

К примеру, так выглядит часть результатов проверки внутренних страниц сервисом «Анализ сайта». Он позволяет найти ссылки на страницы, в которых допущены ошибки: к примеру, дублируется Title или не заполнен заголовок H1:

Фрагмент проверки внутренних страниц

Есть настраиваемый фильтр, чтобы смотреть только нужные результаты из списка:

Фильтр результатов и настройка колонок

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

Два разрешения экрана: физическое и CSS

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

Метатег viewport решает эту проблему адаптивного дизайна с помощью двух параметров: width и initial-scale.

Параметр width=device-width приравнивает ширину вьюпорта к CSS-ширине устройства. CSS — это не физический размер, а некая величина, предназначенная для того, чтобы адаптивный дизайн отображался на экранах одинаково.

CSS-разрешение зависит от плотности пикселей. 

• Если плотность пикселей меньше 200ppi, то коэффициент будет 1. То есть у экрана с физическим разрешением 320×480 пикселей будет CSS-разрешение 320×480 пикселей.
• Плотность пикселей 200-300ppi — коэффициент 1,5.
• Плотность пикселей больше 300ppi — коэффициент рассчитывается по формуле плотность/150, а полученное значение округляется (2, 2.5, 3 и так далее).

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

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

Вот три способа определить, когда элемент находится в видимой области окна:

1. Использовать Intersection Observer API
2. Измерять смещение элемента при скролле страницы
3. Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2

Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

API-интерфейс Intersection Observer позволяет отслеживать момент пересечения одного элемента с другим, и сообщает, когда это происходит. Этот способ идеально подходит для запуска CSS-анимации при скролле страницы. Всё, что нужно знать — когда HTML-элемент пересекается с окном просмотра. Если он пересекается, значит — находится в видимой области окна и в этот момент надо запустить CSS-анимацию.

Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:

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

Когда функция обратного вызова (callback) запускается, она возвращает массив записей из целевых (target) элементов, которые были запрошены, а также некоторую дополнительную информацию о них. В функцию всегда будет возвращаться массив, даже если наблюдение ведётся только за одним элементом, как здесь.

В функции обратного вызова можно перебрать массив записей, чтобы указать, что с ними нужно сделать. Каждая запись имеет свойство , которое может быть или . Если оно возвращает , это означает, что элемент находится в видимой области окна (viewport).

Собираем всё вместе

Обратите внимание, что — это объект, предоставленный наблюдателем, а — это фактический элемент, за которым который ведется наблюдение, поэтому именно ему нужно добавить CSS-класс для запуска анимации

Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

See this code Use IntersectionObserver API for add class name on x.xhtml.ru.

Если нужно, чтобы анимация запускалась каждый раз, когда HTML-элемент входит в видимую область окна, необходимо удалять CSS-класс запуска анимации, когда он находится за пределами видимой области окна.

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

Теперь надо наблюдать за HTML-элементом c CSS-классом а класс для анимации применять к элементу с классом , как и прежде. Когда элемент-оболочка находится за пределами видимой области, нужно удалять CSS-класс у элемента , чтобы анимация перезапускалась каждый раз, когда элемент появляется в окне при скролле.

Чтобы элемент-оболочку было видно, для примера, ему добавлена пунктирная рамка. Попробуйте прокрутить вверх и вниз документ в окне ниже:

See this code Use IntersectionObserver API for add-remove class name on x.xhtml.ru.

Теперь — порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.

Инструменты разработчика (devtools)

Инструменты разработчика позволяют быстро найти элемент, посмотреть его размеры, отступы, стили, расположение стилей, использование @media запросов, менять значение свойств прямо в браузере

Открыть инструменты разработчика можно нажатием клавиши F12

Чтобы просмотреть сразу расположение элемента и отобразить его свойства нажимаем правой кнокой мыши на элемент и выбираем Исследовать элемент в Mozilla Firefox или Просмотреть код в Google Chrome

Например, хотим узнать про элемент заголовка карточки, нажимаем на нём правой кнопкой мыши и выбираем Исследовать элемент в Mozilla Firefox

Открывается окно инструментов, где с левой стороны видим расположение элемента в HTML, а справой стороны CSS свойства элемента

Чтобы визуально посмотреть размеры и отступы элемента, в левой части инструментов разработчика наводим курсор мыши на элемент, и в браузере будут отображены свойства элемента

В правой части инструментов разработчика можно выбрать значение CSS свойства и назначить другое значение, в браузере сразу же будут видны изменения.

Значение можно писать вручную или постепенно менять значение стрелками вверх или вниз на клавиатуре.

При вводе значения вручную будут выводиться подсказки

Если значение некорректно и не применяется, то будет перечеркнуто

Можно самостоятельно отключить необходимое свойство, нажав на чекбокс перед этим свойством

Можно назначить новое свойство, нажав на пустое место в пределах блока свойств элемента. Также будут выведены подсказки возможных свойств

Все эти изменения сразу отображаются в браузере, что удобно при разработке и отладке адаптивной вёрстки. После перезагрузки страницы изменения сбрасываются

Также можно посмотреть расположение стилей — указывается имя файла, строка в файле и использование @media запросов