Cookbook

    Metadata guide for submitting web apps.

    When submitting a web app to Urabin, we auto-generate the web app card data using metadata from the submitted URL.

    Favicon (Logo/Icon)

    Appears as the icon on the left of the web app title in the card.

    • Use .ico, .png, or .svg
    • Recommended size: 32×32 or 48×48 pixels
    • Linked in HTML head:
      <link rel="icon" href="/favicon.ico" />
    • Should be publicly accessible from the root or specified path

    OG Image (Thumbnail)

    Displays as the main image of the card (like a banner/thumbnail).

    • Tag format:
      <meta property="og:image" content="https://example.com/image.jpg" />
    • Recommended size: 1200×630px (aspect ratio ~1.91:1)
    • Use JPG or PNG (avoid WebP for broader compatibility)
    • Ensure image is publicly accessible and served over HTTPS

    Title & Description

    Pulled from your site's metadata and used in the card.

    • Set in:
      <title>Your App Name</title><meta name="description" content="Short description of your app." />
    • Title: Keep it under 60 characters
    • Description: 150–160 characters

    Metadata Validation Flow

    Here's what happens when you click Validate on the submit page:

    1. Submitted URL gets authenticated & authorized
    2. Fetches the title, description, favicon, and og:image
    3. If the metadata is missing or the site is inaccessible, validation fails

    Important Notes:

    • Site must be publicly accessible
    • Metadata should be present in the initial HTML (not rendered via JS after load)

    Quick Reference

    FieldTagRecommendedNotes
    Favicon<link rel="icon">32×32pxRequired
    OG Image<meta property="og:image">1200×630pxNo WebP
    Title<title>≤ 60 charsShort & clear
    Description<meta name="description">150–160 charsNo filler