Иллюстрация к эксперименту в сообщении выше в виде Coding Music Video
https://vimeo.com/891441617
#cmv #spa #google #seo
https://vimeo.com/891441617
#cmv #spa #google #seo
Vimeo
SPA SEO test
Testing if Google indexes SPA websites Vue 3 website with async data loading Repository: https://github.com/vuesence/spa-seo-cmv
Адаптировал для Реддита и запостил там свою статью 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
Как обычно, на таких ресурсах интересны комментарии пользователей.
Первый комментарий - что 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
Reddit
From the vuejs community on Reddit: Google SEO for Vue SPA - research
Explore this post and more from the vuejs community
Еще о SEO
Case study с сайта Strapi
Наше одностраничное приложение (SPA) на базе Nuxt. js генерируется статически и передается через CDN по всему миру для максимальной скорости и доступности. Это необычно для электронной коммерции, но позволяет нам поддерживать множество продуктов без необходимости предварительно рендерить и статически генерировать тысячи страниц во время сборки/развертывания, так как мы столкнулись с этой проблемой на ранних этапах разработки.
Мы используем CDN Netlify и их предварительный рендерер, который обрабатывает запросы для SEO и обновлений, поскольку у нас обычно нет серверных или индексных файлов.
Для Seo можно использовать пререндереры хостеров, как здесь.
#seo #nuxt
Case study с сайта Strapi
Наше одностраничное приложение (SPA) на базе Nuxt. js генерируется статически и передается через CDN по всему миру для максимальной скорости и доступности. Это необычно для электронной коммерции, но позволяет нам поддерживать множество продуктов без необходимости предварительно рендерить и статически генерировать тысячи страниц во время сборки/развертывания, так как мы столкнулись с этой проблемой на ранних этапах разработки.
Мы используем CDN Netlify и их предварительный рендерер, который обрабатывает запросы для SEO и обновлений, поскольку у нас обычно нет серверных или индексных файлов.
Для Seo можно использовать пререндереры хостеров, как здесь.
#seo #nuxt
strapi.io
Mug & Snug uses Strapi to develop a social e-commerce platform
Phillip Gourley, CEO, gives his feedback about the headless CMS Strapi that he's been using to manage content with Netlify, Nuxt.js, MongoDB Atlas, Docker, Stripe and Braintree.
Хм..
Почитал как работают Core Web Vitals и прозрачным прямоугольником на сплэш-скрине смог свести LCP до минимума (ранее был в районе 2 секунд)
Это этим занимаются SEO-специалисты?
#seo #webvitals
Почитал как работают Core Web Vitals и прозрачным прямоугольником на сплэш-скрине смог свести LCP до минимума (ранее был в районе 2 секунд)
Это этим занимаются SEO-специалисты?
#seo #webvitals
Если вы используете
Можно сделать следующий финт:
меняете на
Ушедшие в первые 3 секунды посетители считаться не будут, но они, обычно, и не нужны.
#google #seo
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
К хорошим новостям
Год назад я делал испытания по индексации поисковиками
За прошедшее время
Итого,
1. Индексируются поисковиками
2. Дают лучшие показатели
Да, постраничный
Чем там ещё
Всегда говорил, что
#ssr #seo #nuxt
Год назад я делал испытания по индексации поисковиками
SPA
на Vue
, и тогда Google
справился, а Яндекс
не потянулЗа прошедшее время
Яндекс
подучился и поумнел (скриншот)Итого,
Vue SPA
:1. Индексируются поисковиками
2. Дают лучшие показатели
Web vitals
, чем SSR NuxtДа, постраничный
OpenGraph
по-прежнему надо делать для SPA
отдельным скриптом на сервере, но это простая небольшая логика.Чем там ещё
SSR
фреймворки хвалились?Всегда говорил, что
BFF SSR
- тупиковая ветвь развития фронтенда, усложняющая архитектуру и загрязняющая код веб приложения без необходимости. Те самые "фокусы". Видимо, доходит и до других, потому как в последнее время что-то часто встречаются статьи типа: "Nuxt это не только SSR"#ssr #seo #nuxt
Эван поставил на свои проекты llms.txt
https://vite.dev/llms.txt
https://rolldown.rs/llms.txt
https://vuejs.org/llms.txt
Сгенерированы vitepress-plugin-llms
(надо было ловить хайп и писать такой плагин)
#ai #seo
https://vite.dev/llms.txt
https://rolldown.rs/llms.txt
https://vuejs.org/llms.txt
Сгенерированы vitepress-plugin-llms
(надо было ловить хайп и писать такой плагин)
#ai #seo