10 советов по использованию Chrome DevTools для SEO-аудита

Многие из нас тратят сотни и тысячи долларов на сервисы, которые помогают автоматизировать и упростить повседневную работу. Но в нашем распоряжении есть отличный бесплатный набор средств для SEO – инструменты разработчика (DevTools) в браузере Chrome. С его помощью можно проверить самые важные и фундаментальные для поисковой оптимизации аспекты любой страницы.

В Chrome DevTools есть несколько очень удобных приложений, которые пригодятся при проведении SEO-анализа. Ниже мы рассмотрим их подробнее.

Для начала откройте страницу, которую вы хотите проверить, в браузере, а затем – панель инструментов разработчика. Для этого перейдите в меню Chrome, расположенное в правом верхнем углу экрана, и выберите «Дополнительные инструменты» -> «Инструменты разработчика».

Вы также можете использовать сочетания клавиш: Ctrl+Shift+I (для Windows) или Cmd+Opt+I (для Mac).

Ещё один вариант – кликнуть правой кнопкой мыши по странице, которую вы хотите проверить, и в появившемся меню выбрать пункт «Просмотреть код».

Теперь можно приступить к аудиту.

1. Проверка основных элементов контента страницы

В настоящее время Google способен сканировать и индексировать JavaScript-контент, однако он не всегда делает это корректно. Поэтому необходимо проверять основные элементы содержимого страницы – тайтл, метаописание и текст. Это значит, что нужно не только анализировать HTML-код, но и проверять DOM. Таким образом вы сможете увидеть, как эта информация будет визуализирована и идентифицирована Google.

Просмотреть DOM любой страницы можно на вкладке «Elements» панели Инструментов разработчика.

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

К примеру, в левом верхнему углу на скриншоте ниже мы видим, что отображаемый основной текст (в красной рамке) заключен в тег <div>. Но на самом деле он написан с помощью JavaScript, код которого мы можем увидеть в правом верхнем углу скриншота, где открыт код страницы.

Сравнивая эти различия, вы сможете проверить, правильно ли выполняется индексация. Для этого можно:

  • просмотреть версию страницы, сохранённую в кэше Google;
  • посмотреть, показывается ли текст в результатах поиска Google;
  • использовать «Сканер Google для сайтов» в Search Console и т.д.

2. Просмотр контента, скрытого при помощи CSS

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

Один из самых распространённых способов скрыть текст – использовать свойства CSS «display:none» или «visibility:hidden». Поэтому рекомендуется проверять, нет ли на страницах сайта важной информации, которая скрыта при помощи этих средств.

Сделать это можно с помощью функции «Search» на панели инструментов разработчика. Получить доступ к ней можно с помощью сочетания клавиш: Ctrl + Shift + F (для Windows) или Cmd + Opt + F (для Mac), когда панель DevTools открыта.

Эта функция позволяет выполнить поиск не только по файлу открытой страницы, но и по всем используемым ресурсам, включая CSS и JavaScript.

Чтобы найти скрытый текст, нужно ввести в строку поиска требуемые свойства. В данном случае – «hidden» или «display:none». Так вы сможете узнать, содержатся ли они в коде страницы.

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

3. Проверка альтернативного текста изображений

Помимо проверки основных элементов текстового содержимого, на вкладке «Elements» вы также сможете просмотреть описание изображений – текст, который содержится в атрибуте alt. Кликните правой кнопкой мыши на нужную картинку и выберите пункт «Просмотреть код»:

4. Проверка конфигурации тегов

Chrome DevTools также можно использовать для проверки технической конфигурации страниц. К примеру, тегов и атрибутов. Для этого нужно ввести в строку «Search» нужные теги и проверить, как они реализованы.

С помощью инструментов разработчика можно проверить конфигурацию тегов не только в блоке <head>, но и в заголовках HTTP. Для этого нужно перейти на вкладку «Network» панели, выбрать нужную страницу или ресурс и проверить содержимое заголовка, включая наличие link rel=canonical в файле изображения:

