Короткий ответ
Сайт портфолио — ваш собственный адрес, где клиент проверяет работы до того, как нанять вас. У каждой работы своя страница: задача, ваша роль, результат с источником и честная метка — заказ клиента, свой продукт или концепт. Вокруг нужны простые разделы, быстрые страницы, текст которых робот читает без скриптов, и настоящие языковые версии, если клиенты читают на разных языках.
Зачем нужен свой сайт портфолио, если есть соцсети
Прежде чем нанять дизайнера, фотографа или небольшую студию, клиент обычно ищет человека в интернете. Свой сайт портфолио отвечает на этот поиск: ваши работы, ваша роль в них и способ связаться — по адресу, который принадлежит вам. Профиль в соцсети или канал в Telegram покажет похожие картинки, но в порядке и формате, которые задаёт площадка. У PDF-презентации во вложении нет публичного адреса, и устаревает она на следующий день после отправки.
Руководство Google по основам SEO говорит, что поисковик находит страницы прежде всего по ссылкам с уже просканированных страниц и что попадание конкретного сайта в индекс не гарантировано. Поэтому сам по себе сайт клиентов не приведёт. Зато каждой ссылке, от подписи в письме до профиля на бирже, есть куда вести: на страницы, которые подчиняются только вам.
Что должно быть на странице каждой работы в портфолио
Единица портфолио — не картинка, а страница работы. Она отвечает на четыре вопроса: какой была задача, что сделали лично вы, что получилось и как это проверить. Подпись называет логотип, а кейс показывает бриф, предложенные варианты и выбранное решение. В командной работе прямо назовите свою часть: арт-дирекция, вёрстка, ретушь или код.
Результату нужны период и источник, иначе опытный заказчик примет цифру за украшение. Руководство Google о полезном и надёжном контенте, созданном для людей, предлагает проверку, полезную и вне поиска. Оно спрашивает, подана ли информация так, чтобы ей хотелось доверять, например с ясными источниками, и очевидно ли, кто и как сделал материал.
Помечайте каждую работу тем, чем она является. Заказ клиента, свой продукт и концепт, сделанный ради демонстрации навыка, — честные работы, но доказывают они разное, а путаница стоит доверия. Спросите клиента письменно, можно ли показывать работу и её цифры, и сохраните ответ. Несколько подписанных и объяснённых работ скажут заказчику больше, чем стена миниатюр.
Какие разделы и языковые версии нужны портфолио
Сайт портфолио дизайнера, фотографа или фрилансера держится на одних и тех же страницах: главная, где на одном экране сказано, кто вы и чем занимаетесь, список работ с фильтрами, страница каждой работы, «Обо мне», услуги и контакты. Фильтры важны: клиент, которому нужна упаковка, не станет листать свадебные съёмки. Адрес каждой работы лучше составить из понятных слов: руководство Google предпочитает такие URL адресам из случайных идентификаторов.
Если клиенты читают на разных языках, нужна отдельная версия каждой страницы, а не кнопка автоперевода. Справка Google о локализованных версиях просит разметку hreflang, где каждая версия указывает на себя и на все остальные; без взаимных ссылок разметка игнорируется. Значение x-default задаёт запасную страницу для посетителя, чей язык не совпал ни с одной версией. Справка Яндекс Вебмастера описывает те же элементы link, а файл Sitemap для языковых версий Яндекс больше не поддерживает, так что разметка в head подходит обоим поисковикам.
Технические основы, которые шаблон портфолио может скрыть
Портфолио тяжелы: крупные изображения, видео, анимация. Статья web.dev определяет Largest Contentful Paint (LCP) как время отрисовки самого крупного изображения, текстового блока или видео в видимой области экрана. Цель — 2,5 секунды или меньше для 75-го процентиля загрузок, отдельно на телефоне и на компьютере. Две другие метрики Core Web Vitals — Interaction to Next Paint не больше 200 миллисекунд и Cumulative Layout Shift не больше 0,1.
Текст должен читаться без скриптов. В основах JavaScript SEO Google называет серверную или предварительную отрисовку по-прежнему отличной идеей: так сайт быстрее для людей и роботов, а JavaScript умеют выполнять не все боты. Индексирует Google мобильную версию сайта, которую обходит робот для смартфонов, поэтому главная вёрстка — телефонная. Учебные материалы W3C по доступности просят текстовую альтернативу для информативных изображений и пустой alt для декоративных.
Канонический адрес подсказывает Google, какую из похожих страниц показывать; документация называет rel=canonical сильным сигналом, но о дублях поисковик решает сам. Карта сайта перечисляет важные страницы, однако, по документации Google о файлах Sitemap, их сканирования и индексации она не гарантирует. Медиа-функция prefers-reduced-motion, по описанию MDN, узнаёт, включена ли на устройстве настройка против лишнего движения: такая анимация может вызывать дискомфорт при вестибулярных нарушениях.
Кейс tarasovvitalii.com: портфолио основателя на четырёх языках
tarasovvitalii.com — личный сайт Виталия Тарасова, основателя VITON13; студия VITON13 спроектировала и собрала его для себя, это собственный продукт студии, а не клиентский заказ. Сайт работает с 23 сентября 2026 года на английском, русском, испанском и китайском. У каждой из 21 работы есть метка: один клиентский сайт, десять собственных продуктов студии и десять концептов. На странице кейса — цифры с источниками и блок «Чего это не доказывает».
В каждой языковой версии восемь типов страниц: главная, список работ, страница каждой работы, «Обо мне», услуги, новости, контакты и сообщения, плюс 404. Всего 116 HTML-файлов; 108 страниц для поиска перечислены в карте сайта, а сообщения и 404 в неё не входят. Написать можно прямо со страницы, войдя через VITON ID, или оставить почту в гостевой форме без регистрации.
Как собран и проверен сайт портфолио основателя
Сайт — чистые HTML, CSS и JavaScript, собранные статическим генератором на Node. Каждая страница заранее отрисована на каждом языке, и робот читает весь текст, не выполняя скриптов. Анимация выключается, если система посетителя просит меньше движения. 24 сентября 2026 года Lighthouse 13 поставил главной 99 за производительность и 100 за доступность, рекомендации и SEO на телефоне и компьютере. На телефоне страница загрузилась за 25 запросов и 1,6 МБ, LCP — 2,0 с, без блокировки и сдвигов вёрстки.
В тот же день все 108 страниц из карты сайта отрисовали в Chrome при ширине 390 px. У каждой один H1, канонический URL на саму себя, hreflang на четыре версии и x-default, Open Graph и JSON-LD. У всех 872 изображений есть атрибут alt (у миниатюр рядом с названием он пустой), ни одна страница не прокручивается вбок, а 182 внутренних адреса из ссылок ответили без ошибок. Кое-что сделано лишь частично: уникальны 107 тегов title из 108, а китайский title, повторяющий английский, стоит в списке доработок.
Чего не доказывает кейс tarasovvitalii.com
Прежде всего это собственный сайт основателя, сделанный студией для себя, а не для клиента, так что работу по чужому брифу он не показывает. Сайт запущен 23 сентября 2026 года, данных о трафике, позициях и обращениях пока нет, и кейс их не заявляет. Цифры поиска в шоуриле относятся к другому кейсу, SB Excursions, а не к этому сайту.
Оценки Lighthouse — лабораторный замер главной в один день; повторный замер на компьютере через несколько минут дал 95 за производительность. Документация Chrome об оценке производительности в Lighthouse объясняет, что многие такие колебания вызывает не сам инструмент, а меняющиеся условия: маршрутизация трафика, расширения браузера, антивирус. В web.dev добавляют, что лабораторный замер не заменяет полевого, а цель для LCP относится к реальным загрузкам, которых один прогон не покажет.
Страница в карте сайта — приглашение к обходу, а не доказательство индексации. Руководство Google советует проверять, как поисковик видит страницу, инструментом проверки URL в Search Console и предупреждает: одни изменения вступают в силу за несколько часов, другие — за несколько месяцев. Доступ к сайту из материкового Китая не проверялся, а чат зависит от сервисов Google Firebase. Ваше портфолио заслуживает такой же честности в каждой цифре.
Как подготовить сайт портфолио: шаблон или своя разработка
Начните с материала, а не с дизайна. Отберите от 8 до 20 работ, которые вам разрешено показывать, запишите свою роль в каждой и по возможности получите письменное согласие клиента. Соберите исходники, фото и видео в полном качестве, а цифры — с периодом и источником. Сайт портфолио на двух языках — это два комплекта текстов, а не один комплект и кнопка.
Шаблона конструктора хватит для десятка работ на одном языке, если его макеты им подходят и вы готовы сами проверить скорость, alt и мобильную версию. Своя разработка оправдана, когда работам нужна особая подача, несколько языков требуют правильного hreflang или сайту нужны переписка и личный кабинет. Такие сайты проектирует и собирает студия VITON13. Платформы подробно сравнивает руководство по ссылке ниже.
Практический чеклист
- Отберите от 8 до 20 работ, которые можно показывать, и запишите рядом свою роль.
- Поставьте у каждой работы видимую метку: клиентский проект, свой продукт или концепт.
- Добавьте на страницу каждой работы задачу, результат и источник каждой цифры.
- Напишите полноценные тексты на каждом языке и свяжите версии разметкой hreflang.
- До запуска откройте главную и одну страницу работы на телефоне и в Lighthouse.
Вопросы и ответы
Сколько работ показать на сайте портфолио при запуске?
Строгой нормы нет. Набор работ, которые вы можете объяснить полностью — с ролью и результатом, — полезнее заказчику, чем десятки миниатюр. Восемь–двадцать работ — практичное начало, а новые кейсы добавляются по мере того, как клиенты разрешают их публиковать.
Можно ли дизайнеру обойтись профилем в соцсети вместо сайта портфолио?
Профиль помогает людям вас найти, но порядок, формат и соседей ваших работ задаёт площадка. Собственный сайт держит каждый кейс по постоянному адресу, где есть место для задачи, роли и доказательств, а профиль может вести на него.
Стоит ли добавлять концепты в портфолио и как их помечать?
Да, если они показывают навык, который может понадобиться клиенту. Пометьте концепт и в списке работ, и на его странице и объясните, зачем он сделан. Проблемы начинаются, только когда концепт выдают за заказ: заказчик, который это заметит, перестаёт верить остальному.
Нужен ли небольшому сайту портфолио файл Sitemap?
В документации Google о файлах Sitemap сказано, что сайту примерно до 500 страниц с подробной внутренней перелинковкой он может быть не нужен. Вреда от карты сайта нет, а при нескольких языковых версиях это удобный список страниц, которые вы хотите отдать на обход.
Поднимет ли идеальная оценка Lighthouse портфолио в поиске?
Сама по себе — нет. Lighthouse делает лабораторный замер одной страницы в один момент, а руководство Google прямо говорит, что секретов, которые автоматически выведут сайт на первое место, нет. Быстрая страница помогает удержать посетителя, остальное делают работы, тексты и ссылки на ваш сайт.