بطاقات المشاركة وOpen Graph

بطاقة المشاركة

1200 × 630 · PNG

لوبي

Product

Harness leather tote bag

Nour Atelier

$189.00 $249.00 4.8 (214) In stock

lobi.example

لوبي

منتج

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

أتيليه نور

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

lobi.example

داخل التطبيقات

بطاقة بصورة كبيرة، كما تُركّبها التطبيقات تقريبًا من الوسوم أدناه.

لوبي

Product

Harness leather tote bag

Nour Atelier

$189.00 $249.00 4.8 (214) In stock

lobi.example

Harness leather tote bag — Nour Atelier

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

لوبي

منتج

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

أتيليه نور

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

lobi.example

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

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

وسوم الرأس

ناتج المكوّن x-ui.social-meta كما يُصدره هذا النوع تمامًا.

<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="لوبي">
<meta property="og:type" content="product">
<meta property="og:url" content="https://lobi.example/en/p/harness-leather-tote">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<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="لوبي">
<meta property="og:type" content="product">
<meta property="og:url" content="https://lobi.example/ar/p/harness-leather-tote">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<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="حقيبة يد �
ن الجلد الطبيعي">

بطاقة المشاركة

1200 × 630 · PNG

لوبي

Store

Nour Atelier

Handmade leather goods, cut and stitched in small batches.

4.8 (412) Amman, Jordan 64 products

lobi.example

لوبي

متجر

أتيليه نور

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

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

lobi.example

داخل التطبيقات

بطاقة بصورة كبيرة، كما تُركّبها التطبيقات تقريبًا من الوسوم أدناه.

لوبي

Store

Nour Atelier

Handmade leather goods, cut and stitched in small batches.

4.8 (412) Amman, Jordan 64 products

lobi.example

Nour Atelier — لوبي

Handmade leather goods, cut and stitched in small batches.

لوبي

متجر

أتيليه نور

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

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

lobi.example

أتيليه نور — لوبي

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

وسوم الرأس

ناتج المكوّن x-ui.social-meta كما يُصدره هذا النوع تمامًا.

<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="لوبي">
<meta property="og:type" content="profile">
<meta property="og:url" content="https://lobi.example/en/store/nour-atelier">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:title" content="Nour Atelier — لوبي">
<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 — لوبي">
<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="لوبي">
<meta property="og:type" content="profile">
<meta property="og:url" content="https://lobi.example/ar/store/nour-atelier">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:title" content="أتيليه نور — لوبي">
<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="أتيليه نور — لوبي">
<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="أتيليه نور">

بطاقة المشاركة

1200 × 630 · PNG

لوبي

Electronics

Shop this category across every store on Lobi.

1,284 products

lobi.example

لوبي

تصنيف

إلكترونيات

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

1,284 منتج

lobi.example

داخل التطبيقات

بطاقة بصورة كبيرة، كما تُركّبها التطبيقات تقريبًا من الوسوم أدناه.

لوبي

Electronics

Shop this category across every store on Lobi.

1,284 products

lobi.example

Electronics — لوبي

Browse 1,284 products from independent stores.

لوبي

تصنيف

إلكترونيات

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

1,284 منتج

lobi.example

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

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

وسوم الرأس

ناتج المكوّن x-ui.social-meta كما يُصدره هذا النوع تمامًا.

<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="لوبي">
<meta property="og:type" content="website">
<meta property="og:url" content="https://lobi.example/en/c/electronics">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:title" content="Electronics — لوبي">
<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 — لوبي">
<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="لوبي">
<meta property="og:type" content="website">
<meta property="og:url" content="https://lobi.example/ar/c/electronics">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:title" content="إلكترونيات — لوبي">
<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="إلكترونيات — لوبي">
<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="إلكترونيات">

بطاقة المشاركة

1200 × 630 · PNG

لوبي

Read

Shipping policy

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

Tarek Younes

lobi.example

لوبي

مقال

سياسة الشحن

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

طارق يونس

lobi.example

داخل التطبيقات

بطاقة بصورة كبيرة، كما تُركّبها التطبيقات تقريبًا من الوسوم أدناه.

لوبي

Read

Shipping policy

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

Tarek Younes

lobi.example

Shipping policy

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

لوبي

مقال

سياسة الشحن

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

طارق يونس

lobi.example

سياسة الشحن

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

وسوم الرأس

ناتج المكوّن x-ui.social-meta كما يُصدره هذا النوع تمامًا.

<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="لوبي">
<meta property="og:type" content="article">
<meta property="og:url" content="https://lobi.example/en/shipping-policy">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<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="لوبي">
<meta property="og:type" content="article">
<meta property="og:url" content="https://lobi.example/ar/shipping-policy">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<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="سياسة الشحن">

بطاقة المشاركة

1200 × 630 · PNG

لوبي

Marketplace

A marketplace of many stores

Independent makers and small vendors, one checkout.

lobi.example

لوبي

سوق إلكتروني

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

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

lobi.example

داخل التطبيقات

بطاقة بصورة كبيرة، كما تُركّبها التطبيقات تقريبًا من الوسوم أدناه.

لوبي

Marketplace

A marketplace of many stores

Independent makers and small vendors, one checkout.

lobi.example

لوبي — A marketplace of many stores

Independent makers and small vendors, one checkout.

لوبي

سوق إلكتروني

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

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

lobi.example

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

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

وسوم الرأس

ناتج المكوّن x-ui.social-meta كما يُصدره هذا النوع تمامًا.

<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="لوبي">
<meta property="og:type" content="website">
<meta property="og:url" content="https://lobi.example/en">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:title" content="لوبي — 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="لوبي">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="لوبي — 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="لوبي">

<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="لوبي">
<meta property="og:type" content="website">
<meta property="og:url" content="https://lobi.example/ar">
<meta property="og:locale" content="ar_AR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:title" content="لوبي — سوق يج�
ع �
تاجر عديدة">
<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="لوبي">
<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/default-ar.png">
<meta name="twitter:image:alt" content="لوبي">

استخدامه في الشاشات

كل شاشة قابلة للمشاركة تدفع المكوّن إلى كتلة الرأس. الروابط البديلة لكل لغة والرابط الأساسي تُشتق من المسار الحالي، فلا حاجة لتكرارها في كل شاشة.

@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

قواعد هذا القالب

المقاس: 1200 × 630 (1.91:1) — المقاس الوحيد الذي تقبله جميع الشبكات. بحجم أقل من 300 كيلوبايت بصيغة PNG.
المساحة الآمنة: لا شيء أساسي في الإطار الخارجي بمقدار 64 بكسل — بعض التطبيقات تقصّ البطاقة إلى مربّع.
روابط مطلقة: يجب أن يكون og:image رابطًا مطلقًا على مضيف عام. الروابط النسبية أو المحلية تُتجاهل دون إشعار.
بطاقة لكل لغة: البطاقة العربية ليست انعكاسًا للإنجليزية — تُبنى من محتوى عربي بخط عربي ودون تباعد بين الحروف.
ألوان ثابتة: تُعرض البطاقة دائمًا بالوضع الفاتح مهما كان وضع العارض — صورة المشاركة لا تتبع تفضيل الوضع الداكن.