UD5 Toolkit
HTML Boilerplate Generator – Custom HTML5 Skeleton
Configure a modern HTML5 boilerplate with your choice of meta tags, social media cards, favicon links, and CSS/JS includes. Download or copy the code.
HTML Head Snippet Generator - Online Meta, CSS & JS Starter
HTML Head Snippet Generator
Generate SEO-friendly <head> snippets with meta tags, Open Graph, CSS & JS links — ready to paste into your project.
Recommended: 50–60 characters for optimal SEO display
0/160 chars
Comma-separated; less critical for modern SEO
Open Graph (Facebook, LinkedIn, etc.)
Leave blank to use page title
Leave blank to use meta description
Recommended: 1200×630 px
Twitter Cards
Quick Add Presets
Bootstrap 5
Tailwind CSS
Font Awesome 6
Bulma
Google Fonts Quick Add
Custom CSS URLs
Quick Add Presets
jQuery 3
Bootstrap 5 JS
Alpine.js
Vue 3
Custom JS URLs
defer or async can safely go in the <head>. Otherwise, place them before </body>.
Browser UI color on mobile
Live Preview
0 lines<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Frequently Asked Questions
The HTML
<head> snippet contains metadata, stylesheet links, and script references that tell browsers and search engines how to interpret your page. It's critical for SEO, social sharing previews, page performance, and user experience. A well-crafted head section ensures search engines correctly index your content and social platforms display attractive link previews.
Open Graph (OG) tags control how your page appears when shared on social platforms like Facebook, LinkedIn, Slack, and Discord. They define the title, description, and preview image that users see. Without OG tags, platforms scrape content unpredictably, often resulting in unattractive previews. The key OG tags are
og:title, og:description, og:image, and og:url.
Twitter uses its own
twitter:card meta tags to generate rich previews. The two most common card types are "summary" (small square thumbnail) and "summary_large_image" (full-width banner). If Twitter tags are missing, Twitter falls back to Open Graph tags, so having both ensures maximum compatibility across all platforms.
CDN links (like jsDelivr or cdnjs) offer faster global delivery, browser caching benefits (users may already have popular libraries cached), and simpler setup — ideal for small to medium projects. Local files give you full control, offline availability, and avoid third-party dependency risks — better for enterprise apps or environments with strict security policies. For most websites, trusted CDNs are the pragmatic choice.
Keep your meta description between 150–160 characters, include your primary keyword naturally, write compelling copy that entices clicks (think of it as ad copy), and make each page's description unique. While meta descriptions don't directly affect rankings, they significantly influence click-through rates (CTR), which is a key SEO signal.
The viewport meta tag (
width=device-width, initial-scale=1.0) tells mobile browsers to render your page at the device's actual width rather than a default desktop width (often 980px). Without it, your responsive design won't work correctly on mobile, and Google's mobile-first indexing may penalize your rankings. It's essential for every modern website.
Traditionally, scripts go just before
</body> to avoid blocking page rendering. However, modern best practice allows scripts in the <head> if you use defer (executes after HTML parsing, preserves order) or async (executes as soon as downloaded, order not guaranteed). This tool lets you add scripts with appropriate attributes for optimal loading.
For full browser coverage, include: a favicon.ico (16×16, for legacy support), a PNG icon (32×32, for modern browsers), and an Apple Touch Icon (180×180, for iOS home screen bookmarks). You should also consider a
site.webmanifest for Progressive Web App support and a theme-color meta tag for browser UI theming on mobile.
' + msg + '
');
$('body').append(toast);
setTimeout(function() { toast.remove(); }, 2000);
}
// Event Bindings
$('#hgs-tool').on('input change', 'input, textarea, select', function() {
updatePreview();
});
$('#hgs-include-manifest').on('change', function() {
if ($(this).is(':checked')) {
$('#hgs-manifest-url-wrap').removeClass('d-none');
} else {
$('#hgs-manifest-url-wrap').addClass('d-none');
}
updatePreview();
});
// Preset buttons
$('.preset-btn[data-preset]').on('click', function() {
var presetName = $(this).data('preset');
applyPreset(presetName);
showToast('Preset applied: ' + $(this).text().trim());
});
// CSS presets
$(document).on('click', '.chip-preset[data-css-preset]', function() {
var key = $(this).data('css-preset');
var url = cssPresetURLs[key];
if (!url) return;
// Check for duplicates
var exists = false;
$('#hgs-css-list .css-url-input').each(function() {
if ($(this).val().trim() === url) exists = true;
});
if (!exists) {
addCSSEntry(url);
updatePreview();
showToast('Added: ' + $(this).text().trim());
} else {
showToast('Already in the list');
}
});
// JS presets
$(document).on('click', '.chip-preset[data-js-preset]', function() {
var key = $(this).data('js-preset');
var url = jsPresetURLs[key];
if (!url) return;
var exists = false;
$('#hgs-js-list .js-url-input').each(function() {
if ($(this).val().trim() === url) exists = true;
});
if (!exists) {
addJSEntry(url);
updatePreview();
showToast('Added: ' + $(this).text().trim());
} else {
showToast('Already in the list');
}
});
// Add custom CSS
$('#hgs-add-css').on('click', function() {
addCSSEntry('');
updatePreview();
var newInput = $('#hgs-css-list .css-url-input').last();
newInput.focus();
});
// Add custom JS
$('#hgs-add-js').on('click', function() {
addJSEntry('');
updatePreview();
var newInput = $('#hgs-js-list .js-url-input').last();
newInput.focus();
});
// Google Fonts
$('#hgs-add-google-font').on('click', function() {
var fontName = $('#hgs-google-font').val().trim();
if (!fontName) {
showToast('Please enter a font name');
return;
}
var formatted = fontName.replace(/\s+/g, '+');
var url = 'https://fonts.googleapis.com/css2?family=' + formatted + ':wght@400;500;700&display=swap';
var exists = false;
$('#hgs-css-list .css-url-input').each(function() {
if ($(this).val().trim() === url) exists = true;
});
if (!exists) {
addCSSEntry(url);
updatePreview();
showToast('Google Font added: ' + fontName);
$('#hgs-google-font').val('');
} else {
showToast('Font already in the list');
}
});
$('#hgs-google-font').on('keypress', function(e) {
if (e.which === 13) {
$('#hgs-add-google-font').click();
}
});
// Copy button
$('#hgs-copy-btn').on('click', function() {
var snippet = generateHeadSnippet();
if (navigator.clipboard) {
navigator.clipboard.writeText(snippet).then(function() {
showToast('Copied to clipboard!');
}).catch(function() {
fallbackCopy(snippet);
});
} else {
fallbackCopy(snippet);
}
});
function fallbackCopy(text) {
var ta = document.createElement('textarea');
ta.value = text;
ta.style.position = 'fixed';
ta.style.left = '-9999px';
ta.style.top = '-9999px';
document.body.appendChild(ta);
ta.focus();
ta.select();
try {
document.execCommand('copy');
showToast('Copied to clipboard!');
} catch (e) {
showToast('Copy failed. Please select and copy manually.');
}
document.body.removeChild(ta);
}
// Download button
$('#hgs-download-btn').on('click', function() {
var snippet = generateHeadSnippet();
var lang = $('#hgs-lang').val() || 'en';
var fullHTML = '\n\n' + snippet + '\n\n \n\n';
var blob = new Blob([fullHTML], { type: 'text/html' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'index.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showToast('Downloaded as index.html');
});
// Reset all
$('#hgs-reset-all').on('click', function() {
applyPreset('basic');
$('#hgs-css-list').empty();
$('#hgs-js-list').empty();
$('#hgs-google-font').val('');
updatePreview();
showToast('Reset to defaults');
});
// Initial setup
applyPreset('basic');
updatePreview();
});
HTML Meta Inspector - Online View All Page Meta
Paste a URL and extract all meta tags, Open Graph, Twitter Cards, and JSON‑LD. View in a friendly table. Client‑side fetch.
Lazy Loading Image Snippet Generator - Online
Generate an <img> tag with the loading='lazy' attribute and optional low‑quality placeholder. Improve Core Web Vitals. Copy the snippet.
Social Post Previewer - Online See Link on Facebook, LinkedIn, Twitter
Enter a URL and see a simulated preview of how the link will appear on major social platforms. Check tags.
Sitemap Splitter - Online Break Large Sitemaps
Break a large XML sitemap into smaller ones under the 50MB/50,000 URL limit. Generates a sitemap index.
Event Schema Markup Generator - Online JSON‑LD for Concerts
Build a complete Event structured data with performer, location, and dates. Get Google‑ready JSON‑LD for tickets.
Twitter Card Previewer - Online See How Tweets Render
Enter a URL and fetch its Twitter card meta tags. See a live preview of how the tweet will appear. Debug social sharing.
Meta Tag Length Checker - Online Title & Description Pixel Width
See how your title and meta description will be truncated in Google SERP by pixel width. Optimize click‑through.
Local Business Schema Generator - Online JSON‑LD for SEO
Generate a LocalBusiness structured data snippet with name, address, phone, and opening hours. Boost local SEO.
Breadcrumb Structured Data Generator - Online JSON‑LD
Create a breadcrumb schema for your website. Fill in the pages and get the ready‑to‑paste JSON‑LD snippet for rich results.
Robots.txt Tester - Online Check URL Allow/Disallow
Enter a URL and a user‑agent to see if it is allowed or blocked by the robots.txt file. Quick bot validation.
Heading Structure Visualizer - Online Document Outline Check
Paste an URL or HTML and see the h1‑h6 hierarchy as a tree. Detect skipped levels and improve accessibility. Client‑side.
Keyword Extractor - Online Rapid Text Analysis
Paste any article and get a list of the most relevant keywords using a simple TF‑IDF‑like model. Skip stop words. All local.
Word Density Counter - Online SEO & Content Analysis
Paste your article and see a table of the most frequent words with their density percentages. Help avoid keyword stuffing. Local.
HTML Headings Outline Generator - Online From Webpage
Enter a URL and see a nested list of all headings (h1‑h6). Check your document structure for SEO and accessibility. Pure fetch.
Meta Viewport Generator - Online Responsive Tag Builder
Build a proper <meta name='viewport'> tag with width, initial‑scale, and user‑scalable options. Avoid common mobile rendering issues.
Live Website Audit Checker - Online Quick SEO & Performance
Enter a URL and get a one‑page report of titles, description, headings, image alts, and broken links. All from browser.
HTML Outline Extractor - Online Heading Map from URL
Enter a URL and see a nested list of all h1‑h6 tags. Check document structure for SEO and accessibility.
Favicon Checker - Online Test Any Site's Icon
Enter a URL and see its favicon at all standard sizes. Check if it's properly defined. SEO basic check.
HTTP Redirect Path Tracer - Online SEO Chain Analyzer
Trace the full redirect path of a URL. See every hop, status code, and final destination. Detect broken chains.
Robots.txt Validator - Online Check Syntax & Rules
Paste a robots.txt file and validate its syntax. See if a specific user‑agent can access a path. Essential for webmasters.
Advanced Slug Generator - Online Custom Separator & Language
Convert title to URL slug with options: ignore stop words, transliterate special characters, choose separator. SEO friendly.
Meta Tag Extractor - Online View Any Page's SEO Tags
Fetch and extract all meta tags, open graph tags, and Twitter cards from a live URL. No server proxy, direct browser fetch.
SEO Friendly URL Rewriter - Online Slug Optimizer
Convert messy URLs into clean, keyword-rich slugs. Remove stop words, replace spaces with hyphens. Lowercase transformation. All local.
Redirect Path Tracer - Online SEO Redirect Chain Analyzer
Enter a URL and trace the full redirect chain, seeing each hop's status code and location. Identify unnecessary redirects. Client-side fetch.
Title Tag Optimizer - Online SEO Title Preview & Pixel Width
Preview how your page title will appear in Google SERPs. See pixel width and character count. Avoid truncation. Free local tool for SEOs.
Keyword Density Checker - Online SEO Text Analyzer
Analyze text for keyword frequency and density. Highlights over-optimized terms. Perfect for content writers and SEO editors. Entirely browser-based.
Robots.txt Generator - Online Create & Validate Robots File
Build a properly formatted robots.txt file with user-agent rules and sitemap location. Validate syntax in real time. Essential for webmasters.
XML Sitemap Generator - Online Free Website Sitemap Builder
Generate a standard XML sitemap for your website by entering a start URL. Crawls internal links directly from your browser. No server-side processing.
Add Line Numbers - Online Number Text Lines Tool
Number each line of your text sequentially. Customize start number and format. Useful for code snippets, tutorials, and document review. Private operation.