5. Просмотр статуса HTTP в конфигурации заголовка

При проверке конфигурации заголовков страниц и ресурсов на вкладке «Network» вы также сможете посмотреть статуc HTTP, проверить наличие редиректов, узнать их тип, найти статусы ошибок и включения других конфигураций (X-Robots-Tag, hreflang или vary: user agent).

6. Проверка оптимизации для мобильных устройств

На сегодняшний день оптимизация сайта для мобильных устройств – неотъемлемая часть работы по поисковой оптимизации. Проверить мобильную конфигурацию страницы и контента можно, используя режим эмуляции мобильных устройств в DevTools – «Device Mode». Для перехода в него нужно нажать на иконку устройства в правом верхнем углу панели или же использовать сочетание клавиш: Command+Shift+M (Mac) или Ctrl+Shift+M (Windows, Linux), когда панель открыта.

В режиме «Device» можно выбрать адаптивный видовой экран или конкретное устройство для проверки страницы. Если нужное устройство отсутствует в списке, его можно будет добавить с помощью опции «Edit».

7. Проверка времени загрузки страницы

Анализируйте время загрузки страницы, эмулируя условия сети и используемое устройство. Для этого перейдите в меню кастомизации DevTools, которое находится в правом верхнем углу панели, выберите пункт «More tools», а затем – «Network Conditions».

На открывшейся панели вы найдёте поля «Caching», «Network throttling» и «User agent».

Задав нужные настройки, перезагрузите страницу и перейдите на вкладку «Network». Здесь вы увидите не только полное время загрузки страницы, но и когда была загружена исходная разметка (DOMContentLoaded). Эта информация появится внизу окна. Вы также сможете посмотреть время загрузки и размеры каждого используемого ресурса и записать эту информацию, нажав на красную кнопку в левой части панели.

Чтобы получить рекомендации по ускорению загрузки страницы, перейдите на вкладку «Audits» и нажмите на кнопку «Run». В каждой рекомендации будут указаны конкретные ресурсы, вызывающие проблемы.

Кроме того, вы можете сделать скриншоты рендеринга страницы, используя опцию «Filmstrip». Нажав на иконку камеры и перезагрузив страницу, вы сможете просмотреть её скриншоты на разных стадиях процесса загрузки. Таким способом вы сможете узнать, что видят пользователи на каждом этапе.

8. Выявление ресурсов, блокирующих визуализацию

Вы также можете использовать данные по загрузке ресурсов на вкладке «Networks», чтобы узнать, какие JS и CSS-ресурсы загружаются перед DOM и, возможно, блокируют его. Это одна из самых распространённых проблем, влияющих на скорость загрузки страницы. Просмотреть CSS или JS-ресурсы можно, нажав на соответствующий переключатель:

9. Поиск небезопасных элементов на странице во время перехода на HTTPS

Инструменты разработчика Chrome также могут сослужить хорошую службу во время перехода на HTTPS. С помощью вкладки «Security» можно будет найти небезопасные элементы на любой странице. Здесь вы сможете посмотреть, насколько страница безопасна и есть ли у неё валидный HTTPS-сертификат, проверить тип соединения и наличие смешанного содержимого.

10. Проверка AMP

DevTools также можно использовать для проверки AMP-страниц. Для этого добавьте строку «#development=1» в URL страницы, а затем откройте вкладку «Console». Здесь вы сможете посмотреть есть ли какие-либо ошибки на странице. Вы также будете видеть, в каких элементах и строках кода они были найдены.

Бонус: персонализируйте настройки DevTools

Возможно, вы захотите персонализировать панель согласно своим предпочтениям: изменить внешний вид, добавить кнопки ярлыки и т.д. Всё это можно сделать в настройках. Нажмите на значок меню в правом верхнем углу панели и выберите пункт «Settings».

