simpletool.io Browse tools

Tag: SEO

  • Open Graph Meta Generator: Build OG & Twitter Tags [2026]

    Open Graph Meta Generator: Build OG & Twitter Tags [2026]

    TL;DR: Open Graph (OG) tags are <meta> tags in your HTML <head> that tell Facebook, LinkedIn, X/Twitter, Slack, Discord, and iMessage how to render your link as a preview card. The 4 required tags are og:title, og:description, og:image, and og:url. Our free OG meta generator builds the full tag block plus Twitter Card variants and shows a live preview of how your link will look on every major platform.

    Every link shared in 2026 — on Slack, in a Discord thread, in an iMessage, pinned to a Facebook page, posted on LinkedIn — gets unfurled into a preview card. That card is built from Open Graph meta tags published by Facebook in 2010 and now treated as the de facto standard for the web. Get them right and your link gets a clickable image, branded title, and value-prop description. Get them wrong and your link shows up as a bare URL with no card, often pulling a random image from the page or no image at all.

    Our Open Graph meta generator outputs the full tag block (OG + Twitter Card + iMessage Smart App Banner support), shows a live render in 5 platform preview frames, and validates image dimensions against each platform’s spec. This guide covers every required and optional tag, the image dimensions that actually matter in 2026, and the gotchas that cause perfectly-tagged pages to render with no card at all.

    The 4 required tags and 5 you should always add

    Tag Required? Notes
    og:title Required ≤60 chars (truncated by Facebook on mobile around 65)
    og:description Required 155–200 chars; truncated around 200 on most platforms
    og:image Required 1200×630 PNG/JPG, <5 MB; absolute https URL
    og:url Required Canonical URL — ensures dedupe across platforms
    og:type Recommended website, article, video.movie, profile
    og:site_name Recommended Brand name shown above title on Facebook
    og:image:alt Recommended Alt text for screen readers — accessibility win
    twitter:card Recommended summary_large_image for full-bleed preview
    twitter:site Optional Your @handle for attribution analytics

    Image dimensions that actually render correctly

    Every platform has its own crop box. Use 1200×630 px (1.91:1) as your canonical size — it works everywhere as a “summary large image”. File should be PNG or JPG, under 5 MB. Below 600×315 will render as a thumbnail rather than a full card on Facebook.

    • Facebook / LinkedIn: 1200×630, full-bleed
    • X / Twitter (summary_large_image): 1200×600 minimum, crops to 2:1
    • WhatsApp: minimum 300×200, square crop
    • Slack / Discord: respects original; 1200×630 is safe
    • iMessage: uses og:image, square-crops aggressively — keep important content centred

    Keep critical text (logo, headline) within the centre 1200×450 zone so square crops don’t decapitate it.

    How to generate Open Graph tags for any page

    1. Open the Open Graph generator
    2. Fill in title, description, canonical URL, image URL, and site name
    3. Pick the og:type (most pages: website; blog posts: article)
    4. Watch the live preview update in 5 platform frames
    5. Click Copy meta block — paste into the <head> of your HTML before </head>
    6. Validate with the Facebook Sharing Debugger after publishing

    The exact tag block our generator produces

    For a typical blog post the generator outputs about 14 tags. The structure looks like this (real values substituted from your inputs):

    <meta property="og:title" content="Open Graph Meta Generator [2026]">
