Чтобы удерживать внимание читателей, следуйте нашим лучшим практикам создания
Web Stories. Мы рекомендуем сначала сосредоточиться на критически важных задачах. Если у вас есть больше времени, следуйте также рекомендованным лучшим практикам.
Сторителлинг
| Критические лучшие практики сторителлинга | |
|---|---|
| Видео прежде всего | Видео увлекательнее, чем текст или изображения. Используйте как можно больше видео и дополняйте их изображениями и текстом. |
Больше лучших практик сторителлинга
| Рекомендованные лучшие практики сторителлинга | |
|---|---|
| Привнесите свою перспективу | Выходите за рамки фактов. Делитесь своими мнениями. Будьте главным героем собственной истории. Сделайте ее близкой и понятной. |
| Используйте сюжетную арку | Создавайте интригу в своей истории от одной страницы к другой. Проведите пользователя через путешествие, обеспечивая контекст и повествование. Вознаградите его за то, что он остался с вами до конца. |
Дизайн
| Критические лучшие практики дизайна | |
|---|---|
| Сократите количество символов | Избегайте включения нескольких страниц со сплошным текстом. Рассмотрите возможность сокращения текста примерно до 280 символов на страницу (длина твита). |
| Не загораживайте текст | Убедитесь, что текст не перекрывается другим контентом на странице. Избегайте «вшитого» в изображения текста; не используя его, вы предотвращаете перекрытие текста при изменении его размера под различные экраны устройств. |
| Держите текст в пределах границ | Убедитесь, что весь текст в вашей Web Story виден читателю. Избегайте «вшитого» в изображения текста; не используя его, вы предотвращаете выход текста за границы при изменении его размера под различные экраны устройств. |
| Используйте анимацию осознанно | Оживите свои истории с помощью анимации. Избегайте отвлекающей или повторяющейся анимации, которая может вызывать усталость. |
Больше лучших практик дизайна
| Рекомендованные лучшие практики дизайна | |
|---|---|
| Используйте призывы к действию, специфичные для Web Stories | При воссоздании историй, изначально созданных для социальных платформ вроде Instagram, Snapchat или YouTube, обязательно удаляйте любые призывы к действию, специфичные для конкретной платформы. Убедитесь, что пользователи могут выполнить любые действия, предложенные в вашей Web Story. |
| Используйте видео и изображения на полный экран | Включайте полноэкранные элементы в свои истории, чтобы создать более погружающий опыт для читателей. |
| Избегайте изображений и видео низкого разрешения или искаженных | Используйте высококачественные изображения и будьте осторожны при изменении размера изображений под портретную ориентацию. |
| Добавьте логотип на обложку | Включите логотип высокого разрешения, который представляет ваш бренд. |
| Сократите продолжительность видео | Мы рекомендуем видео длительностью менее 15 секунд на страницу или максимум 60 секунд. |
| Добавьте аудио | Используйте высококачественные аудиоклипы продолжительностью не менее 5 секунд со сбалансированной громкостью и убедитесь, что речь разборчива. |
| Рассмотрите автоматическое перелистывание для историй, состоящих только из видео | Опыт с автопрокруткой для видеоисторий Web Stories может отлично подойти для спокойного просмотра. |
SEO
| Критические лучшие практики SEO | |
|---|---|
| Предоставляйте качественный контент | Как и для любой веб-страницы, предоставление высококачественного контента, полезного и интересного вашим читателям, — это самое важное, что вы можете сделать. Включите полноценный нарратив и следуйте лучшим практикам сторителлинга , чтобы ваши читатели были вовлечены. |
| Держите заголовок коротким | Делайте заголовки короче 90 символов. Мы рекомендуем использовать описательный заголовок длиной менее 70 символов. |
| Убедитесь, что поиск Google может найти вашу историю | Не включайте noindex атрибут в вашу историю; этот атрибут блокирует индексацию страницы Google и не позволяет ей появляться в Google. Кроме того, добавьте свои Web Stories в файл sitemap. Вы можете проверить, может ли Google найти ваши Web Stories с помощью Отчета об индексировании и Отчета о файлахsitemap в Search Console. |
| Сделайте историю self-canonical | Все Web Stories должны быть каноническими. Убедитесь, что у каждой Web Story есть link rel="canonical" на саму себя. Например: <link rel="canonical" href="https://www.example.com/url/to/webstory.html"> |
| Прикрепите метаданные | Убедитесь, что ваши Web Stories следуют  |
Другие рекомендации по SEO
| Рекомендуемые практики SEO | |
|---|---|
| Включение структурированных данных | Мы рекомендуем включать структурированные данные в вашу Web Story, чтобы помочь Поиску Google понять структуру и содержание вашей Web Story. |
| Добавление альтернативного текста к изображениям | Мы рекомендуем добавлять альтернативный текст к вашим изображениям, чтобы улучшить видимость вашей истории. |
| Интеграция историй на ваш сайт | Мы рекомендуем интегрировать Web Stories в ваш сайт, например, ссылаясь на них с вашей главной страницы или страниц категорий, где это уместно. Например, если ваша Web Story посвящена направлению путешествия и у вас есть страница со списком всех ваших статей о путешествиях, также дайте ссылку на Web Stories на этой странице категории. Дополнительная специальная целевая страница, такая как |
| Использование вложений страниц AMP-историй | Вложения страниц AMP-историй можно использовать для предоставления дополнительной информации вместе с вашей Web Story. Это может быть полезно для предоставления дополнительных деталей, глубокого погружения или дальнейших путей для контента, представленного в вашей Web Story. |
| Добавление субтитров к видео | Добавьте субтитры к видео чтобы читатели лучше понимали вашу историю. Избегайте субтитров, «вшитых» в видео, чтобы они не накладывались на другой контент и не выходили за пределы экрана. |
| Оптимизация историй, состоящих только из видео | Мы рекомендуем использовать семантический HTML для создания Web Story. Однако некоторые инструменты для редактирования Web Stories могут вместо этого экспортировать историю, которая форматирует каждый слайд как видеофайл, в который запечен весь текст. В этом случае мы рекомендуем добавить точный текст, отображаемый внутри видео, в качестве атрибута  |
| Добавление поддержки ландшафтных дисплеев | Чтобы Web Stories могли появляться в результатах Поиска Google на компьютере, добавьте поддержку ландшафтных дисплеев. |
Технические
| Критические технические рекомендации | |
|---|---|
| Сделайте историю валидной | Web Stories должны быть валидными страницами AMP. Чтобы избежать проблем с невалидными AMP, протестируйте свою историю с помощью Инструмент AMP Validator и исправьте все обнаруженные ошибки. |
| Не включайте текст в изображение постера | Избегайте использования изображений, содержащих встроенный текст, так как это может закрыть заголовок вашей истории, когда пользователи просматривают ее в результатах поиска. Если пользователи не могут четко прочитать заголовок, они с меньшей вероятностью продолжат чтение. |
| Укажите правильный размер и соотношение сторон изображения постера | Убедитесь, что изображение, связанное с вашим <amp-story> poster-portrait-srcатрибутом, имеет размер не менее 640×853 пикселей и соотношение сторон 3:4. |
| Укажите правильное соотношение сторон для логотипа | Убедитесь, что изображение логотипа, связанное с вашим <amp-story> publisher-logo-srcатрибутом, имеет размер не менее 96×96 пикселей и соотношение сторон 1:1. |
Дополнительные технические рекомендации
| Рекомендуемые технические рекомендации | |
|---|---|
Включите og:image | Мы рекомендуем включить og:image в ваши<meta> теги, чтобы улучшить видимость вашей истории. |
Другие ресурсы
- Web Stories:
Ресурсы по созданию Web Stories от AMP Project. - Включите Web Stories в Google Поиске:
Руководство для разработчиков по созданию Web Stories, соответствующих техническим требованиям для появления в Google Поиске. - Веб-сайт AMP stories: Ориентированные на разработчиков
возможности формата Web Stories. - Веб-доступность: Советы, которые помогут сделать вашу Web Story доступной для всех пользователей.
- Рекомендации по структурированным данным: Подробная информация о добавлении структурированных данных, чтобы помочь Google Поиску понять ваш контент.
Alien Road
Как мы это применяем
Web Story quality guidelines are mostly editorial: pacing, image quality, text length per frame. We brief the client’s design team on them directly, since the constraints are unfamiliar to people used to article layouts.
Связанные услуги