Ещё один совет: сокращённый код нелегко разобрать. Чтобы просмотреть полную версию кода, нажмите кнопку «{}» в центре нижней области панели.

https://www.searchengines.ru/chrome-dev-tools-seo.html


Страницу со скрытыми настройками Chrome ждут большие перемены

Неизменная годами страница chrome://flags наконец получит Material Design и собственный поиск по функциям

Если вы продвинутый пользователь Chrome, то наверняка знаете о странице скрытых настроек браузера chrome://flags. Здесь есть так называемые флаги для включения различных функций. Этот компонент программы был доступен с первой версией Chrome, пополнялся новыми опциями и оставался неизменным в течение многих лет. Недавно ресурс Chrome Story обнаружил запрос на Chromium Gerrit под названием «Редизайн страницы chrome://flags».

Вот список изменений, которые ожидаются в ближайшем обновлении страницы со скрытыми настройками Chrome:

  • улучшенный отзывчивый дизайн для мобильных устройств. Большие элементы управления;
  • упрощенные предупреждения;
  • добавление поисковой системы для функций, значительное улучшение поиска на мобильных устройствах;
  • создание разделителей для флагов: Available (доступно) и Unavailable (недоступно);
  • обновленная современная цветовая схема и типографика;
  • отображение на странице номера версии Chrome.
Страницу со скрытыми настройками Chrome ждут большие перемены

Как видим, готовятся значительные перемены как в функциональном плане, так и в дизайне. В особенности улучшения касаются поиска определенной функции. Теперь, когда компания переводит все свои продукты на «материальный» дизайн, вполне логично предположить, что и страница chrome://flags также получит соответствующее обновление. Об этом намекает и один из файлов CSS с названием text_defaults_md.css («md», вероятно, означает Material Design).


Microsoft нашла уязвимость в Chrome и получила $7500 от Google

 

Как и многие другие компании, несколько лет назад Google запустила программу Vulnerability Reward. В её рамках независимые программисты могут получить денежное вознаграждение за отчеты об уязвимостях в продуктах и сервисах Google. Довольно часто дыры обнаруживаются не только в продуктах Microsoft, но и в браузере Google Chrome. Несмотря на все его защитные механизмы, в огромном количестве строк кода всегда найдутся какие-то ошибки, что и доказали исследователи Microsoft.

14 сентября сотрудник подразделения Microsoft Offensive Security Research, по совместительству ещё и разработчик JavaScript-движка для Microsoft Edge, отправил в Google информацию о серьёзной уязвимости их браузера. Дыра в одном из компонентов Chrome позволяла получить несанкционированный доступ к памяти девайса. За этот репорт инженер Microsoft получил $7 500, а найденный баг был исправлен разработчиками Google в течение недели. Уже 21 сентября все пользователи Chrome для Windows, Linux и MacOS получили апдейт браузера с фиксом обнаруженной дыры (61.0.3163.100).

Стоит отметить, что Google среагировала на сообщение очень быстро. Когда такие проблемы возникают в Microsoft Edge, на их исправление уходит не меньше месяца, поскольку фирменный браузер Microsoft обновляется только вместе с Windows 10. Может, когда-нибудь редмондские разработчики наконец-то поймут, что вместо добавления в Edge никому не нужных эффектов прозрачности пора бы позаботиться о внедрении новых полезных функций и более частых апдейтах браузера. До этого момента Google будет продолжать завоевывать рынок, а Edge так и будет аутсайдером.

Источник: Chrome Releases Blog.

http://wp-seven.ru/stat-i/novosti/microsoft-nashla-uyazvimost-v-chrome-i-poluchila-7500-ot-google.html


В браузере Chrome теперь можно серфить с помощью ВР-шлема Google Daydream

В браузере Chrome теперь можно серфить с помощью ВР-шлема Google Daydream

Как это работает

Водрузив на голову шлем Google Daydream и запустив браузер Chrome, пользователь может скролить сайты, переходить по ссылкам, смотреть фотографии/ видео и совершать любые другие привычные действия в режиме виртуальной реальности. Так как это совершенно новый опыт взаимодействия, то и как-то складно описать его словами довольно сложно.

