Категории

  • Видеокарты
  • Ноутбук Asus клавиатуры
  • Audiотехника
  • Android контакты
  • Ноутбук Asus характеристики
  • Новости
  • Новости

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

    Беспроводной проектор
    Если бросить взгляд на историю Типов, даже очень поверхностный, можно сказать, что Рефлекторы - первичный тип. Это очевидно, потому что вся живая природа наделена рефлекторскими качествами. Все формы

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

    Аудит сайта онлайн бесплатно
    Для проведения аудита сайта мы будем пользоваться большим количеством разных сервисов. И начнем, пожалуй, с одного сервиса, который меньше всего известен среди «любителей». Этот сервис называется Букварикс.

    Типы ссылок seo
    SEO-студия, которая не дает объяснений о том, что именно оно делает — опасно. Это сигнал того, что там есть « серые» или даже « черные» методы продвижения, и в любом случае —

    Накрутка просмотров ютуб
    Приветствую, друзья! Все вы, наверняка, знаете такой существующий, в виртуальном мире от YouTube, парадокс, который заключается в том, что если у вашего, недавно размещённого тут ролика, ещё совсем нет

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

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

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

    Чехол Xiaomi Redmi 6a
    Самое интересное, что указанное обновление, кроме остальных функций и возможностей, добавляет темную тему почти для трех десятков смартфонов Xiaomi и Redmi. Среди устройств, которым доступна прошивка,

    Тестирование React App SEO с использованием Fetch в качестве Google

    1. Одностраничное приложение SEO
    2. Простое приложение React
    3. Используя Fetch как Google
    4. Эксперименты
    5. Резюме

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

    В этом посте я объясню, как использовать Fetch в качестве Google для тестирования вашего сайта. Может использоваться для любого сайта; Тем не менее, я собираюсь сосредоточиться на тестировании SEO видимости реагировать приложения, так как в настоящее время я работаю над общедоступным веб-приложением React.

    Одностраничное приложение SEO

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

    Так что же это означает для одностраничного SEO приложения? Там были несколько отличный сообщений эта попытка расследовать это. Общий вывод заключается в том, что Google и другие поисковые системы могут сканировать и индексировать эти приложения с довольно хорошей компетенцией. Однако могут быть оговорки, поэтому очень важно иметь возможность протестировать свой сайт. Это где Fetch, как Google входит.

    По словам самого Google:

    Инструмент «Получить из Google» позволяет вам проверить, как Google сканирует или отображает URL на вашем сайте. Вы можете использовать Fetch as Google, чтобы узнать, может ли робот Google получить доступ к странице на вашем сайте, как он отображает страницу и заблокированы ли какие-либо ресурсы страницы (например, изображения или скрипты) для робота Googlebot. Этот инструмент имитирует выполнение сканирования и рендеринга, как в обычном процессе сканирования и рендеринга Google, и полезен для устранения проблем сканирования на вашем сайте.

    Простое приложение React

    Чтобы поэкспериментировать с Fetch в качестве Google, нам сначала понадобится веб-сайт (приложение React для нас) и способ его развертывания по общедоступному URL-адресу.

    В этом посте я собираюсь использовать простое приложение React «Здравствуй, мир!», Которое я разверну в Heroku для тестирования. Несмотря на то, что приложение простое, концепции хорошо обобщаются для более сложных приложений React (по моему опыту).

    Предположим, что наше простое приложение React выглядит следующим образом:

    Приложение класса расширяет React.Component {render () {return (<div> <h1> Hello, World! </ h1> </ div>)}}

    Используя Fetch как Google

    Вы можете найти Fetch как инструмент Google под Google Search Console , (Вам понадобится учетная запись Gmail для доступа.)

    Когда вы попадете в консоль поиска, она будет выглядеть примерно так:

    Когда вы попадете в консоль поиска, она будет выглядеть примерно так:

    Поисковая консоль сначала запрашивает веб-сайт. Мое приложение Heroku размещено по адресу https://react-seo-demo.herokuapp.com/. Введите URL своего веб-сайта, а затем нажмите Добавить свойство.

    Затем консоль поиска попросит вас подтвердить, что вы являетесь владельцем URL, который вы хотите проверить.

    Способ проверки зависит от того, как размещен ваш сайт. Для моего сайта мне нужно было скопировать проверочный HTML-файл, предоставленный Google, в корневой каталог моего сайта, а затем открыть его в браузере.

    После проверки вашего URL, вы должны увидеть следующее меню:

    После проверки вашего URL, вы должны увидеть следующее меню:

    Под опцией Crawl вы должны увидеть Fetch как Google:

    Под опцией Crawl вы должны увидеть Fetch как Google:

    Получить как Google позволяет вам тестировать конкретные ссылки, указав их в текстовом поле. Например, если у нас есть страница / users и мы хотим проверить это, мы можем ввести / users в текстовое поле. Оставьте это поле пустым, чтобы протестировать индексную страницу сайта.

    Вы можете проверить, используя два разных режима: Fetch, и Fetch and Render. Как описано в Google, Fetch:

    Получает указанный URL на вашем сайте и отображает ответ HTTP. Не запрашивает и не запускает никаких связанных ресурсов (таких как изображения или сценарии) на странице.

    И наоборот, выборка и рендеринг:

    Выбирает указанный URL-адрес на вашем сайте, отображает HTTP-ответ, а также отображает страницу в соответствии с указанной платформой (настольный компьютер или смартфон). Эта операция запрашивает и запускает все ресурсы на странице (например, изображения и сценарии). Используйте это, чтобы обнаружить визуальные различия между тем, как робот Google видит вашу страницу, и тем, как пользователь видит вашу страницу.

    Запуск Fetch на нашем тестовом сайте React дает:

    Это отражает страницу index.html, в которой находится наше приложение React. Обратите внимание, что это отражает HTML, когда страница загружается, до того, как наше приложение React будет отображено внутри div приложения.

    Запуск Fetch and Render дает:

    Запуск Fetch and Render дает:

    Это обеспечивает сравнение сайта, который робот Google может видеть с тем, что пользователь сайта будет видеть в своем браузере. Для нашего примера они точно такие же, что является хорошей новостью для нас!

    В Интернете есть несколько историй о людях, которые запускали Fetch as Google в своих приложениях React и наблюдали пустой или другой вывод «Это то, как робот Googlebot видел страницу». Это может указывать на то, что ваше приложение React разработано таким образом, что не позволяет Google и, возможно, другим поисковым системам правильно читать и сканировать.

    Это может произойти по разным причинам, одной из которых может быть слишком медленная загрузка контента. Если ваш контент загружается медленно, есть вероятность, что сканер не будет ждать его достаточно долго. Это не было проблемой в нашем примере выше. Я также запустил Fetch as Google на достаточно большом веб-сайте React, который выполняет несколько асинхронных вызовов для получения исходных данных, и он мог видеть все просто отлично.

    Так какой предел? Я решил провести несколько наивных экспериментов.

    Эксперименты

    Примечание : я не уверен, как Fetch как Google работает под капотом. Есть некоторые посты это намек на то, что он может сделать ваш сайт с помощью PhantomJS ,

    Реагирующие приложения обычно полагаются на асинхронные вызовы для извлечения своих начальных данных. Чтобы отразить это, давайте обновим наш пример приложения React, чтобы получить некоторые репозитории GitHub и отобразить список их имен.

    Приложение класса расширяет React.Component {constructor () {super (); this.state = {repoNames: []}; } componentDidMount () {let self = this; fetch ("https://api.github.com/repositories", {method: 'get'}) .then ((response) => {return response.json ();}) .then ((repos) => {self.setState ({repoNames: repos.map ((r) => {return r.name;})});}); } render () {return (<ol> {this.state.repoNames.map ((r, i) => {return <li key = {i}> {r} </ li>})} </ ol> )}}

    Запуск вышеупомянутого через Fetch, поскольку Google производит следующий вывод:

    Запуск вышеупомянутого через Fetch, поскольку Google производит следующий вывод:

    о нет! Не удалось увидеть данные из асинхронного вызова GitHub. Я буду честен; это немного смутило меня. Сначала я подумал, что это может быть какое-то странное ограничение перекрестного происхождения. Однако оказывается, что робот Googlebot может обрабатывать запросы из разных источников просто отлично. После нескольких копаний, множества проб и ошибок и, но удачи, я обнаружил, что мне нужно включить полифилл ES6 Promise. Очевидно, что браузер, в котором работает робот Google, не содержит реализацию ES6 Promise. После внесения в ES6-обещание , Выборка как вывод Google выглядела так.

    После внесения в   ES6-обещание   , Выборка как вывод Google выглядела так

    Давайте выберем в Fetch как Google немного больше. Предположим, что ваше приложение выполняет медленный вызов или выполняет некоторую асинхронную обработку, используя такие вещи, как setTimeout или setInterval. Как долго Fetch будет ждать, пока Google будет ожидать таких типов асинхронных запросов, и когда она получит снимок вашего веб-сайта?

    Давайте изменим наше приложение «Hello, World!» Сверху, чтобы подождать пять секунд, прежде чем отобразить текст «Hello, World!»:

    Приложение класса расширяет React.Component {constructor () {super (); this.state = {message: ""}; } componentDidMount () {setTimeout (() => {this.setState ({message: "Hello World !, через 5 секунд"})}, 5000); } render () {return (<div> <h1> {this.state.message} </ h1> </ div>)}}

    Запуск Fetch от Google с приведенным выше кодом дает следующее:

    Интересно, что он все еще был в состоянии видеть выходные данные компонента. Кроме того, операция Fetch as Google заняла значительно меньше пяти секунд настенных часов, что заставляет меня думать, что среда браузера, в которой она работает, должна быть ускоренной пересылки из-за задержек или чего-то еще. Интересно, что если мы увеличим пять секунд до 15, мы увидим этот результат:

    Я понятия не имею, как Google относится к setTimeout. Тем не менее, вышеприведенный тест указывает на то, что вещи, которые загружаются слишком долго, будут игнорироваться (не слишком удивительно).

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

    Приложение класса расширяет React.Component {constructor () {super (); this.state = {message: "", count: 0}; this.update = this.update.bind (this); } update () {let count = this.state.count; this.setState ({count: this.state.count + 1}); } componentDidMount () {setInterval (this.update, 1000); } render () {return (<div> <h1> {`Количество равно $ {this.state.count}`} </ h1> </ div>)}}

    Это дает следующий вывод:

    Это дает следующий вывод:

    Таким образом, он захватил рендеринг страницы после ожидания в течение пяти секунд. Это соответствует приведенному выше поведению setTimeout. Я не уверен точно, сколько мы можем вывести из этих экспериментов; однако, они, похоже, подтверждают, что робот Google будет ждать некоторое время, прежде чем сохранить визуализацию вашего сайта.

    Резюме

    По моему опыту, Google может довольно эффективно сканировать сайты React, даже если они действительно загружают данные заранее. Однако, вероятно, хорошей идеей будет оптимизировать ваше приложение React, чтобы загружать наиболее важные данные (которые вы хотели бы сканировать) как можно быстрее при загрузке приложения. Это может означать упорядочение вызовов API определенным образом, предпочтение сначала загружать частичные данные или даже рендеринг начальной страницы на сервере, чтобы она сразу загружалась в браузере клиента.

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