Skip to main content

Lobi

Open Graph & share cards

One 1200x630 Blade template behind every shared link, plus the head block that points a scraper at it. The card is Blade rather than a static image so it re-themes with the brand and stays correct in Arabic; M7 renders it headlessly to a PNG per product, store, category and page.

Email templates Print templates Styleguide

Share card

1200 × 630 · PNG

Lobi

Product

Harness leather tote bag

Nour Atelier

$189.00 $249.00 4.8 (214) In stock

lobi.example

Lobi

منتج

حقيبة يد من الجلد الطبيعي

أتيليه نور

189.00 $ 249.00 $ 4.8 (214) متوفّر

lobi.example

In a feed

A large-image card, roughly as a social app composes it from the tags below.

Lobi

Product

Harness leather tote bag

Nour Atelier

$189.00 $249.00 4.8 (214) In stock

lobi.example

lobi.example

Harness leather tote bag — Nour Atelier

Full-grain leather, hand-stitched handles, lined interior with a laptop sleeve.

Lobi

منتج

حقيبة يد من الجلد الطبيعي

أتيليه نور

189.00 $ 249.00 $ 4.8 (214) متوفّر

lobi.example

lobi.example

حقيبة يد من الجلد الطبيعي — أتيليه نور

جلد كامل الحبيبات، مقابض مخيطة يدويًا، وبطانة داخلية بجيب للحاسوب.

Head block

Rendered by the x-ui.social-meta component, exactly as this variant would emit it. 

<link rel="canonical" href="https://lobi.example/en/p/harness-leather-tote">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="product">
<meta property="og:url" content="https://lobi.example/en/p/harness-leather-tote">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="Harness leather tote bag — Nour Atelier">
<meta property="og:description" content="Full-grain leather, hand-stitched handles, lined interior with a laptop sleeve.">
<meta property="og:image" content="https://lobi.example/og/product/harness-leather-tote-en.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Harness leather tote bag">
<meta property="product:price:amount" content="189.00">
<meta property="product:price:currency" content="USD">
<meta property="product:availability" content="in stock">
<meta property="product:brand" content="Nour Atelier">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Harness leather tote bag — Nour Atelier">
<meta name="twitter:description" content="Full-grain leather, hand-stitched handles, lined interior with a laptop sleeve.">
<meta name="twitter:image" content="https://lobi.example/og/product/harness-leather-tote-en.png">
<meta name="twitter:image:alt" content="Harness leather tote bag">
<link rel="canonical" href="https://lobi.example/ar/p/harness-leather-tote">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="product">
<meta property="og:url" content="https://lobi.example/ar/p/harness-leather-tote">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="حقيبة يد �
ن الجلد الطبيعي — أتيليه نور">
<meta property="og:description" content="جلد كا�
ل الحبيبات، �
قابض �
خيطة يدويًا، وبطانة داخلية بجيب للحاسوب.">
<meta property="og:image" content="https://lobi.example/og/product/harness-leather-tote-ar.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="حقيبة يد �
ن الجلد الطبيعي">
<meta property="product:price:amount" content="189.00">
<meta property="product:price:currency" content="USD">
<meta property="product:availability" content="in stock">
<meta property="product:brand" content="أتيليه نور">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="حقيبة يد �
ن الجلد الطبيعي — أتيليه نور">
<meta name="twitter:description" content="جلد كا�
ل الحبيبات، �
قابض �
خيطة يدويًا، وبطانة داخلية بجيب للحاسوب.">
<meta name="twitter:image" content="https://lobi.example/og/product/harness-leather-tote-ar.png">
<meta name="twitter:image:alt" content="حقيبة يد �
ن الجلد الطبيعي">

Share card

1200 × 630 · PNG

Lobi

Store

Nour Atelier

Handmade leather goods, cut and stitched in small batches.

4.8 (412) Amman, Jordan 64 products

lobi.example

Lobi

متجر

أتيليه نور

منتجات جلدية مصنوعة يدويًا بكميات محدودة.

4.8 (412) عمّان، الأردن 64 منتج

lobi.example

In a feed

A large-image card, roughly as a social app composes it from the tags below.

Lobi

Store

Nour Atelier

Handmade leather goods, cut and stitched in small batches.

4.8 (412) Amman, Jordan 64 products

lobi.example

lobi.example

Nour Atelier — Lobi

Handmade leather goods, cut and stitched in small batches.

Lobi

متجر

أتيليه نور

منتجات جلدية مصنوعة يدويًا بكميات محدودة.

4.8 (412) عمّان، الأردن 64 منتج

lobi.example

lobi.example

أتيليه نور — Lobi

منتجات جلدية مصنوعة يدويًا بكميات محدودة.

Head block

Rendered by the x-ui.social-meta component, exactly as this variant would emit it. 