image1.gif

Это понимают и разработчики, поэтому они заручаются поддержкой все большего количества сайтов, чтобы те понемногу проникались технологией WebVR и отходили от шаблонного мышления «клик левой кнопкой  скролл  клик правой кнопкой». Поэтому в посте в Google+ член команды Daydream Франсуа Бефо и уточняет, что это лишь начало, а дальше будет больше.

Как попробовать Chrome VR самому

Для того чтобы попробовать серфинг в виртуальной реальности нужен лишь современный Android-смартфон с поддержкой платформы Daydream, сам шлем Daydream (подойдет и китайский аналог) и мобильный браузер Chrome 61 версии.

Источник: Google+

http://gagadget.com/announce/28880-v-brauzere-chrome-teper-mozhno-serfit-s-pomoschyu-vr-shlema-google-daydream/


Хромбук ASUS Chromebook Flip C101 наделен поворотным экраном

Анонсирован новый мобильный компьютер ASUS Chromebook Flip C101 с предустановленной операционной системой Google Chrome OS. Хромбук нацелен на образовательные учреждения и на любителей малофункциональной экзотики, и в продажу он поступит уже 25 сентября текущего года.

ASUS Chromebook Flip C101

Стоимость нового ASUS Chromebook Flip C101 составляет от 300 долларов США, и в нее входит сенсорный экран с диагональю 10,1 дюйма и разрешение 1280х800 пикселей. Он основан на матрице IPS и способен вращаться на 360 градусов, так что это не только ноутбук, но и планшет в едином корпусе. Начинка ASUS Chromebook Flip C101 немного излишня для ограниченного функционала Chrome OS – 4 Гб оперативной памяти и шустрый процессор от Rockchip с шестью ядрами внутри.

В то же время встроенной памяти опять не завезли, оставив всего лишь 16 гигабайтов и возможность установки карт microSD. Все это стоит ровно 300 долларов  США и работает до 9 часов на одном заряде, а в качестве дополнения используются порты USB-C 3.1 и обычный USB 2.0. USB 3.0 здесь почему-то не предусмотрели. ASUS Chromebook Flip C101 поступит в продажу в ближайшее время, и при желании на него можно установить дистрибутив Linux с поддержкой сенсорных экранов и процессором ARM – Ubuntu подойдет для этого как нельзя лучше.

http://www.mobiledevice.ru/84835-asus-chromebook-flip-c101-Notebok-chrome-os-sensornii-ekra.aspx


Google Chrome оказался самым безопасным браузером

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

В этом году на турнире были взломаны Microsoft Edge, Windows, macOS, Safari, Ubuntu, Adobe Reader и многие другие популярные программы. Компания X41 D-Sec, которая специализируется на безопасности, провела собственное исследования браузеров Chrome, Edge и Internet Explorer. Нельзя не отметить, что Google заплатила за потраченное исследователями время.

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

Google Chrome

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

http://www.sotovik.ru/news/261398-google-chrome-okazalsja-samim-bezopasnim-brauzerom.html


Обнаружено первое расширение для Chrome с майнером криптовалюты

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

В расширении SafeBrowse для Chrome был обнаружен встроенный в код скрытый JavaScript-майнер криптовалюты Monero. Учитывая то, что данное расширение было установлено более 140 тыс. раз, это оказалось достаточно серьезной проблемой для многих пользователей.

Максимальная загрузка процессора и невозможность использовать компьютер в работе – такое состояние своих ПК пользователи замечали сразу же после открытия Chrome. Расширение SafeBrowse в версии 3.2.25 запускало криптовалютный модуль в фоновом режиме, который начинал майнить, как только браузер был открыт.

Обнаружено первое расширение для Chrome с майнером криптовалюты

