https://habr.com/ru/articles/778236/

#spa #google #ssr #article #seo

Иллюстрация к эксперименту в сообщении выше в виде Coding Music Video

https://vimeo.com/891441617

#cmv #spa #google #seo

Адаптировал для Реддита и запостил там свою статью Google и Yandex SEO оптимизация для SPA приложений

Как обычно, на таких ресурсах интересны комментарии пользователей.
Первый комментарий - что Bing тоже уже несколько лет хорошо понимает JavaScript
Второй, от false_creek_change, приведу здесь:

Консультант по SEO/a11y на проводе. Не могу передать, сколько раз я сталкивался с SEO-специалистами и/или клиентами, которые клялись, что вам нужен SSR, чтобы поисковые роботы правильно индексировали ваш SPA. Это не так уже почти десять лет. Есть множество гигантских Ecommerce брендов, которые используют SPA уже много лет и имеют чрезвычайно высокие показатели SEO (на ум приходит Walmart). Анекдотично, я лично руководил конверсией сайта .NET MVC Ecommerce со 100 000+ SKU на Vue 2 SPA, и мы действительно увидели улучшение наших SEO-метрических показателей. Это было 8 лет назад.

Мы обычно исходим из следующих соображений:

- Является ли HTML семантическим и доступным (a11y)?
- Предоставляется ли схема через JSON+LD и/или теги?
- Соответствуют ли основные показатели сайта (core web vitals) требованиям?
- Требует ли контент действий пользователя перед загрузкой? Например, если навигация по категориям находится в меню, который по умолчанию скрыт, то такая навигация может не индексироваться. В общем случае, если что-то может быть сделано через SSR, то это же также может быть отображено на стороне клиента и проиндексировано.

Все это Google укажет в Search Console / Lighthouse, чтобы сообщить вам о наличии проблемы.

#seo #spa #google #ssr

Полезные советы Google по улучшению SEO для SPA приложений

#seo #spa #google

Как составлять резюме

Ласло Бока, бывший старший вице-президент Google по работе с персоналом дал несколько советов по составлению резюме. Согласно ему, необходимо в резюме придерживаться стратегии перечисления ключевых моментов (bullet points format), и излагать свой опыт именно таким образом.

Это стало называться X-Y-Z правилом, и Google формулирует это так: "Достиг [X] с показателями [Y], сделав [Z]" ("Accomplished [X] as measured by [Y], by doing [Z]")

Примеры:
- Занял второе место среди 50 участников на JavaScript хакатоне в Сколково, разработав приложение, синхронизирующее мобильные календари.
- Достиг увеличения доходов 15 клиентов малого и среднего бизнеса на 10 % по сравнению с предыдущим кварталом за счет внедрения новых функций программного обеспечения в качестве решений для их бизнес-задач.

#google #resume #tip

Библиотека Google Translate предоставлял веб-разработчикам JavaScript SDK для установка переключателя языков и перевода своего сайта "на лету" с одного языка на другой. Качество было хуже кастомного перевода, но позволяло быстро сделать хоть какую-то поддержку нескольких языков на сайте. Четыре года назад Google от поддержки этой своей библиотеки отказался.

Тем не менее, остались пакеты, которые позволяют это делать через Google Translate API. Один из них с поддержкой Vue - google-translate-select.

#tip #google #i18n

12 марта 2024 года в Core Web Vitals (основные показатели качества вебсайта) заменят
First Input Delay (FID) на Interaction to Next Paint (INP), который лучше учитывает UX при взаимодействии пользователя с сайтом.

В Google (создатель Core Web Vitals) не раз заявляли, что сайты научились обманывать метрику FID, что давало высокий результат в показателях при плохом пользовательским опыте.

В итоге, как видно на замерах Page Speed, показатели многих сайтов станут неудовлетворительными, в том числе, использующих SSR и гордящихся своими метриками (на картинке выше результаты по nuxt.com). У Vue SPA падение тоже есть, хотя и не такое большое.

#webvitals #nuxt #google

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

В 2016 году сервис PageRank был закрыт для предотвращения спекуляций и мошенничества. Сейчас маркетинговые компании вычисляют рейтинги самостоятельно.

Инициатива OpenPageRank была создана для публичной замены Google PageRank. Раз в несколько месяцев они обрабатывают массив из свыше трех миллиардов вебстраниц и обновляют свой рейтинг.

15 марта 2024 года vue-faq.org вошел в top 500K. Для сравнения приведены рейтинги некоторых других сайтов (result.school - школа Минина)

