У більшості портфоліо розробників є title-тег, може мета-опис, і нуль структурованих даних. Google може прочитати сторінку, але не розуміє її. Не знає, що ти сервісний бізнес, скільки береш, де працюєш, що казали минулі клієнти.
JSON-LD виправляє це. Це скрипт-блок у <head>, який каже пошуковикам, про що саме сторінка, у форматі, який вони можуть розібрати.
Ось 4 блоки JSON-LD, які має шипити кожне сервісне портфоліо, з кодом для Next.js, який можна копіювати.
1. ProfessionalService — хто ти
Це фундамент. Каже Google, що ти — сервісний бізнес, а не блог чи інтернет-магазин.
// app/layout.tsx або спільний компонент
const businessSchema = {
'@context': 'https://schema.org',
'@type': 'ProfessionalService',
name: "Твоє Ім'я — Full-Stack Розробник",
url: 'https://yoursite.com',
logo: 'https://yoursite.com/logo.png',
image: 'https://yoursite.com/og-image.jpg',
description:
'Full-stack розробка для стартапів. Next.js, React Native, інтеграція Stripe.',
address: {
'@type': 'PostalAddress',
addressLocality: 'Bratislava',
addressCountry: 'SK',
},
geo: {
'@type': 'GeoCoordinates',
latitude: 48.1486,
longitude: 17.1077,
},
priceRange: '€€',
areaServed: {
'@type': 'GeoCircle',
geoMidpoint: {
'@type': 'GeoCoordinates',
latitude: 48.85,
longitude: 2.35,
},
geoRadius: '3000 km',
},
knowsLanguage: ['en', 'ru', 'uk'],
sameAs: [
'https://github.com/yourusername',
'https://linkedin.com/in/yourusername',
],
}
Чому важливо: Google використовує ProfessionalService для заповнення панелей знань і результатів локального бізнесу. Навіть якщо працюєш віддалено, поле areaServed повідомляє Google охоплення ринку.
Часта помилка: Використання Organization замість ProfessionalService. Organization занадто загальний — Google не може вивести, що ти продаєш послуги.
2. Service — що продаєш
Один блок Service на кожну послугу. Будь конкретним — «MVP Development» конвертить краще в пошуку, ніж «Web Development».
const serviceSchema = {
'@context': 'https://schema.org',
'@type': 'Service',
serviceType: 'MVP Development',
provider: {
'@type': 'ProfessionalService',
name: "Твоє Ім'я",
url: 'https://yoursite.com',
},
areaServed: 'Europe',
description:
'Повний цикл розробки MVP для стартапів. Від скоупінгу до запуску за 12 тижнів.',
offers: {
'@type': 'Offer',
priceCurrency: 'EUR',
price: '8000',
priceSpecification: {
'@type': 'PriceSpecification',
minPrice: '8000',
maxPrice: '25000',
priceCurrency: 'EUR',
},
},
}
Чому важливо: Схема Service може тригерити rich-сніпети з інформацією про ціни в результатах пошуку. Для low-funnel запитів типу «MVP developer Europe price» — це високоцінна територія.
Порада: Якщо кілька послуг (веб-застосунок, мобільний, консалтинг) — створи окремі блоки Service. Не звалюй усе в один.
3. Review / AggregateRating — соціальний доказ
Якщо на сайті є відгуки — розмічуй їх. Google може показувати рейтинг зірками в результатах пошуку для сервісного бізнесу.
const reviewSchema = {
'@context': 'https://schema.org',
'@type': 'ProfessionalService',
name: "Твоє Ім'я",
aggregateRating: {
'@type': 'AggregateRating',
ratingValue: '5',
reviewCount: '12',
bestRating: '5',
},
review: [
{
'@type': 'Review',
author: { '@type': 'Person', name: "Ім'я Клієнта" },
datePublished: '2026-03-15',
reviewBody:
'Зашипили наш MVP за 10 тижнів. Чистий код, зрозуміла комунікація, без сюрпризів.',
reviewRating: { '@type': 'Rating', ratingValue: '5', bestRating: '5' },
},
],
}
Важливо: Розмічуй тільки реальні відгуки від реальних клієнтів. Google штрафує за сфабриковані відгуки. Якщо є 3 справжніх — розмічуй 3, не 30.
Де розміщувати: На сторінці, де відгуки реально відображаються. Не додавай review-схему на сторінки без відгуків — Google вважає це обманом.
4. Article — для блог-постів
Якщо є блог (а він має бути) — кожен пост повинен мати Article-схему.
const articleSchema = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: post.title,
description: post.description,
datePublished: post.date,
dateModified: post.date,
author: {
'@type': 'Person',
name: "Твоє Ім'я",
url: 'https://yoursite.com',
},
publisher: {
'@type': 'ProfessionalService',
name: "Твоє Ім'я",
logo: { '@type': 'ImageObject', url: 'https://yoursite.com/logo.png' },
},
mainEntityOfPage: {
'@type': 'WebPage',
'@id': `https://yoursite.com/blog/${post.slug}`,
},
}
Чому важливо: Article-схема допомагає Google зрозуміти свіжість контенту (через dateModified), авторство і тему. Може тригерити rich-результати з датами публікації та інформацією про автора в пошуку.
Як додати JSON-LD в Next.js
В App Router додай <script> тег у layout або page:
export default function Layout({ children }) {
return (
<html>
<head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(businessSchema),
}}
/>
</head>
<body>{children}</body>
</html>
)
}
Для сторінкової схеми (статті, послуги) додавай скрипт-блок у компоненті сторінки, не в layout:
export default function BlogPost({ post }) {
const articleSchema = {
/* ... */
}
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(articleSchema),
}}
/>
<article>{/* контент посту */}</article>
</>
)
}
Валідація
Після додавання JSON-LD — валідуй:
- Google Rich Results Test — показує, чи підходить схема для rich-результатів
- Schema.org Validator — перевіряє структурну коректність
- Google Search Console — після індексації перевір розділ «Покращення» на помилки схеми
Запускай валідацію після кожної зміни схеми. Пропущена кома в JSON-LD тихо ламає весь блок — жодної помилки при рантаймі, просто немає структурованих даних.
Чим не варто заморочуватися
- BreadcrumbList — корисний для e-commerce, зайвий для портфоліо з 5 сторінками.
- FAQ-схема — Google депріоритизує FAQ rich-результати. Не додавай, якщо сторінка не є реально FAQ.
- HowTo-схема — для рецептних сайтів і туторіалів, не для сервісного бізнесу.
Чотири блоки: ProfessionalService, Service, Review, Article. Це вкладення в schema.org, яке окупається для портфоліо розробника. Все інше — спадна віддача.
Хочеш, щоб структуровані дані були правильно налаштовані на сайті? Напиши — я шиплю технічний SEO за замовчуванням на кожному клієнтському проєкті.