<meta property="og:description" content="Generate OG and Twitter Card tags...">
<meta property="og:image" content="https://simpletool.io/og/og-generator.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph generator preview">
<meta property="og:url" content="https://simpletool.io/tools/open-graph-meta-generator/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="simpletool.io">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph Meta Generator [2026]">
<meta name="twitter:description" content="Generate OG and Twitter Card tags...">
<meta name="twitter:image" content="https://simpletool.io/og/og-generator.png">
<meta name="twitter:image:alt" content="Open Graph generator preview">

    Common gotchas

    • Facebook caches your tags for ~30 days. If you change og:image, the old image keeps showing. Force a refresh with the Sharing Debugger by clicking “Scrape Again” — until you do, every share stays stuck on the old card.
    • Relative image URLs silently fail. og:image must be an absolute URL starting with https://. /og/image.png is treated as missing by every parser.
    • Slack and Discord ignore some Twitter tags. Both prefer og: tags first and only fall back to twitter:. Always set both, don’t rely on Twitter-only tags.
    • WebP and AVIF are widely supported now — but Facebook still occasionally renders them as a broken image on iOS Messenger. Use PNG/JPG for the og:image; serve modern formats elsewhere on your page.
    • X/Twitter dropped the twitter:card requirement in 2024 — if you only set OG tags, X auto-detects them. But summary_large_image still controls whether the image renders full-bleed or thumbnail-with-text-beside.
    • Bots may not execute JavaScript. Tags injected after page load (via React/Vue without SSR) are invisible to most scrapers. OG tags must be in the initial HTML response.

    When NOT to use a generator

    If your CMS already produces OG tags (WordPress + Yoast/RankMath, Shopify, Webflow, Next.js with the Metadata API), do not paste a second block on top — duplicate tags cause unpredictable rendering. Instead, edit the values inside your CMS or framework. A generator is for static sites you control by hand, custom landing pages outside your CMS, or one-off pages where you need to override the inherited template.

    Frequently asked questions

    Do I need both Open Graph and Twitter Card tags?

    No, but it is the safest approach. Modern X and most aggregators will fall back to OG tags if Twitter-specific tags are missing. Set both for maximum coverage; the cost is 4 extra meta tags. The most common pattern is full OG + a single twitter:card=summary_large_image declaration.

    Why doesn’t my Facebook preview update after I changed the image?

    Facebook caches your og:image for roughly 30 days. Open the Sharing Debugger, paste your URL, and click Scrape Again. The cache clears immediately and any future shares pick up the new image. LinkedIn has a similar tool at Post Inspector.

    What’s the right size for og:image in 2026?

    1200×630 px (1.91:1 ratio), under 5 MB, PNG or JPG, hosted on https. This works on Facebook, LinkedIn, X (summary_large_image), Slack, Discord, and most aggregators. Keep critical content within the centre 1200×450 zone for platforms that crop to square.

    Can I generate OG tags for a Next.js or React app?

    Yes — but you should use the framework’s built-in metadata API rather than inject tags client-side. Next.js 13+ has generateMetadata in the App Router; Remix has the meta export; Nuxt has useSeoMeta(). Tags injected after JavaScript runs are invisible to most scrapers. Use this generator to compose values, then paste them into the framework’s metadata config.

    Is my data uploaded?

    No. The generator runs in your browser. We never see your title, description, or URL. The preview frames are rendered locally in your browser using the values you typed.

    What does og:type “article” change?

    It unlocks article-specific tags like article:published_time, article:author, article:section, and article:tag. Some platforms (notably Facebook News and Apple News) prioritise content with proper article tags. For a regular landing page, og:type=website is the right choice.

    Related tools and guides

     

  • Character Counter: Live Word & Letter Count [2026]

    Character Counter: Live Word & Letter Count [2026]

    TL;DR: A character counter shows how many characters, words, sentences, and paragraphs are in any text — with live limits for tweets (280), meta descriptions (155), SMS (160), and other constrained writing contexts. Our free character counter updates as you type, highlights when you cross a limit, and runs entirely in your browser.

    Writers, marketers, and students count characters constantly. Tweet limit is 280; meta description is ~155; SMS message before splitting is 160; LinkedIn post for maximum reach is ~1,300; YouTube title is 60. Almost every text-based platform imposes a length constraint that shapes what you can say. A character counter that shows the count live as you type — with the right limits for your context — turns “did I cross the limit?” guesswork into instant feedback.

    Our character counter reports characters (with and without spaces), words, sentences, paragraphs, and reading time. Hit a preset limit and the relevant counter turns red. Useful for the dozen contexts every writer juggles per week. This guide covers the standard length limits, the difference between character and letter counts, and the platform-specific gotchas (Twitter counts URLs as 23 characters; SMS uses GSM-7 vs UCS-2 character sets).

    Standard length limits across platforms

    Platform / Use Limit Notes
    Twitter / X post 280 chars (Twitter Blue: 4,000) URLs count as 23 chars regardless of length
    Meta description ~155 chars Google truncates with “…” in mobile SERP
    Page title (SEO) ~60 chars Google truncates around 600 px width
    SMS (single message) 160 chars (GSM-7) / 70 chars (UCS-2) Emoji or non-Latin chars trigger UCS-2
    LinkedIn post 3,000 chars (1,300 visible before “see more”) Algorithm rewards 1,200-2,000 char range
    Instagram caption 2,200 chars First 125 chars visible before “more”
    Facebook post 63,206 chars (effectively unlimited) First 80-130 chars before “see more”
    YouTube title 100 chars (~60 visible) CTR drops sharply past 60 visible chars
    YouTube description 5,000 chars First 100 chars visible above fold

    Character vs letter vs word — definitions matter

    • Characters (with spaces): every Unicode code point — letters, digits, punctuation, spaces, emoji, line breaks. The most common count for platforms with limits.
    • Characters (without spaces): excludes whitespace. Useful for academic word-count requirements that specify “characters not counting spaces”.
    • Letters: only alphabetic characters. Excludes digits, punctuation, spaces. Rarely a platform limit but useful for puzzle/game word work.
    • Words: sequences of non-whitespace characters separated by spaces. The standard academic and editorial unit.
    • Sentences: text segments ending in . ! ?. Useful for readability scoring (Flesch-Kincaid).
    • Paragraphs: blocks separated by blank lines. The natural editorial unit for long-form writing.

    How to use the browser character counter

    1. Open the character counter
    2. Type or paste text into the input
    3. The counter updates live: characters, words, sentences, paragraphs, reading time
    4. Pick a preset (Tweet 280, Meta 155, SMS 160) — the relevant counter shows progress and turns red when exceeded
    5. Optional: tick “Without spaces” for the alternate character count

    Reading time math

    Reading time is computed at 200-250 words per minute (the average adult reading rate for moderate-difficulty prose). Our counter uses 230 wpm. For technical writing, expect ~150 wpm; for fiction, ~280 wpm. Use the readability count as a planning tool, not a strict promise.

    Common gotchas

    • Twitter URL counting. Twitter counts every URL as 23 characters regardless of actual length. A 50-char URL costs only 23 toward your 280 limit.
    • SMS character set switching. Add one emoji to a 160-char SMS and the entire message switches from GSM-7 (160 chars / segment) to UCS-2 (70 chars / segment). The same text now requires multiple segments and costs more to send.
    • Emoji counted multiple ways. A simple smiley 😀 is 1 character in most counters but 2 UTF-16 code units. Some old systems count emoji as multiple characters.
    • Trailing whitespace. Many platforms trim trailing spaces but count them locally. Pasting “hello ” into Twitter shows as 6 chars but posts as 5.

    Frequently asked questions

    Does the counter count emoji as one or multiple characters?

    One. Modern counters (including ours) use Intl.Segmenter to count emoji as single grapheme clusters, matching how humans perceive them. Twitter, SMS, and Instagram count emoji similarly.

    Why do my Twitter character counts differ?

    Twitter counts URLs as 23 characters. Our counter reports raw character count. For a Twitter-aware count, manually subtract URL lengths and add 23 per URL.

    What’s the right meta description length for SEO?

    150-160 characters. Google truncates around 155 chars on mobile, 158 on desktop. Aim for 155 to leave a small safety buffer.

    How is reading time calculated?

    Word count divided by 230 (the standard average words-per-minute for adult readers). Technical writing reads slower (~150 wpm); fiction reads faster (~280 wpm). Use as a planning tool.

    Is my text uploaded?

    No. The counter runs in your browser via JavaScript. Text and counts stay on your device.

    Can I count characters in code or markdown?

    Yes — the counter treats all text identically regardless of format. For markdown, raw characters include the asterisks and hash marks; rendered word count would differ. The tool reports raw values.

    Related tools and guides

     

  • URL Slug Generator: SEO-Friendly URLs in Seconds [2026]

    URL Slug Generator: SEO-Friendly URLs in Seconds [2026]

    TL;DR: A URL slug generator turns a page title into a clean, lowercase, hyphen-separated URL segment safe for SEO and shareability. “How to Cook Pasta!” becomes “how-to-cook-pasta”. Our free URL slug generator handles Unicode (transliterates accented characters), strips punctuation, collapses whitespace, and limits to 50-60 characters — the sweet spot for SEO.

    The URL slug is the part of a URL after the domain — example.com/this-is-the-slug/. Done well, slugs are shareable, SEO-friendly, and human-readable. Done badly (?p=12345&s=abc), they’re invisible to search engines and confusing to users. Every CMS auto-generates a slug from the post title, but the auto-generated version is often wrong: too long, retains stop words, includes special characters that need URL-encoding.

    Our URL slug generator takes any title and produces a clean slug — lowercase, hyphen-separated, transliterated for non-ASCII characters, with optional length cap. Built for content workflows where you publish multiple times a week and want consistent slugs. This guide explains what makes a good slug, the SEO implications of slug choices, and the gotchas with Unicode languages.

    What makes a good URL slug

    • Lowercase only. URLs are case-sensitive on most servers; mixed-case slugs cause 404s when shared with wrong casing.
    • Hyphens, not underscores. Google treats hyphens as word separators. Underscores are treated as word joiners (my_great_post reads as one token to crawlers).
    • Short — 50-60 characters maximum. Google truncates URLs in SERP after ~75 chars; long slugs look spammy and don’t fit in mobile snippets.
    • Stop words removed. “The”, “a”, “an”, “of”, “is” rarely add meaning to a slug. how-to-cook-pasta beats how-to-cook-the-best-pasta-of-your-life.
    • Keyword-front-loaded. Put the primary keyword first. nyc-best-pizza reads better than guide-to-the-best-pizza-in-nyc.
    • No punctuation, no spaces, no Unicode. Apostrophes, exclamation marks, accents, emojis — strip them all. They survive in modern browsers but break older ones, email links, and pasted URLs.

    How URL slugs affect SEO

    Slugs are a relatively minor ranking factor — Google has said as much in public communications — but they affect three signals that compound over time:

    • Click-through rate. Users see slugs in search results. example.com/best-running-shoes-2026 reads more relevant than example.com/post?id=12345. Clearer slugs win clicks.
    • Backlink anchor text. When other sites link to you, many use the URL itself as the anchor. A keyword-rich slug becomes free anchor text.
    • Social share previews. Twitter, Slack, and LinkedIn show URLs prominently. Clean slugs look more professional in shares.

    How to use the browser slug generator

    1. Open the URL slug generator
    2. Paste your post title or any text into the input
    3. The slug appears live as you type
    4. Toggle “Strip stop words” (the/a/an/of/etc. removed)
    5. Set max length (50-60 is the SEO sweet spot)
    6. Toggle “Transliterate Unicode” — converts café to cafe, 北京 to bei-jing, etc.
    7. Click Copy

    Slug generation in code

    // JavaScript (slug-friendly approach)