В качестве доказательства достаточно открыть исходный код расширения, где можно заметить строчки с криптовалютным майнером от сервиса Coinhive, встроенным при помощи JavaScript. Данный майнер основан на алгоритме CryptoNight, который используется валютами Monero, Dashcoin, DarkNetCoin и другими.

Обнаружено первое расширение для Chrome с майнером криптовалюты

Интернет-пользователи тут же отреагировали на проблему. На странице расширения появилось множество отзывов соответствующего содержания, а в службу поддержки Chrome Web Store поступили жалобы о вредоносном ПО. На момент написания новости расширение пропало из магазина Chrome Web Store.

Обнаружено первое расширение для Chrome с майнером криптовалюты

Это первый случай скрытого майнинга через расширение для Chrome. На прошлой неделе в подобном был уличен торрент-ресурс The Pirate Bay, который встроил криптовалютный майнер в код некоторых своих страниц. Администрация The Pirate Bay объяснила это тестированием новой модели монетизации сайта, которая в будущем, возможно, заменит собой рекламу.

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


Google выпустила корпоративную версию Chrome OS

 


Одно время уже казалось, что Google свернет разработку операционной системы Chrome OS в пользу Андроида. Но нет, Chrome OS продолжает жить и даже родила корпоративную версию Chrome Enterprise. Она платная — $50/год за пользователя. Зато она поддерживает интеграцию с Microsoft Active Directory, другими корпоративными системами авторизации, позволяет администратору централизовано управлять настройками браузеров, принтеров, обновлениями ОС, обеспечивать безопасность компьютеров при помощи MDM-систем типа VMware AirWatch. Как и бесплатную версию, Chrome Enterprise — нельзя установить на любой компьютер, а только на хромбук. HP, Lenovo и Samsung уже начали поставки хромбуков с предустановленной ОС Chrome Enterprise.

В Google Chrome появится возможность навсегда отключать звук на сайтах

Команда Google Chrome тестирует новую функцию, которая позволит пользователям навсегда отключать звук на любом сайте. Об этом сообщает Android Police.

По словам сотрудника компании Франсуа Бифорта, эксперименты с новой функцией продолжаются. В текущей версии этой опции отключить звук на том или ином ресурсе можно с помощью переключателя в контекстном подменю «Сведения о сайте», которое появляется при наведении курсора на значок замка в адресной строке:

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

Опробовать новую функцию можно в последней сборке Chrome Canary для десктопов. По умолчанию она отключена.

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

Когда новая возможность станет доступна всем пользователям браузера, пока не уточняется.

https://www.searchengines.ru/chrome-sound.html


Google выпустит новый Chromebook Pixel и колонку Google Home

Похоже, в этом году мы увидим новый Chromebook Pixel и колонку Google Home меньшего размера.

Согласно последнему отчету издания Android Police, компания Google планирует выпустить новую версию Chromebook Pixel вместе со смартфонами Pixel следующего поколения.

Google запустила первый Chromebook Pixel в 2013 году, после чего его преемник был выпущен в 2015 году. Тем не менее, Рик Остерлох, старший вице-президент компании по аппаратным средствам, утверждает, что никаких новых Chromebook Pixel в разработке нет.

По слухам, в прошлом году Google работала над устройством под кодовым названием Project Bison, которое станет первым устройством в виде ноутбука с операционной системой Andromeda OS. Он получит 12,3-дюймовый дисплей, 32 ГБ или 128 ГБ встроенной памяти, 8 ГБ или 16 ГБ оперативной памяти и стилус Wacom, которые люди могут выбрать отдельно для использования на дисплее.

В докладе Android Police говорится, что предстоящий ноутбук будет работать на Chrome OS, а не Andromeda OS.

В дополнение к Chromebook Pixel, Google также должна представить меньшую версию колонки Google Home, которая будет конкурировать с Echo Dot от Amazon.

Источник: http://ilenta.com/news/gossip/gossip_17470.html
© www.iLenta.com


Страницы:1234567...18