<link rel="canonical" href="https://lobi.example/en/store/nour-atelier">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="profile">
<meta property="og:url" content="https://lobi.example/en/store/nour-atelier">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="Nour Atelier — Lobi">
<meta property="og:description" content="Handmade leather goods, cut and stitched in small batches.">
<meta property="og:image" content="https://lobi.example/og/vendor/nour-atelier-en.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Nour Atelier">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Nour Atelier — Lobi">
<meta name="twitter:description" content="Handmade leather goods, cut and stitched in small batches.">
<meta name="twitter:image" content="https://lobi.example/og/vendor/nour-atelier-en.png">
<meta name="twitter:image:alt" content="Nour Atelier">
<link rel="canonical" href="https://lobi.example/ar/store/nour-atelier">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="profile">
<meta property="og:url" content="https://lobi.example/ar/store/nour-atelier">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="أتيليه نور — Lobi">
<meta property="og:description" content="�
نتجات جلدية �
صنوعة يدويًا بك�
يات �
حدودة.">
<meta property="og:image" content="https://lobi.example/og/vendor/nour-atelier-ar.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="أتيليه نور">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="أتيليه نور — Lobi">
<meta name="twitter:description" content="�
نتجات جلدية �
صنوعة يدويًا بك�
يات �
حدودة.">
<meta name="twitter:image" content="https://lobi.example/og/vendor/nour-atelier-ar.png">
<meta name="twitter:image:alt" content="أتيليه نور">

Share card

1200 × 630 · PNG

Lobi

Category

Electronics

Shop this category across every store on Lobi.

1,284 products

lobi.example

Lobi

تصنيف

إلكترونيات

تسوّق هذا التصنيف من كل متاجر لوبي.

1,284 منتج

lobi.example

In a feed

A large-image card, roughly as a social app composes it from the tags below.

Lobi

Category

Electronics

Shop this category across every store on Lobi.

1,284 products

lobi.example

lobi.example

Electronics — Lobi

Browse 1,284 products from independent stores.

Lobi

تصنيف

إلكترونيات

تسوّق هذا التصنيف من كل متاجر لوبي.

1,284 منتج

lobi.example

lobi.example

إلكترونيات — Lobi

تصفّح 1,284 منتجًا من متاجر مستقلة.

Head block

Rendered by the x-ui.social-meta component, exactly as this variant would emit it. 

<link rel="canonical" href="https://lobi.example/en/c/electronics">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="website">
<meta property="og:url" content="https://lobi.example/en/c/electronics">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="Electronics — Lobi">
<meta property="og:description" content="Browse 1,284 products from independent stores.">
<meta property="og:image" content="https://lobi.example/og/category/electronics-en.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Electronics">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Electronics — Lobi">
<meta name="twitter:description" content="Browse 1,284 products from independent stores.">
<meta name="twitter:image" content="https://lobi.example/og/category/electronics-en.png">
<meta name="twitter:image:alt" content="Electronics">
<link rel="canonical" href="https://lobi.example/ar/c/electronics">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="website">
<meta property="og:url" content="https://lobi.example/ar/c/electronics">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="إلكترونيات — Lobi">
<meta property="og:description" content="تصفّح 1,284 �
نتجًا �
ن �
تاجر �
ستقلة.">
<meta property="og:image" content="https://lobi.example/og/category/electronics-ar.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="إلكترونيات">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="إلكترونيات — Lobi">
<meta name="twitter:description" content="تصفّح 1,284 �
نتجًا �
ن �
تاجر �
ستقلة.">
<meta name="twitter:image" content="https://lobi.example/og/category/electronics-ar.png">
<meta name="twitter:image:alt" content="إلكترونيات">

Share card

1200 × 630 · PNG

Lobi

Read

Shipping policy

How delivery windows, carriers and costs work when your order spans several vendors.

Tarek Younes

lobi.example

Lobi

مقال

سياسة الشحن

كيف تُحسب مواعيد التوصيل وشركات الشحن وتكاليفها عندما يضم طلبك أكثر من متجر.

طارق يونس

lobi.example

In a feed

A large-image card, roughly as a social app composes it from the tags below.

Lobi

Read

Shipping policy

How delivery windows, carriers and costs work when your order spans several vendors.

Tarek Younes

lobi.example

lobi.example

Shipping policy

How delivery windows, carriers and costs work when your order spans several vendors.

Lobi

مقال

سياسة الشحن

كيف تُحسب مواعيد التوصيل وشركات الشحن وتكاليفها عندما يضم طلبك أكثر من متجر.

طارق يونس

lobi.example

lobi.example

سياسة الشحن

كيف تُحسب مواعيد التوصيل وشركات الشحن وتكاليفها عندما يضم طلبك أكثر من متجر.

Head block

Rendered by the x-ui.social-meta component, exactly as this variant would emit it. 

