https://analytics.net.ua/ru/tools/Recent content in Инструменты on AnalyticsHugoruWed, 08 Apr 2026 00:00:00 +0000https://analytics.net.ua/ru/tools/meta-tag-checker/Wed, 08 Apr 2026 00:00:00 +0000https://analytics.net.ua/ru/tools/meta-tag-checker/<div x-data="metaChecker()" class="not-prose space-y-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Title tag</label> <input type="text" x-model="title" maxlength="120" placeholder="Введите title тег..." class="w-full px-4 py-2.5 border border-gray-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"> <div class="mt-1.5 flex items-center justify-between"> <span class="text-xs" :class="titleStatus.color" x-text="titleStatus.text"></span> <span class="text-xs font-mono" :class="title.length >= 50 && title.length <= 60 ? 'text-emerald-600' : title.length > 60 ? 'text-red-500' : 'text-gray-400'" x-text="title.length + '/60'"></span> </div> <div class="mt-1 w-full bg-gray-200 rounded-full h-1.5"> <div class="h-1.5 rounded-full transition-all duration-200" :class="title.length <= 60 ? 'bg-emerald-500' : 'bg-red-500'" :style="'width:' + Math.min((title.length / 60) * 100, 100) + '%'"></div> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Meta description</label> <textarea x-model="description" maxlength="320" rows="3" placeholder="Введите мета-описание..." class="w-full px-4 py-2.5 border border-gray-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent resize-none"></textarea> <div class="mt-1.5 flex items-center justify-between"> <span class="text-xs" :class="descStatus.color" x-text="descStatus.text"></span> <span class="text-xs font-mono" :class="description.length >= 120 && description.length <= 160 ? 'text-emerald-600' : description.length > 160 ? 'text-red-500' : 'text-gray-400'" x-text="description.length + '/160'"></span> </div> <div class="mt-1 w-full bg-gray-200 rounded-full h-1.5"> <div class="h-1.5 rounded-full transition-all duration-200" :class="description.length <= 160 ? 'bg-emerald-500' : 'bg-red-500'" :style="'width:' + Math.min((description.length / 160) * 100, 100) + '%'"></div> </div> </div> <div x-show="title || description" x-cloak> <h3 class="text-sm font-medium text-gray-700 mb-3">Предпросмотр в Google</h3> <div class="p-4 bg-white border border-gray-200 rounded-md max-w-xl"> <div class="text-xs text-emerald-700 mb-1">https://example.com › page</div> <div class="text-lg text-blue-800 hover:underline cursor-pointer leading-snug" x-text="title || 'Заголовок страницы'"></div> <div class="mt-1 text-sm text-gray-600 leading-relaxed line-clamp-2" x-text="description || 'Описание страницы будет показано здесь...'"></div> </div> </div> <div x-show="tips.length > 0" x-cloak class="space-y-2"> <h3 class="text-sm font-medium text-gray-700">Рекомендации</h3> <template x-for="tip in tips" :key="tip"> <div class="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded text-sm text-amber-800"> <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg> <span x-text="tip"></span> </div> </template> </div> </div> <script> function metaChecker() { const lang = 'ru'; const t = { uk: { tooShort: 'Занадто короткий — додайте більше інформації', good: 'Оптимальна довжина', tooLong: 'Занадто довгий — може бути обрізаний у пошуку', tipTitleShort: 'Title коротший за 30 символів — додайте ключове слово або бренд', tipTitleLong: 'Title довший за 60 символів — Google може обрізати його', tipDescShort: 'Description коротший за 70 символів — додайте більше деталей', tipDescLong: 'Description довший за 160 символів — Google може обрізати його', tipNoTitle: 'Title тег обов\'язковий для SEO', tipNoDesc: 'Meta description важливий для клікабельності в пошуку' }, ru: { tooShort: 'Слишком короткий — добавьте больше информации', good: 'Оптимальная длина', tooLong: 'Слишком длинный — может быть обрезан в поиске', tipTitleShort: 'Title короче 30 символов — добавьте ключевое слово или бренд', tipTitleLong: 'Title длиннее 60 символов — Google может обрезать его', tipDescShort: 'Description короче 70 символов — добавьте больше деталей', tipDescLong: 'Description длиннее 160 символов — Google может обрезать его', tipNoTitle: 'Title тег обязателен для SEO', tipNoDesc: 'Meta description важен для кликабельности в поиске' } }[lang] || t.uk; return { title: '', description: '', get titleStatus() { const l = this.title.length; if (l === 0) return { text: '', color: 'text-gray-400' }; if (l < 30) return { text: t.tooShort, color: 'text-amber-500' }; if (l <= 60) return { text: t.good + ' ✓', color: 'text-emerald-600' }; return { text: t.tooLong, color: 'text-red-500' }; }, get descStatus() { const l = this.description.length; if (l === 0) return { text: '', color: 'text-gray-400' }; if (l < 70) return { text: t.tooShort, color: 'text-amber-500' }; if (l <= 160) return { text: t.good + ' ✓', color: 'text-emerald-600' }; return { text: t.tooLong, color: 'text-red-500' }; }, get tips() { const arr = []; if (this.title.length > 0 && this.title.length < 30) arr.push(t.tipTitleShort); if (this.title.length > 60) arr.push(t.tipTitleLong); if (this.description.length > 0 && this.description.length < 70) arr.push(t.tipDescShort); if (this.description.length > 160) arr.push(t.tipDescLong); return arr; } }; } </script> <h2 id="как-использовать">Как использовать</h2> <p>Введите ваш title тег и meta description, чтобы проверить их длину и увидеть, как они будут выглядеть в результатах поиска Google.</p>https://analytics.net.ua/ru/tools/utm-builder/Wed, 08 Apr 2026 00:00:00 +0000https://analytics.net.ua/ru/tools/utm-builder/<div x-data="utmBuilder()" class="not-prose space-y-6"> <div class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1"> URL <span class="text-red-500">*</span> </label> <input type="url" x-model="url" placeholder="https://example.com" class="w-full px-4 py-2.5 border border-gray-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent" :class="url && !isValidUrl ? 'border-red-300 bg-red-50' : ''"> <p x-show="url && !isValidUrl" x-cloak class="mt-1 text-xs text-red-500">Введите корректный URL</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1"> utm_source <span class="text-red-500">*</span> </label> <input type="text" x-model="source" placeholder="google, facebook, newsletter" class="w-full px-4 py-2.5 border border-gray-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"> <p class="mt-1 text-xs text-gray-400">Источник трафика</p> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1"> utm_medium <span class="text-red-500">*</span> </label> <input type="text" x-model="medium" placeholder="cpc, email, social, banner" class="w-full px-4 py-2.5 border border-gray-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"> <p class="mt-1 text-xs text-gray-400">Канал</p>