#pagerank #vuefaq #google

На днях Google подарил всем Speculation API.

Позволяет предварительно загрузить и даже зарендерить любой ресурс:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

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

Наиболее эффективно для SSR (во всех смыслах) и MPA сайтов. SPA от этого сильно пользы не получат, потому как и так быстрые при переходах по сайту.

Работает в Chrome и MS Edge

Пользователи с медленным или платным интернетом аплодируют стоя.

#google #chrome #speculationapi

Сарказм в прошлом посту: "Пользователи с медленным или платным интернетом аплодируют стоя" оказался не понят.

Представим пользователя на 3G или на спутниковом интернете с раздачей через WiFi с тарифом $80 за 1Gb, который зашел на страницу, а владелец сайта сразу же не спрашивая начинает ему грузить половину своего сайта, забивая полностью канал и CPU (рендеринг же).

В презентации сотрудник Google говорит, что они посотрудничали с представителями WordPress, на котором крутится "30% всех сайтов" (его слова), и сделали плагин, который легко позволяет админам WP на первой же странице загрузить и зарендерить хоть все страницы его сайта.

По поводу перформанса он походя тоже выразился: "Ну на сайтах же обычно несколько iframe-ов есть, будет еще один"

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

Теперь такой преграды нет.

#google

Прошла большая конференция Google I/O
Обзор JavaScript фремворков от команды Chrome

По Vue немного прошлиcь, но упомянули, что множество реализаций JS сигналов черпают вдохновение во Vue Reactivity API

07:37 - Angular
12:20 - React
20:23 - Next.js
23:20 - Remix
27:35 - Vue.js
29:58 - Nuxt.js
32:37 - Astro
39:16 - Svelte
40:36 - SvelteKit

#event #video #google

На конференции Google I/O был озвучен новый функционал, который стал доступен веб разработчикам в 2023-2024 годах:

HTML and CSS
The inert attribute
Size container queries and container query units
New color spaces and functions
The :user-valid and :user-invalid pseudo-classes
CSS Subgrid
Trigonometric functions in CSS
CSS :has() selector
Complex nth-child selectors in CSS with the 'of S' syntax
New range syntax for media queries
The linear() easing function
CSS Nesting
Relaxed parsing for CSS Nesting
Lazy-load offscreen iframes
Declarative Shadow DOM
CSS offset-position and offsetpath values
The Popover API
align-content on block layout

JavaScript and Web APIs
Import maps
modulepreload
Offscreen canvas
Constructable stylesheets
Compression streams
The Origin Private File system
Array fromAsync() static method
ArrayBuffer transfer() and transferToFixedLength()
groupBy() functions
Promise.withResolvers
intl.Segmenter

Видеообзор

#google #html #css #js

Много лет Google Tasks был таким сирым и убогим отпрыском в семействе продуктов Google. Из плюсов в нём был доступный API.

Из-за чрезмерной упрощенности Google Tasks ранее не пригождался, и для небольших напоминаний я давно использовал Google Calendar события + Google Keep или TickTick (который на телефоне постоянно выгружается из памяти), но тут обнаружил, что Google Tasks сильно переделали и привели в соответствующий эпохе вид. Даже в "канбан" доску засунули.

Выглядит удобоваримо. И семантика поправилась: "Позвонить Маше" - это, всё-таки, задача, а не событие.

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

#google #tasks #pet

Если вы используете Google Analytics то Google Pagespeed часто ругается сам на себя - gtag.js размером в 100Кб+ снижает показатели сайта.

Можно сделать следующий финт:

 <script async src="https://www.googletagmanager.com/gtag/js?id=G-0SGZMMY7Y4"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());

   gtag('config', 'G-0SGZMMY7Y4');
</script>

меняете на

<script>
  window.addEventListener('load', function() {
    setTimeout(() => {
    var script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtag/js?id=G-0SGZMMY7Y4';
    script.async = true;
    document.head.appendChild(script);

    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-0SGZMMY7Y4');
  }, 3000);
});
</script>
});

Ушедшие в первые 3 секунды посетители считаться не будут, но они, обычно, и не нужны.

#google #seo

Еще один игрок на рынке AI IDE на Gemini 2 - codeassist.google

Расширения для VS Code и JetBrains
Автокомплит и чат
Вроде неплохой бесплатный план

——

А вот чувак попробовал 36 разных AI IDE и агентов для кодинга

Создавал приложения, делал описательные видео

#ai #google #ide