<link rel="canonical" href="https://lobi.example/en/shipping-policy">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="article">
<meta property="og:url" content="https://lobi.example/en/shipping-policy">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="Shipping policy">
<meta property="og:description" content="How delivery windows, carriers and costs work when your order spans several vendors.">
<meta property="og:image" content="https://lobi.example/og/page/shipping-policy-en.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Shipping policy">
<meta property="article:published_time" content="2026-08-02T09:30:00+03:00">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Shipping policy">
<meta name="twitter:description" content="How delivery windows, carriers and costs work when your order spans several vendors.">
<meta name="twitter:image" content="https://lobi.example/og/page/shipping-policy-en.png">
<meta name="twitter:image:alt" content="Shipping policy">
<link rel="canonical" href="https://lobi.example/ar/shipping-policy">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="article">
<meta property="og:url" content="https://lobi.example/ar/shipping-policy">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="سياسة الشحن">
<meta property="og:description" content="كيف تُحسب �
واعيد التوصيل وشركات الشحن وتكاليفها عند�
ا يض�
طلبك أكثر �
ن �
تجر.">
<meta property="og:image" content="https://lobi.example/og/page/shipping-policy-ar.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="سياسة الشحن">
<meta property="article:published_time" content="2026-08-02T09:30:00+03:00">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="سياسة الشحن">
<meta name="twitter:description" content="كيف تُحسب �
واعيد التوصيل وشركات الشحن وتكاليفها عند�
ا يض�
طلبك أكثر �
ن �
تجر.">
<meta name="twitter:image" content="https://lobi.example/og/page/shipping-policy-ar.png">
<meta name="twitter:image:alt" content="سياسة الشحن">

Share card

1200 × 630 · PNG

Lobi

Marketplace

A marketplace of many stores

Independent makers and small vendors, one checkout.

lobi.example

Lobi

سوق إلكتروني

سوق يجمع متاجر عديدة

حرفيّون مستقلّون ومتاجر صغيرة، وعملية دفع واحدة.

lobi.example

In a feed

A large-image card, roughly as a social app composes it from the tags below.

Lobi

Marketplace

A marketplace of many stores

Independent makers and small vendors, one checkout.

lobi.example

lobi.example

Lobi — A marketplace of many stores

Independent makers and small vendors, one checkout.

Lobi

سوق إلكتروني

سوق يجمع متاجر عديدة

حرفيّون مستقلّون ومتاجر صغيرة، وعملية دفع واحدة.

lobi.example

lobi.example

Lobi — سوق يجمع متاجر عديدة

حرفيّون مستقلّون ومتاجر صغيرة، وعملية دفع واحدة.

Head block

Rendered by the x-ui.social-meta component, exactly as this variant would emit it. 

<link rel="canonical" href="https://lobi.example/en">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="website">
<meta property="og:url" content="https://lobi.example/en">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="Lobi — A marketplace of many stores">
<meta property="og:description" content="Independent makers and small vendors, one checkout.">
<meta property="og:image" content="https://lobi.example/og/default-en.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Lobi">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Lobi — A marketplace of many stores">
<meta name="twitter:description" content="Independent makers and small vendors, one checkout.">
<meta name="twitter:image" content="https://lobi.example/og/default-en.png">
<meta name="twitter:image:alt" content="Lobi">
<link rel="canonical" href="https://lobi.example/ar">
<link rel="alternate" hreflang="en" href="https://lobi-shop.jolife.dev/en/shared/social">
<link rel="alternate" hreflang="ar" href="https://lobi-shop.jolife.dev/ar/shared/social">
<link rel="alternate" hreflang="x-default" href="https://lobi-shop.jolife.dev/en/shared/social">
<meta property="og:site_name" content="Lobi">
<meta property="og:type" content="website">
<meta property="og:url" content="https://lobi.example/ar">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_AR">
<meta property="og:title" content="Lobi — سوق يج�
ع �
تاجر عديدة">
<meta property="og:description" content="حرفيّون �
ستقلّون و�
تاجر صغيرة، وع�
لية دفع واحدة.">
<meta property="og:image" content="https://lobi.example/og/default-ar.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Lobi">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Lobi — سوق يج�
ع �
تاجر عديدة">
<meta name="twitter:description" content="حرفيّون �
ستقلّون و�
تاجر صغيرة، وع�
لية دفع واحدة.">
<meta name="twitter:image" content="https://lobi.example/og/default-ar.png">
<meta name="twitter:image:alt" content="Lobi">

Using it on a screen

Every shareable screen pushes the component into the head stack. Locale alternates and the canonical URL come from the current route, so nothing has to be repeated per screen. 

@push('head')
    <x-ui.social-meta
        type="product"
        :title="$product->title.' — '.$product->vendor->name"
        :description="$product->excerpt"
        :image="$product->shareCardUrl()"
        :image-alt="$product->title"
        :url="route('product.show', $product)"
        :price="$product->price_minor"
        :currency="$product->currency"
        availability="in stock"
        :brand="$product->vendor->name"
    />
@endpush

Rules this template follows

Size
1200 × 630 (1.91:1) — the one size every network accepts. Under 300 KB as PNG.
Safe area
Nothing essential in the outer 64px — feeds crop to a square on some surfaces.
Absolute URLs
og:image must be an absolute URL on a public host. A relative path or a localhost URL is dropped silently.
One card per locale
The Arabic card is not the English one mirrored — it is rendered from Arabic content, in the Arabic face, with no letter-spacing.
Fixed palette
The card renders under data-theme='light' whatever the viewer's theme — a share image must not follow a dark-mode preference.

Locale

English العربية

Theme

Design index