function slugify(text) {
  return text
    .toLowerCase()
    .normalize("NFKD")            // decompose accents
    .replace(/[̀-ͯ]/g, "") // remove diacritics
    .replace(/[^a-z0-9\s-]/g, "")    // strip punctuation
    .trim()
    .replace(/\s+/g, "-")            // spaces to hyphens
    .replace(/-+/g, "-")             // collapse multiple hyphens
    .slice(0, 60);                   // length cap
}

slugify("Café Owners Guide!");  // "cafe-owners-guide"

// Python (python-slugify package)
from slugify import slugify
slugify("Café Owners Guide!")    # "cafe-owners-guide"

// Node (slugify package — handles 50+ languages)
import slugify from "slugify";
slugify("北京", { lower: true });  // "bei-jing"

// PHP (WordPress's built-in)
$slug = sanitize_title("Café Owners Guide!");

    Common slug mistakes

    • Including dates. /2024/05/best-tools/ looks dated by the next year. Either embrace it (news sites do) or omit dates and use evergreen slugs.
    • Including IDs. /post-12345-best-tools/ is the worst of both worlds — adds noise without semantic value.
    • Changing slugs after publishing. Existing inbound links break unless you set up 301 redirects. Pick the slug carefully on first publish.
    • Stuffing keywords. /best-cheap-affordable-budget-running-shoes/ reads as keyword-stuffed and Google may penalise.
    • Forgetting trailing slashes. Pick /posts/foo/ or /posts/foo as your canonical form and stick to it. Inconsistent trailing slashes confuse crawlers and cause duplicate-content issues.

    Frequently asked questions

    Should I include the year in my URL slug?

    Only if the content is genuinely time-bound (news, annual rankings, year-specific reviews). For evergreen content (how-to guides, tutorials), omit dates so the slug remains relevant. If you do include a year, plan to update or redirect the URL when the year changes.

    How long should a URL slug be?

    50-60 characters is the SEO sweet spot. Long enough to include keywords; short enough to display in mobile search snippets without truncation. 75+ characters get truncated in Google SERP.

    Should I remove stop words from my slug?

    Generally yes — they add length without adding meaning. how-to-cook-pasta beats how-to-cook-the-best-pasta-of-your-life. Exception: when removing the stop word changes meaning (rare). The tool’s “Strip stop words” toggle lets you choose per-slug.

    What if my title contains non-English characters?

    Three options: (1) transliterate to ASCII (café → cafe) — safest for global audiences; (2) keep Unicode in the URL with proper encoding (modern browsers handle this fine, but tools, CRMs, and email clients sometimes don’t); (3) use a localised slug system per language. The tool defaults to transliteration for ASCII safety.

    Can I change a slug after publishing?

    Yes, but you must set up a 301 redirect from the old URL to the new one to preserve incoming links and SEO value. Without redirects, all existing backlinks break and the page loses its accumulated ranking signal. WordPress and most CMSes have plugins to manage redirects automatically when slugs change.

    Is the slug data sent anywhere?

    No. The slug is generated in your browser using JavaScript string manipulation. The text you paste, the generated slug, and any settings stay on your device.

    Related tools and guides