Проверяем сайт на живой ссылке

Задача

Сайт Мерве (уроки 4.2-4.11) опубликован. У себя на компьютере всё работало, а на живой ссылке оказалось иначе. Подруга прислала скриншот: кнопка WhatsApp открывает чужой номер, потому что в ссылке остался ноль перед кодом. Ссылка, отправленная в WhatsApp, приходит без картинки, с заголовком «Document». Мерве хочет один чек-лист, который она будет проходить после каждой публикации.

Словарик.

• Живая ссылка: адрес, по которому сайт открывают клиенты (….netlify.app, ….pages.dev или твой домен). Проверять нужно именно её, а не файл на компьютере.
• title и description: заголовок вкладки и короткое описание страницы. Их видит поиск.
• Превью (Open Graph): карточка с картинкой и заголовком, которую мессенджеры и соцсети показывают при отправке ссылки. Задаётся тегами og:title, og:image и другими.
• Favicon: маленькая иконка сайта во вкладке браузера.
• 404: страница «не найдено» для несуществующих адресов.

Шаги

1. Проверяй живую ссылку, а не файл. Открой адрес сайта в режиме инкогнито: так браузер не покажет старую версию из памяти (кеша). Проходи чек-лист после каждой публикации (цикл из урока 4.10).

2. Телефон и компьютер. На телефоне открой ссылку из Instagram или WhatsApp, как это сделает клиент. Проверь:

   • текст не вылезает за край, ничего не надо листать вбок;
   • кнопки удобно нажимать пальцем;
   • фото не растянуты;
   • турецкие буквы (ç, ğ, ı, İ, ö, ş, ü) везде правильные. На компьютере проверь, что страница не превратилась в узкую колонку посередине и картинки не огромные. Если есть второй телефон (Android и iPhone), проверь на обоих.

3. Каждая кнопка и форма. Нажми всё, что нажимается: меню, якорные ссылки («Atölyeler» → прокрутка к расписанию), карту, Instagram. Если есть форма (урок 4.3), отправь тестовую заявку и убедись, что она пришла.

4. WhatsApp и телефон. Самое важное для заявок:

   • ссылка WhatsApp по официальной справке имеет вид https://wa.me/<номер>, номер в международном формате, без нулей впереди, скобок и дефисов. Для Турции это 90…, а не 0… или +90 (…);
   • заготовленный текст добавляется через ?text=, пробелы в нём кодируются (%20);
   • кнопка звонка это ссылка tel: с тем же номером. Нажми её с телефона: должен открыться набор номера.

5. Скорость. Открой pagespeed.web.dev (официальный сервис Google PageSpeed Insights), вставь адрес и запусти проверку. По документации Google:

   • отчёт есть для телефона и для компьютера, начинай с телефона;
   • оценка 90 и выше значит хорошо, 50-89 нужно улучшать, ниже 50 плохо;
   • «полевые данные» (реальные посетители за 28 дней) у нового сайта обычно отсутствуют, это нормально. Смотри на лабораторную часть. Не гонись за 100. Если оценка низкая, отдай Claude Code список замечаний из отчёта (шаблон ниже). Частая причина: слишком тяжёлые фото.

6. Заголовок и описание для поиска. Google советует: у каждой страницы свой title, короткий и понятный, не «Ana Sayfa» и без нагромождения ключевых слов. Пример: «Merve Seramik | Kadıköy'de seramik atölyesi». Проверка: посмотри на название вкладки. Описание (description): одно-два предложения о том, что ты предлагаешь и где.

7. Превью в мессенджерах. Отправь ссылку себе в WhatsApp и Telegram. Должны быть картинка, название и описание. Для этого на странице нужны теги Open Graph. По ogp.me обязательные: og:title, og:type, og:image, og:url, рекомендуемый: og:description. Картинка указывается полным адресом (https://…), а не images/foto.jpg. Мессенджеры запоминают превью, поэтому после исправления оно может обновиться не сразу.

8. Favicon. Посмотри на вкладку браузера: там должна быть твоя иконка, а не пустой лист. Простой вариант: квадратная иконка из логотипа или первой буквы. По требованиям Google для показа в поиске иконка квадратная (1:1), не меньше 8×8 px, лучше больше 48×48 px, и подключена тегом <link rel="icon" …> на главной странице. Попроси Claude Code сделать её и подключить.

9. Страница 404. Открой твой-адрес/abc. Должна появиться твоя страница «Sayfa bulunamadı» с кнопкой на главную.

   • Netlify по документации сам показывает файл 404.html, если он есть в корне сайта.
   • Cloudflare Pages тоже ищет 404.html. Если его нет, Cloudflare считает сайт одностраничным приложением и на любой неверный адрес показывает главную. Ошибки не видно, но и человек не понимает, что ссылка неверная. Поэтому 404.html нужен.
   • Cloudflare Workers (если публиковал через Workers, а не Pages): по документации 404.html показывается при настройке not_found_handling = "404-page" в конфигурации. Попроси Claude Code проверить.

10. Запиши результат. Сохрани чек-лист в проекте файлом CHECKLIST.md и отмечай, что проверено и когда. Через месяц ты не вспомнишь, проверял ли кнопку звонка.

Шаблон

Я [имя], не программист. Объясняй простыми словами.
Сайт опубликован: [адрес сайта]. Код лежит в этой папке.
Проверь сайт по чек-листу и исправь, что не так:
1. Вёрстка на телефоне (ширина 360-430 px) и на компьютере: ничего не вылезает за край, кнопки удобные.
2. Все ссылки и кнопки ведут куда нужно. Якорные ссылки работают.
3. WhatsApp: формат https://wa.me/90XXXXXXXXXX, без 0, +, скобок и пробелов. Текст в ?text= закодирован. Кнопка звонка: tel: с тем же номером. Номер: [номер].
4. У каждой страницы свой <title> и meta description на турецком.
5. Теги Open Graph: og:title, og:type, og:image (полный адрес https://…), og:url, og:description.
6. Favicon подключён.
7. Есть 404.html на турецком с кнопкой на главную.
8. Фото сжаты, у картинок есть alt на турецком.
Замечания PageSpeed Insights (вставлю ниже): [скопируй текст замечаний из отчёта].
Порядок: сначала список найденных проблем, потом план. Жди моего «ок».
После правок скажи, как проверить каждый пункт на живой ссылке, и сделай коммит.

Источники

• About PageSpeed Insights (developers.google.com): мобильный и компьютер, лабораторные и полевые данные (28 дней), шкала 90+ / 50-89 / ниже 50
• How to use click to chat (whatsapp.com): формат wa.me/<номер>, без нулей, скобок и дефисов, ?text=
• Influencing your title links (developers.google.com): свой title у каждой страницы, коротко, без «Home» и нагромождения слов
• The Open Graph protocol (ogp.me): обязательные og:title, og:type, og:image, og:url; og:description
• Redirect options: Custom 404 (docs.netlify.com): 404.html подхватывается автоматически
• Serving Pages (developers.cloudflare.com): поиск 404.html, без него режим одностраничного приложения
• Static Site Generation and custom 404 pages (developers.cloudflare.com): not_found_handling = "404-page" для Workers
• Favicon in Google Search (developers.google.com): квадрат, минимум 8×8 px, рекомендуется больше 48×48 px, <link rel="icon"> на главной