Megosztási képek (Open Graph)

Amikor valaki megoszt egy boltra mutató linket, a közösségi oldal vagy üzenetküldő egy előnézeti kártyát jelenít meg: egy címet, egy leírást és egy képet. Ez a kép az oldal megosztási képe (og:image). A platform minden oldalhoz létrehoz egyet egy TSX-template-ből, kitölti az oldal saját adataival (a termék nevével és árával, a bejegyzés címével, a bolt logójával), és 1200×630-as JPEG formátumban szolgálja ki a bolt saját domainjéről.

A Facebook, a LinkedIn, a WhatsApp, az X, a Slack, a Discord, a Telegram és az iMessage mind ugyanezt a képet olvassa be.

A megosztási képen ketten dolgoznak, mindegyikük a saját felületén:

Egy témához nem kötelező sablont készíteni. Ha egy oldaltípushoz nincs külön sablon, a platformkártya jelenik meg (a platform saját sablonja), és a kereskedő azt szabja testre.

Oldaltípusonként egy sablonHivatkozás másolása

A sablon a téma og/ mappájában található fájl, amelyet az általa renderelt oldaltípusról neveznek el.

• Ha egy típushoz nincs fájl, a platformkártya jelenik meg. Egy új témában egyáltalán nincs og/ mappa, mégis minden oldal kap képet.
• Azok az oldalak is a default sablont használják, amelyek nem tartoznak a fenti kategóriákba (például a blog főoldala, a keresési találatok).
• Csak ez az öt fájlnév használható. Az og/ mappába kisbetűs .tsx fájlok kerülhetnek, közvetlenül a mappába: almappák és segédmodulok nélkül.
• Minden típushoz egy dizájn tartozik, amely a témában, a többi beállítás mellett tárolódik.

Kép tervezése a témaszerkesztőbenHivatkozás másolása

Nyisd meg a Megosztási képek pontot a struktúrafában, és válassz ki egy oldaltípust: Boltkártya, Termék, Kategória, Blogbejegyzés vagy Oldal. A feliratokat itt úgy idézzük, ahogyan a témaszerkesztőben megjelennek.

• A workspace egy linkelőnézeti kártyán belül mutatja a képet az oldal címével, leírásával és a bolt címével – pontosan úgy, ahogy a megosztott link egy közösségi oldalon megjelenik. A típus neve melletti címke jelzi, hogy mi rajzolja meg a képet: Platformdizájn vagy Theme template.
• A fa az oldaltípus alatt felsorolja a kép elemeit a megjelenítés sorrendjében; az utolsó sor az Elem hozzáadása.
• Az inspector a kép egészére vonatkozó adatokat tartalmazza: generált-e, melyik oldallal van előnézetben, mi rajzolja meg, valamint a sablon beállításait. Ha kijelölsz egy elemet, akkor az adott elem beállításai jelennek meg rajta.

Minden változtatás a témapiszkozat része. Automatikusan mentődik, a visszavonással visszaállítható, a vásárlók és a keresőrobotok pedig a Közzététel után látják.

A kép elemeiHivatkozás másolása

Egy elem egyetlen component a képen: egy szöveg, az ár, egy jelvény, a logó.

• Jelölj ki egy elemet a fában a beállításai módosításához az inspectoron.
• Mozgatás: mozgasd a sorát húzással, vagy használd a Feljebb és Lejjebb gombokat.
• Az Elrejtés leveszi a képről, de megőrzi a beállításait. A Megjelenítés visszahozza.
• A Duplikálás közvetlenül mögé helyez egy másolatot. Az Eltávolítás törli az elemet.

Az Elem hozzáadása két listát kínál:

• Az Értékek olyan szöveget ad hozzá, amely már tartalmazza az oldal egy értékét: a termék nevét, az árat, a bolt nevét. A platformkártyán a cím vagy a bolt neve címsorként adódik hozzá, minden más érték pedig visszafogott törzsszövegként.
• Az Elemek egy üres elemet ad hozzá a sablon valamelyik elemtípusából.

A platformkártya az alábbi elemtípusokat tartalmazza:

• Ha a Méret beállítása Automatikus, a címsor annál kisebb lesz, minél hosszabb a szövege, valamint a címsorok és a törzsszövegek kép mellett is kisebbre váltanak.
• A szöveg annyi sort foglal el, amennyire a szavaknak szükségük van, de legfeljebb a Legfeljebb ennyi sor értékét. A hosszabb szöveg három ponttal zárul.
• A tartalom nélküli elem a térközével együtt kimarad: az a Szöveg vagy Jelvény, amelynek üres a szövege, illetve az Ár egy ár nélküli terméknél.
• A kártya automatikusan elhelyezi a térközöket az elemek között. A Térköz ott ad helyet, ahol többet szeretnél.
• Az elemek a lábléc feletti oszlopon osztoznak, vagy – kikapcsolt lábléc esetén – a margón belüli teljes magasságon. Ha nem fér el mindegyik, a kártya először rövidíti a szövegeket, mielőtt bármit kihagyna. A szövegek egyesével veszítenek soraikból: először a Felirat stílusú szövegek, majd a Törzsszöveg, végül a Címsor. Két azonos stílusú szöveg közül a több sorból álló rövidül először, két egyforma hosszúságú közül pedig a lejjebb lévő. A rövidített szöveg végére három pont kerül. Ha minden szöveg egysorosra csökkent, a lista végéről kezdenek kimaradni az elemek. A láblécre semmi nem lóg rá, és egyetlen szövegsor sem vágódik félbe.
• A kártya a kép megrajzolása előtt kiszámítja a szöveg sorait a méretéből és az oszlop szélességéből. Ha marad hely az oszlopban, azt visszakapják a szövegek, elsőként a címsorok.
• Az Ár egy sorban marad. Ha a választott méret túlnyúlna az oszlopon, addig csökken, amíg az ár el nem fér, és az eredeti ár kimarad, ha nincs elég hely mindkettőnek.
• Egy képen legfeljebb 24 elem lehet, a rejtetteket is beleértve. Az olyan elemtípusból, amelyből képenként csak egy engedélyezett, nem adható hozzá és nem duplikálható egy második.

Az egyes típusok az alábbi elemekkel indulnak:

Értékek a szövegbenHivatkozás másolása

A Szöveg és a Jelvény szövegében a saját szavaidat az oldal értékeivel is keverheted. A szövegmező alatti Érték beszúrása oda szúr be egy értéket, ahol a kurzor utoljára állt. Az érték egy dupla kapcsos zárójelek közé írt név, a képen pedig a helyén az oldal saját értéke jelenik meg:

• Az oldal minden szövege és száma egy-egy érték. Az Érték beszúrása felsorolja az adott típusú oldalon található szövegeket. Az összes érték neve az Oldal adatai alatti táblázatban szerepel: page.title, store.name, product.price.amount, article.publishedAt és a többi.
• A hiányzó érték kimarad. A {{product.title}} üres egy blogbejegyzésnél, a {{product.brand}} pedig üres egy márka nélküli terméknél.
• Adj meg tartalék értéket függőleges vonallal. A {{product.brand | product.category}} a márkát jeleníti meg, vagy ha a terméknek nincs márkája, a kategóriát. Az első nem üres érték érvényesül.
• A kimaradó érték magával visz egy elválasztót: az előtte lévőt, vagy ha nincs előtte elválasztó, az utána lévőt. Egy márka nélküli terméknél a {{product.brand}} / {{product.category}} csak a kategóriát jeleníti meg, a perjel nélkül, a {{product.category}} / {{product.brand}} / {{store.name}} pedig a kategóriát és a bolt nevét jeleníti meg, köztük egyetlen perjellel. Elválasztónak számít a perjel, a függőleges vonal, a vessző, a pontosvessző, a kettőspont, a kötőjel, a gondolatjel, a középső pont vagy a bullet, a körülöttük lévő szóközökkel együtt.
• Egyetlen dizájn kiszolgálja a bolt összes nyelvét. Az érték az oldal szövegét az oldal nyelvén jeleníti meg. A beírt szavak nem fordulnak le: minden nyelven ugyanúgy jelennek meg.
• Egy szöveg legfeljebb 600 karakteres lehet, és a képen is legfeljebb 600 karakter jelenik meg.

A platformkártya beállításaiHivatkozás másolása

A típus kiválasztásakor a vizsgálópanel megjeleníti a sablon beállításait. A platformkártyán az alábbiak találhatók:

• A Kép azoknál a típusoknál szerepel, amelyek oldalának van saját képe: ilyen a termékfotó, a kategóriakép vagy a bejegyzés borítóképe. A boltkártyánál és a tartalmi oldalaknál ez a csoport nem szerepel. A képpel nem rendelkező oldalak teljes szélességben jelenítik meg a szöveget.
• Az Illesztés a jobb vagy bal oldalon lévő képre vonatkozik. A Töltsd ki a keretet a képet a keretre vágja. A Látsszon az egész a teljes képet jeleníti meg egy keretes dobozban.
• Az Árrés az egyes oldalakon szabadon hagyott hely. Egyes alkalmazások levágják a megosztási képek széleit: 60 px alatt a szöveg lecsúszhat.
• A Színséma a téma színeit használja, így a kép követi a márkát. A Téma a téma háttér- és szövegszíne. A Lágy a téma visszafogott hátterét használja. A Fordított felcseréli a hátteret és a szöveget; a kiemelő színe a téma elsődleges színe, vagy ha az elsődleges szín nem különülne el az új háttértől, a szöveg színe. A Márkaszín a téma elsődleges színére helyezi a képet. Az Egyéni megjeleníti a Háttér, a Szöveg és a Kiemelő beállítást: az üresen hagyott szín a témáét tartja meg.
• A Háttérkép kitölti a képet a szöveg mögött. Az Overlay a háttérszínnel színezi meg, hogy a szöveg olvasható maradjon: a 0% érintetlenül hagyja a képet, a 95% szinte teljesen elfedi. Ha a Pozíció értéke A szöveg mögött, az oldal saját képe lesz a szöveg mögötti kép, az itt választott kép pedig a képpel nem rendelkező oldalakon jelenik meg.
• A Bolt, a Webcím és a Megjelenés dátuma beállítások akkor láthatók, ha a Lábléc megjelenítése be van kapcsolva. A Csak a logó semmit sem rajzol ki, ha a boltnak nincs logója. A Megjelenés dátuma a blogbejegyzéseknél szerepel.
• A módosított beállítások jelölést kapnak, és önállóan visszaállíthatók.

Előnézet, biztonságos terület és visszaállításHivatkozás másolása

• Az Előnézet alapja kiválasztja a workspace által megjelenített oldalt: a bolt egy valódi termékét, kategóriáját, bejegyzését vagy oldalát. Ha egy típushoz még semmi sincs közzétéve, a bolt a saját nevével, logójával, színeivel és betűtípusaival feltöltött mintaadatokat lát. A boltkártyának egyetlen témája van, maga a bolt, így ott nincs választó.
• A Biztonságos terület a workspace-en besötétíti azokat a sávokat, amelyeket az X levág, amikor 2:1 arányúra vágja a képet, és kijelöli a margót. A szövegeket és logókat tartsd a kereten belül.
• A Dizájn visszaállítása egy megerősítést követően elveti az adott típus dizájnját. Minden beállítás és elem visszaáll a sablon kiindulási állapotára.

Mely oldalak kapnak generált képet?Hivatkozás másolása

A Megosztási kép alatti kapcsoló kikapcsolja az adott típust. A kikapcsolt típushoz tartozó oldal a következő sorrendben hivatkozik képre: a saját képe (a termékfotó, a kategória képe, a bejegyzés borítóképe); egyébként a boltkártya, ha a boltkártya be van kapcsolva; egyébként a platform statikus képe, amely minden boltnál azonos. A nem nyilvános oldalak (piszkozatok, időzített bejegyzések vagy oldalak, illetve bármi, ami előnézetben látható) szintén soha nem hivatkoznak generált képre.

Ha a témához tartozik sablonHivatkozás másolása

Az a típus, amelynek témájában szerepel az og/<kind>.tsx, ugyanígy szabható testre, de a platform kártyájának elemei és beállításai helyett a sablonban deklarált elemekkel és beállításokkal.

• A workspace-en lévő címke és a fa sora a Theme template feliratot mutatja.
• Az Elem hozzáadása a sablon elemtípusait kínálja fel, valamint az Értékek lehetőséget, ha valamelyik elem értékeket fogadó szöveget tartalmaz. Az ellenőr a sablon beállításait mutatja. Ha egy sablon egyiket sem deklarálja, akkor nincs mit módosítani: mindent a kódja dönt el.
• A feliratok megegyeznek azzal, amit a fejlesztő a sablonba írt. Az a sablon, amely pontosan azt deklarálja, mint a platform kártyája, a te nyelveden, a platform kártyájának megfelelően jelenik meg.
• A Megnyitás a kódszerkesztőben megnyitja a fájlt. Fájl nélküli típus esetén a gomb felirata Kód szerkesztése: ez megnyitja a kódszerkesztőt, amely felajánlja a fájl létrehozását.

Sablon írásaHivatkozás másolása

A sablonkód a kódszerkesztőben készül. Az og/ mappa ott szerepel a többi tartalommappa mellett, és a szerkesztő önálló projektként ellenőrzi a sablonok típusait: kizárólag a react és a @poltura/og-image csomagokat ajánlja fel, nem ismer böngészős globális változókat, és jelzi a nem engedélyezett importokat.

A parancspaletta Téma: Új megosztási kép sablon… parancsa hozza létre a fájlt a sablonnal még nem rendelkező típushoz, két kiindulópont egyikéből: Platformkártya vagy Saját elrendezés. Mindkettő alább látható.

A mentés a témapiszkozatba ír. A vásárlók és a keresőrobotok a Közzététel után látják az új képet.

A fájlHivatkozás másolása

A @poltura/og-image a következőket adja:

Kiindulás a platform kártyájábólHivatkozás másolása

Ez a platform saját terméksablonja. Más típus esetén csak az ogCardMeta('product') hívásban szereplő név tér el.

import { OgCard, ogCardMeta, type OgImageProps } from '@poltura/og-image';

export const meta = ogCardMeta('product');

export function OgImage(props: OgImageProps) {
  return <OgCard {...props} />;
}

Az ogCardMeta(kind) a platform kártyájának minden beállítását és elemét deklarálja, az OgCard pedig kirajzolja őket. Egy ilyen sablon még semmit sem változtat: ebből érdemes kiindulni, ha a platform dizájnját szeretnéd kiegészíteni valamivel. Rajzolj a kártya köré, és adj hozzá saját beállításokat a meta objektumhoz:

import { OgCard, ogCardMeta, type OgImageProps, type OgTemplateMeta } from '@poltura/og-image';

const card = ogCardMeta('product');

export const meta: OgTemplateMeta = {
  ...card,
  settings: [
    ...(card.settings ?? []),
    { type: 'header', id: 'ribbon_header', label: 'Sold out ribbon' },
    { type: 'text', id: 'ribbon', label: 'Text', default: 'Sold out' },
  ],
};

export function OgImage(props: OgImageProps) {
  const { product, settings, theme } = props;
  const ribbon = product?.available === false ? String(settings.ribbon) : '';
  return (
    <div
      style={{
        position: 'relative',
        display: 'flex',
        width: 1200,
        height: 630,
        fontFamily: theme.fonts.body,
      }}
    >
      <OgCard {...props} />
      {ribbon ? (
        <div
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            padding: '12px 28px',
            fontSize: 24,
            fontWeight: 700,
            color: theme.colors.primaryForeground,
            backgroundColor: theme.colors.primary,
          }}
        >
          {ribbon}
        </div>
      ) : null}
    </div>
  );
}

• Az OgCard mérete 1200×630. Az oldalt a props.settings és props.elements szerint rajzolja ki, az ogCardMeta által deklarált azonosítók alatt. Változtatás nélkül add át neki a propokat.
• Az id egyedi a saját listáján belül. A kártya beállítás-azonosítói a következők: image, image_fit, align, position, padding, scheme, background, text, accent, background_image, overlay, footer, footer_brand, footer_host és footer_date. Ha egy saját beállításod ezek valamelyikét használja újra, az kimarad, és a témaszerkesztő jelzi a hibát.
• A kártya együtt változik a platformmal. A renderer sablon megkapja a platform későbbi fejlesztéseit, és a kártyához adott új beállítások szerkesztés nélkül megjelennek a témaszerkesztőben.
• A platformkártya szövegeit maga a témaszerkesztő jeleníti meg, a kereskedő nyelvén. Így tesz a sablonfájl nélküli típusoknál, valamint az olyan sablonoknál is, amelyek meta értéke pontosan megegyezik az ogCardMeta(kind) értékével, mint a fenti legelső példában. Amint a meta bármiben eltér (hozzáadsz egy beállítást, átnevezel egy elemtípust), minden címke úgy jelenik meg, ahogyan a meta tartalmazza – beleértve a kártya saját címkéit is –, ezek pedig angol nyelvűek. A szalagot tartalmazó fenti sablon pontosan ilyen.

Indulj ki a saját layoutodbólHivatkozás másolása

Ez a Saját elrendezés, amelyet a kódszerkesztő a boltkártyához hoz létre. Más típusoknál csak a label tér el (Product, Collection, Article, Page): a törzs minden oldaltípusnál működik, mert mindegyik rendelkezik page, store és theme adatokkal.

import type { OgImageProps, OgTemplateMeta } from '@poltura/og-image';

// What a merchant can change in the Customizer. props.settings and props.elements carry the
// result: every declared setting is there, and a value that is missing or invalid is its default.
export const meta: OgTemplateMeta = {
  label: 'Store card',
  settings: [
    { type: 'color', id: 'accent', label: 'Accent color' },
    {
      type: 'select',
      id: 'align',
      label: 'Alignment',
      default: 'left',
      options: [
        { value: 'left', label: 'Left' },
        { value: 'center', label: 'Center' },
      ],
    },
    { type: 'checkbox', id: 'host', label: 'Show the web address', default: true },
  ],
  elements: [
    {
      type: 'line',
      label: 'Line of text',
      settings: [
        { type: 'textarea', id: 'content', label: 'Text', dynamic: true },
        { type: 'checkbox', id: 'heading', label: 'Heading' },
      ],
    },
  ],
  defaultElements: [
    { type: 'line', settings: { content: '{{page.title}}', heading: true } },
    { type: 'line', settings: { content: '{{page.description}}' } },
  ],
};

// The canvas is 1200×630 px. Keep content 60 px from the edges: X crops the image to 2:1.
// Lay out with flexbox: give every div that holds other elements display: 'flex'.
// Style with inline style objects; className and stylesheets are ignored.
export function OgImage({ settings, elements, store, theme }: OgImageProps) {
  const { colors, fonts } = theme;
  const accent = String(settings.accent) || colors.primary;
  const centered = settings.align === 'center';
  return (
    <div
      style={{
        width: 1200,
        height: 630,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: centered ? 'center' : 'flex-start',
        padding: 60,
        backgroundColor: colors.background,
        color: colors.foreground,
        fontFamily: fonts.body,
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: centered ? 'center' : 'flex-start',
        }}
      >
        <div style={{ width: 64, height: 8, borderRadius: 4, backgroundColor: accent }} />
        {elements.map((element) => {
          const text = String(element.settings.content);
          const heading = element.settings.heading === true;
          if (text === '') return null;
          return (
            <div
              key={element.id}
              style={{
                display: 'block',
                lineClamp: heading ? 3 : 2,
                overflow: 'hidden',
                marginTop: 24,
                fontFamily: heading ? fonts.heading : fonts.body,
                fontSize: heading ? 72 : 32,
                fontWeight: heading ? 700 : 400,
                lineHeight: heading ? 1.1 : 1.35,
                color: heading ? colors.foreground : colors.mutedForeground,
                textAlign: centered ? 'center' : 'left',
              }}
            >
              {text}
            </div>
          );
        })}
      </div>
      {settings.host === true ? (
        <div style={{ fontSize: 24, color: colors.mutedForeground }}>{store.host}</div>
      ) : null}
    </div>
  );
}

Mit mutat be:

• A meta három beállítást és egy elemtípust deklarál. A témaszerkesztő ezekből buildeli fel az inspectorát és az Elem hozzáadása listáját, a címkéket pedig az itt leírt formában jeleníti meg.
• A settings.accent egy color: egy hexadecimális szín, vagy egy üres szöveg, amíg a kereskedő nem választott egyet sem. A sablon ilyenkor a téma elsődleges színét használja.
• A settings.align egy select, és az egyik opció értékét tárolja. A settings.host egy checkbox, amely true vagy false értéket vesz fel.
• Az elements a kereskedő listája sorrendben, a rejtett elemek kihagyásával. Az element.id egyedi a képen, és az elem áthelyezésekor sem változik, így ez a key.
• A content egy dynamic szöveg: a behelyettesített {{…}} értékekkel együtt érkezik meg. Ha az oldal nem tartalmaz ilyen értéket, üres marad, így a sablon átugorja az üres szöveget.
• A defaultElements az a lista, amellyel a kép indul: az oldal címe címsorként, alatta pedig az oldal leírása.
• Az elemtípus neve line, egy olyan név, amelyet a platformkártya nem használ. Így a kép ezekből a defaultElements elemekből indul ki, nem pedig azokból, amelyeket a kereskedő a kártyán elrendezett (Elemtípusok).

Deklaráld, mit módosíthat a kereskedőHivatkozás másolása

A meta egy egyszerű objektum. Lásd el az OgTemplateMeta típussal, és a szerkesztő gépelés közben ellenőrzi.

Minden prop opcionális. A meta nélküli sablon kizárólag az oldal adataiból építkezik, és a témaszerkesztőben semmit sem lehet állítani rajta.

MezőkHivatkozás másolása

A mező a settings lista egy eleme. Hét típus értéket tárol, kettő pedig az űrlap layoutját adja meg:

Minden mező az alábbi propokat fogadja el:

import type { OgTemplateMeta } from '@poltura/og-image';

export const meta: OgTemplateMeta = {
  label: 'Product',
  settings: [
    { type: 'header', id: 'look', label: 'Look' },
    { type: 'paragraph', id: 'look_note', label: 'Colors you leave empty follow the theme.' },
    { type: 'color', id: 'accent', label: 'Accent color', default: '#b4532a' },
    {
      type: 'select',
      id: 'layout',
      label: 'Layout',
      default: 'split',
      options: [
        { value: 'split', label: 'Picture beside the text' },
        { value: 'stacked', label: 'Text only' },
      ],
    },
    {
      type: 'range',
      id: 'picture_width',
      label: 'Picture width',
      min: 320,
      max: 560,
      step: 20,
      unit: 'px',
      default: 480,
      visible_if: { field: 'layout', value: 'split' },
    },
    { type: 'image', id: 'pattern', label: 'Background pattern', info: 'Drawn behind the text.' },
    { type: 'checkbox', id: 'price', label: 'Show the price', default: true },
    {
      type: 'text',
      id: 'eyebrow',
      label: 'Line above the title',
      placeholder: '{{product.brand}}',
      default: '{{product.brand | product.category}}',
      dynamic: true,
    },
    { type: 'textarea', id: 'note', label: 'Note under the price' },
  ],
};

Az egyes típusok alapértelmezett értékei és elfogadott értékei:

Mező megjelenítése csak akkor, amikor érvényesHivatkozás másolása

A visible_if ugyanazon lista egy másik beállítását, valamint az általa felveendő értéket vagy értékeket adja meg:

import type { OgField } from '@poltura/og-image';

export const colorFields: OgField[] = [
  {
    type: 'select',
    id: 'scheme',
    label: 'Colors',
    default: 'theme',
    options: [
      { value: 'theme', label: 'Theme' },
      { value: 'dark', label: 'Dark' },
      { value: 'custom', label: 'Custom' },
    ],
  },
  {
    type: 'color',
    id: 'background',
    label: 'Background',
    visible_if: { field: 'scheme', value: 'custom' },
  },
  {
    type: 'checkbox',
    id: 'border',
    label: 'Border',
    visible_if: { field: 'scheme', value: ['theme', 'dark'] },
  },
];

A visible_if csupán elrejti a mezőt az űrlapon. A beállítás megőrzi az értékét, és továbbra is megérkezik a props.settings objektumban, ezért a sablonban is ellenőrizd a vezérlő beállítást: ellenőrizd a settings.scheme === 'custom' feltételt, mielőtt használnád a settings.background értékét.

Szövegek, amelyek az oldal értékeit veszik felHivatkozás másolása

A dynamic: true beállítású text vagy textarea kettős kapcsos zárójelek között az oldal értékeit tartalmazhatja. A platform a sablon futása előtt behelyettesíti ezeket: a sablon már a kész szöveget kapja meg. A témaszerkesztőben az ilyen mezők mellett egy Érték beszúrása gomb található, amely felsorolja az oldal értékeit, így a kereskedőnek sosem kell beírnia a kapcsos zárójeleket.

• Az érték egy szöveg vagy egy szám elérési útja az oldaladatokban: {{page.title}}, {{product.price.amount}}, {{theme.radius}}. Az olyan elérési út, amely semmire sem mutat, null, logikai érték vagy objektum, üres marad.
• A {{product.brand | product.category}} az első nem üres értéket veszi fel.
• Az üres érték magával visz egy elválasztójelet: az előtte állót, vagy ha előtte nem áll semmi, az utána következőt. Elválasztójel a perjel, a függőleges vonal, a vessző, a pontosvessző, a kettőspont, a kötőjel, a gondolatjel, a középső pont vagy a bullet, a körülöttük lévő szóközökkel együtt. Így a {{product.brand}} / {{product.category}} bármelyik hiányában is jól olvasható marad, a {{product.category}} / {{product.brand}} / {{store.name}} megtart egy perjelt a kategória és a bolt neve között a márka nélküli termékeknél, a Brand: {{product.brand}} szövegből pedig Brand lesz.
• Az egymást követő szóközökből egyetlen szóköz lesz, a kész szöveg pedig 600 karakterre vágódik le.
• A default, valamint a defaultElements elemei szintén tartalmazhatnak értékeket. Az értékek körüli szavak a bolt minden nyelvén azonosak, mint a kereskedő által beírt szavak.
• A dynamic: true nélkül a kapcsos zárójelek közönséges karakterek, és úgy jelennek meg, ahogy le vannak írva.

A kész szöveg üres is lehet. Ilyenkor ne rajzolj ki semmit, ahogyan a fenti saját layout is teszi.

ElemtípusokHivatkozás másolása

Az elements deklarálja, hogy a kereskedő mit adhat hozzá a képhez és mit rendezhet el rajta. Olyan layoutrészeknél használd, amelyek száma és sorrendje a kereskedő választása. A mindig jelen lévő részeket érdemesebb közvetlenül a sablonból kirajzolni a meta.settings beállításaival.

import type { OgTemplateMeta } from '@poltura/og-image';

export const meta: OgTemplateMeta = {
  elements: [
    {
      type: 'line',
      label: 'Line of text',
      settings: [
        { type: 'text', id: 'content', label: 'Text', dynamic: true },
        { type: 'checkbox', id: 'strong', label: 'Bold' },
      ],
    },
    { type: 'emblem', label: 'Logo', limit: 1 },
  ],
  defaultElements: [
    { type: 'emblem' },
    { type: 'line', settings: { content: '{{page.title}}', strong: true } },
    { type: 'line', settings: { content: '{{page.description}}' } },
  ],
};

A defaultElements sorrendben felsorolja egy olyan kép elemeit, amelyet még senki sem rendezett el. Egy bejegyzés megnevez egy deklarált type-ot, és opcionálisan értékeket adhat meg az adott típus beállításaihoz; a meg nem nevezett beállítás az alapértelmezett értékével indul. Az a bejegyzés, amelynek type értéke nincs deklarálva, kimarad, és a rendszer hibát jelez miatta.

Az elemtípusok neveit a platformkártya figyelembevételével válaszd meg. A tárolt layoutot a rendszer típusnév alapján olvassa be, sablonváltáskor is. A kártya elemtípusai a következők: text, price, badge, accent, logo és space.

• Ha a saját típusod ezen nevek egyikét viseli, átveszi azokat az elemeket, amelyeket a kereskedő a kártyán elrendezett. A rendszer a te mezőid alapján olvassa be őket: a kártya text eleme azokkal a beállításokkal érkezik meg, amelyek id-ja megegyezik a kártyáéval (például a content), a többi pedig az alapértelmezett értékét kapja. A te defaultElements listádat ilyenkor nem használja.
• Egy saját név (line, emblem) a te defaultElements listádból indítja a képet: az olyan tárolt lista, amelyben egyetlen elem sem egyezik az általad deklarált típusokkal, egy másik sablonhoz készült.
• A kereskedő által kiürített lista minden sablon alatt üres marad.

Ugyanez érvényes a beállítások id azonosítójára is: a fenti saját layout a beállításait a kártyához hasonlóan accent és align néven nevezi el, így a kereskedő kiemelőszíne és igazítása átadódik, az elemtípusának viszont saját nevet ad.

Olvasd be a dizájnt a sablonbanHivatkozás másolása

Az OgImage egyetlen objektumban kapja meg az oldal adatait és a dizájnt:

A settings mindig hiánytalan, és minden értéke olyan, amelyet a mezője felvehet. A sablonnak soha nem kell hiányzó beállítást vagy lehetetlen értéket ellenőriznie. A meta.settings minden értékmezőjére ebben a sorrendben:

1. A kereskedő tárolt értéke érvényesül, ha a mező felveheti azt.
2. Egyébként a mező alapértelmezett értéke érvényesül.

Milyen értéket vehet fel egy mező:

• A dynamic szöveg ezután töltődik be, így a sablon már a kész szöveget kapja meg.
• A header és a paragraph nem hordoz értéket, és nem tartozik hozzájuk bejegyzés.
• Az olyan tárolt érték, amelynek a beállítását a sablon nem deklarálja, nem adódik át. Ha átnevezel egy id-t, a kereskedő régi névhez tartozó értéke figyelmen kívül marad.

Az elements a renderelendő lista, sorrendben.

• Amíg a kereskedő nem módosít egy adott típusú elemet, addig ez a defaultElements. Az első módosítástól kezdve ez a kereskedő saját listája, és az üres lista azt jelenti, hogy egyáltalán nincs elem.
• A rejtett elemek kimaradnak. Ugyanígy kimaradnak azok az elemek is, amelyek type értékét a sablon nem deklarálja, a típusuk limit értékén túli elemek, valamint a 24. utáni összes elem.
• Ha egy tárolt lista tartalmaz elemeket, de egyikük típusa sem egyezik a sablon által deklaráltakkal, akkor az egy másik sablonhoz készült. A sablon ilyenkor a saját defaultElements értékét kapja meg.
• Az element.settings a settings mezővel megegyező szabályok szerint hiánytalan és érvényes az elem típusának mezőire nézve.
• Az element.id egyedi a képen, és az elem áthelyezésekor is megmarad.

Az értékek típusa string | number | boolean, mivel egy beállítás típusát a meta deklarálja, nem a TypeScript. Szűkítsd az egyes értékeket ott, ahol kiolvasod őket:

import type { OgImageProps, OgTemplateMeta } from '@poltura/og-image';

export const meta: OgTemplateMeta = {
  label: 'Page',
  settings: [
    { type: 'color', id: 'accent', label: 'Accent color' },
    { type: 'range', id: 'bar', label: 'Bar width', min: 8, max: 48, step: 4, default: 16 },
    {
      type: 'select',
      id: 'direction',
      label: 'Lines',
      options: [
        { value: 'column', label: 'Stacked' },
        { value: 'row', label: 'Side by side' },
      ],
    },
    { type: 'checkbox', id: 'bold', label: 'Bold', default: true },
  ],
  elements: [
    {
      type: 'line',
      label: 'Line',
      settings: [{ type: 'text', id: 'content', label: 'Text', dynamic: true }],
    },
  ],
  defaultElements: [
    { type: 'line', settings: { content: '{{page.title}}' } },
    { type: 'line', settings: { content: '{{store.name}}' } },
  ],
};

export function OgImage({ settings, elements, theme }: OgImageProps) {
  // color: a hex colour, or '' while none is chosen
  const accent = String(settings.accent) || theme.colors.primary;
  // range: a number
  const bar = Number(settings.bar);
  // select: the value of one of its options
  const row = settings.direction === 'row';
  // checkbox: true or false
  const bold = settings.bold === true;
  return (
    <div
      style={{
        width: 1200,
        height: 630,
        display: 'flex',
        flexDirection: row ? 'row' : 'column',
        justifyContent: 'center',
        alignItems: row ? 'center' : 'flex-start',
        gap: 24,
        padding: 60,
        borderLeft: `${bar}px solid ${accent}`,
        backgroundColor: theme.colors.background,
        color: theme.colors.foreground,
        fontFamily: theme.fonts.heading,
        fontSize: 56,
        fontWeight: bold ? 700 : 400,
      }}
    >
      {elements.map((element) => (
        <div key={element.id}>{String(element.settings.content)}</div>
      ))}
    </div>
  );
}

Ha hiba van a meta objektumbanHivatkozás másolása

A platform engedékenyen olvassa be a meta objektumot. Ami helyesen formázott, azt megtartja; a hibás mezőket, elemtípusokat vagy alapértelmezett elemeket kihagyja, és mindegyikről külön sorban számol be, megnevezve a hibát:

• A témaszerkesztő ezeket a sorokat az adott típus inspectorának alján jeleníti meg, A sablon fejlesztőjének részben. Egy meta esetén legfeljebb 50 hibát nevez meg; a további hibák csak akkor jelennek meg, ha az elsőket már kijavítottad.
• A kép ettől függetlenül renderelődik. A kihagyott beállításoknak nincs bejegyzésük a props.settings objektumban, ezért ahelyett, hogy megkerülnéd a problémát, javítsd a jelzett sort.
• Ha egy sablont egyáltalán nem lehet betölteni (nem fordul le, hiba történik a betöltésekor, vagy a betöltés 2 másodpercnél tovább tart), egyetlen beállítása sem jelenik meg. Az inspectoron ilyenkor az A sablon beállításait nem sikerült beolvasni. üzenet látható a hibával, az Megnyitás a(z) N. sornál gomb pedig a kódszerkesztőt a megnevezett sornál nyitja meg.
• Egyetlen hiba soha nem borítja fel a többit: a többi beállítás és elem továbbra is működik.
• A szerkesztő typecheckje a legtöbb hibát előre jelzi, ha a meta objektumot ellátod az OgTemplateMeta típussal. Az ismétlődő id-kat, a hibás formátumú id-kat, az üres options listát vagy a nem deklarált típusú alapértelmezett elemeket azonban ez sem észleli.

Egy dizájn korlátaiHivatkozás másolása

A korlátot meghaladó label, info, placeholder és unit értékek le lesznek vágva. A hosszabb value értékű opciókat, a 24. utáni opciókat és a 24. utáni alapértelmezett elemeket a rendszer külön jelentés nélkül kihagyja.

Sablon módosítása vagy eltávolításaHivatkozás másolása

Egy típus dizájnja típusonként tárolódik, nem sablononként. Amikor egy típus sablonja módosul, vagy a fájlt törlöd, a tárolt dizájnt az éppen deklarált elemek alapján olvassa be a rendszer:

• A tárolt érték minden olyan beállításnál érvényesül, amely azonos id-val rendelkezik, és képes fogadni azt. Minden más értéket figyelmen kívül hagy.
• Az elem megmarad, ha a type értéke továbbra is deklarálva van. Minden más elemet kihagy a rendszer. Ha egyetlen tárolt elemnek sincs deklarált típusa, a sablon defaultElements elemei lépnek érvénybe; a kereskedő által kiürített lista viszont üres marad.
• Az og/<kind>.tsx törlésével az adott típus visszatér a platform kártyájához. A kártya ugyanazon szabályok szerint olvassa be a tárolt dizájnt: megtartja azokat az elemeket, amelyek típusnevei megegyeznek a sablonoddal, és ha ilyenek nincsenek, a sajátjaiból indul ki. A témaszerkesztőben a Dizájn visszaállítása funkció elveti a dizájn maradványait.

Ezért ha a kereskedők már használják a sablont, tartsd meg változatlanul az id és type értékeket, és válassz új id-t, ha egy beállítás jelentése megváltozik.

OldaladatokHivatkozás másolása

Minden szöveg egyszerű szöveg (plain text) az oldal nyelvén, és eleve észszerű hosszúságúra van vágva (a címek 160 karakterre, a leírások 300-ra, a rövid feliratok – például márka vagy kategória – pedig 80-ra). A hiányzó szöveg üres string, soha nem null. A hiányzó kép null.

A product, a collection és az article olyan objektumok, amelyek csak a saját típusukon léteznek. A product értéke null minden típuson, kivéve a product típust, a collection értéke null minden típuson, kivéve a collection típust, és az article értéke is null minden típuson, kivéve az article típust. Érd el őket a ?. operátorral, és adj meg tartalékot a page objektumból (product?.title || page.title), hogy ugyanaz a fájl hiányzó adatok esetén is értelmes képet rajzoljon ki.

A tíz szín: theme.colors.background, theme.colors.foreground, theme.colors.primary, theme.colors.primaryForeground, theme.colors.muted, theme.colors.mutedForeground, theme.colors.accent, theme.colors.accentForeground, theme.colors.card és theme.colors.border. Ezek a témabeállításokat követik, így ha egy kereskedő módosítja a márka színét, a sablon érintése nélkül kap új képeket.

A táblázatban szereplő szövegek és számok azok az értékek, amelyeket egy dynamic szöveg tartalmazhat dupla kapcsos zárójelek között.

Layout és stílusokHivatkozás másolása

A képet nem böngésző rendereli. A HTML és a CSS egy szűkített részhalmazát támogatja:

• Flexboxszal rendezd el az elemeket. Minden elem flex konténer, hacsak a stílusa mást nem mond. Az elemeket a display: 'flex', flexDirection, justifyContent, alignItems, gap, flexGrow és fix méretek segítségével pozicionáld. Az alapértelmezett irány a sor, ezért az egymás alá rendezéshez add meg a flexDirection: 'column' stílust. A display: 'grid' is működik; a táblázatok nem, ezek sikertelenné teszik a renderelést.
• Adj display: 'flex' stílust minden olyan div-nek, amely más elemeket tartalmaz. Az a div, amelynek több gyermeke van, és nincs display stílusa, folyó szövegként jelenik meg, ahogy egy böngésző egy bekezdést szed: a szövegei és a soron belüli elemei sorokban követik egymást. Ezt egy félkövér szót tartalmazó mondathoz használd, ne a layouthoz.
• Kizárólag beágyazott style objektumok. A className figyelmen kívül marad, és nincsenek stylesheetek sem. A képpontokhoz számokat írj (fontSize: 48), minden máshoz pedig stringeket ('1px solid #e2dcd3').
• Méretezd a root elementet. A root elementnek add meg a width: 1200 és height: 630 méreteket.
• A méretbe a padding és a keret is beleszámít. Egy width: 1200, height: 630 és padding: 60 stílusú root elem továbbra is 1200 × 630 képpont. Ha egy elemnél a tartalmát szeretnéd méretezni, add meg a boxSizing: 'content-box' stílust.
• A később következő elemek eltakarják a korábbiakat. A position: 'absolute' a szülőelem széleitől helyezi el az elemet, a zIndex pedig megváltoztatja a sorrendet.
• Nincs var(). A var()-t használó stílusokat a rendszer elutasítja. A calc() működik; a 3D transzformációk laposan jelennek meg.

ElemekHivatkozás másolása

Bármilyen más elem sikertelenné teszi a renderelést (<a> is not an allowed element). Az event handlereket, a ref, a href és a dangerouslySetInnerHTML attribútumokat a rendszer minden elemnél elutasítja. A fragmentek (Fragment), a tömbök (egy .map() key értékekkel) és a saját függvényszerű komponensek használhatók: ezek még a kép renderelése előtt feloldódnak.

SzövegHivatkozás másolása

• A szöveg automatikusan tördelődik a dobozán belül. Ha adott számú sor után le szeretnéd vágni, használj display: 'block', lineClamp: 2 és overflow: 'hidden' stílust egy olyan div-en, amely kizárólag a szöveget tartalmazza. A levágás végére három pont kerül.
• Ha inkább karakterszám alapján vágnád le a szöveget (például felülcím, jelvény esetén), használd a clampText(text, 48) függvényt.
• A fontFamily, fontSize, fontWeight, lineHeight és letterSpacing értékeket explicit módon állítsd be a root elemen vagy magán a szövegen. A címsoroknak nincsenek böngészős alapértelmezett értékei: egy h1 nem nagyobb egy div-nél, hacsak meg nem adod.

BetűtípusokHivatkozás másolása

Használd a theme.fonts.heading és theme.fonts.body értékeket. Ezek mindig olyan betűcsaládok, amelyekkel a renderer rendelkezik.

• Nyolc betűcsalád érhető el: Inter, Poppins, Roboto, Open Sans, Lato, Montserrat, Playfair Display és Merriweather.
• Mindegyik két vastagságban (400 és 700), kizárólag álló (upright) változatban érhető el. Minden egyéb vastagságot a kettő közül az egyikkel renderel a rendszer.
• Bármilyen más betűcsalád neve esetén az Inter jelenik meg.
• A latin, a kiterjesztett latin (magyar, lengyel, cseh és más európai nyelvek), a cirill és a görög karakterek támogatottak, ha az adott betűcsalád tartalmazza őket. Emojik, valamint kínai, japán vagy koreai szövegek nem jelennek meg: a betűkészletben nem szereplő karakterek üres dobozként jelennek meg.

SzínekHivatkozás másolása

Használd a theme.colors objektumot, hogy a kép kövesse a bolt arculatát. Hexadecimális, rgb(), rgba() és nevesített színek bármelyik színmeghatározó propnál működnek. A backgroundImage propban a lineáris és radiális színátmenetek is használhatók. A kép formátuma JPEG: nincs átlátszóság, az átlátszó területek fehéren jelennek meg.

Egy color beállítás hexadecimális színt vagy '' értéket tartalmaz. A mixHex, inkOn és contrastOf függvények hexadecimális színeken működnek: a visszafogott árnyalat a mixHex(text, background, 0.4), az inkOn(accent) a kitöltött jelvény szövegszíne, a contrastOf(accent, background) pedig megmutatja, hogy a kiemelőszín elkülönül-e a hátterétől (a platformkártya legalább 1.6-os értéket vár el). Egy témaszín lehet rgb() érték is. Ha nem hexadecimális színt kap, a mixHex változatlanul visszaadja az első argumentumát, az inkOn fehéret ad vissza, a contrastOf pedig 1-et.

KépekHivatkozás másolása

const logo = store.logo ? (
  <img src={store.logo} width={240} height={56} alt='' style={{ objectFit: 'contain' }} />
) : null;
const pattern = String(settings.pattern);
const backdrop = pattern ? (
  <img
    src={pattern}
    width={1200}
    height={630}
    alt=''
    style={{ position: 'absolute', top: 0, left: 0, objectFit: 'cover' }}
  />
) : null;

• Mindig adj meg width és height értéket az img elemnek. Az objectFit: 'contain' vagy 'cover' határozza meg, hogyan tölti ki a kép ezt a dobozt.
• Kizárólag háromféle képforrás jeleníthető meg: az oldal adataiban érkező kép-URL (store.logo, product.image, collection.image, article.image), egy image beállítás képe, valamint egy kisméretű, beágyazott data: kép (szövegként legfeljebb 512 KB). Az első kettőt a platform a bolt saját médiatárából olvassa be. A hálózatról soha semmi nem töltődik le.
• Minden más URL-t elvet a rendszer: az img egy azonos méretű üres dobozt hagy maga után, a backgroundImage: 'url(…)' réteg pedig törlődik. A kép többi része ettől függetlenül megjelenik.
• Mielőtt megjelenítenéd az oldal valamelyik képét, ellenőrizd a null értéket, egy image beállítás előtt pedig az '' értéket, és készíts olyan layoutot is, amely e kép nélkül is működik. Az oldal képe akkor null, ha az oldalhoz nem tartozik kép, vagy ha a meglévő kép nem jeleníthető meg (a fájl nem kép, vagy nagyobb a megengedett feltöltési méretnél). Egy image beállítás értéke '', amíg nincs kép kiválasztva, illetve akkor is, ha a kiválasztott kép nem jeleníthető meg. A sablonod ilyenkor kép nélkül jeleníti meg a layoutot, nem pedig egy üres keretet mutatva.
• Egy dizájn az oldal saját képén kívül nyolc képet használhat a médiatárból. A kilencedik már '' értékként érkezik.

Beágyazott SVGHivatkozás másolása

Ikonok vagy díszítőelemek rajzolásához használj alakzatokat tartalmazó svg elemet a fent felsorolt elemekből építkezve. A text, image, use és foreignObject elemek nem érhetők el, és az svg-n belüli url(…) hivatkozás csak ugyanazon svg egy elemére mutathat (fill='url(#fade)').

KorlátokHivatkozás másolása

A teljes canvast kitöltő fényképek szokták megközelíteni a 300 KB-os korlátot. Az egyszínű felületek és a szövegek jóval alatta maradnak.

A meta és a dizájn korlátairól a Dizájn korlátai szakaszban olvashatsz.

Amit a sablon nem tehet megHivatkozás másolása

A sablonod képenként egyszer fut le, egyszerű függvényhívásként. Nem React-alkalmazásként fut le (nincs mountolás).

• Nincs hálózat. A fetch hívás létezik ugyan, de hibát dob (rejectel). Minden, amire a képnek szüksége van, a propokban található.
• Nincsenek hookok. A useState, useEffect, useMemo és a context hibát dob. Az értékeket inkább a függvény bodyjában számítsd ki.
• Nincs aszinkron működés. A promise-t visszaadó komponenseket a rendszer elutasítja.
• Nincsenek egyéb importok. Csak a react és a @poltura/og-image érhető el. A webáruház kódja sem importálhat sablont.
• Ne rajzolj időt vagy véletlenszerű értéket. Semmi sem akadályozza meg a Date.now() vagy a Math.random() használatát, de a platform csak egyszer rajzolja ki a képet, és a tárolt másolatot szolgálja ki mindaddig, amíg az oldal adatai, a dizájn vagy a sablon meg nem változik. A dátum vagy a véletlen érték belefagy ebbe a másolatba.

Ha valami hiba történikHivatkozás másolása

• A kódszerkesztőben a typecheck gépelés közben jelzi a nem létező propokat, az OgTemplateMeta típusnak meg nem felelő meta elemeket és a nem engedélyezett importokat.
• Mentéskor a nem engedélyezett importokat a rendszer elutasítja. A nem lefordítható vagy OgImage exporttal nem rendelkező sablon – mint bármely félkész piszkozatfájl – ettől függetlenül elmentődik, a témaszerkesztő pedig a típusát Nem tehető közzé jelöléssel látja el.
• A témaszerkesztőben a kép alatti sáv mutatja a ki nem rajzolható sablon hibáját a sorszámmal együtt, az Megnyitás a(z) N. sornál gomb pedig közvetlenül ott nyitja meg a kódszerkesztőt. A workspace-en az utolsó működő kép marad látható. Ha egy sablon renderelése 2 másodpercnél tovább tart, az itt is hibának számít. A meta hibáit az ellenőrző panel listázza (Ha a meta hibát tartalmaz).
• Közzétételkor a rendszer elutasítja a nem lefordítható, tiltott elemet importáló vagy OgImage export nélküli sablonokat, a hibaüzenetben pedig megnevezi a fájlt.
• Az élő boltban a futás közben hibára futó sablon (ha hibát dob, nem engedélyezett elemet ad vissza, vagy olyasmit rajzol, amit nem lehet kirajzolni) sosem teszi tönkre az oldalt. A platform helyette a platformkártyát rajzolja ki az adott oldalhoz, és ezt a képet tárolja a hibával együtt. A kártya az eredeti állapotában jelenik meg: a sablonodhoz készült dizájn nem vonatkozik rá. A hibás sablon nem fut le újra az adott oldalon, amíg a sablon, a dizájn vagy az oldal adatai meg nem változnak.
• A dizájn is hibára futhat. Ha a platformkártya dizájnja nem rajzolható ki – például mert a képei együtt túl nagyok a rendereléshez –, a hiba a témaszerkesztőben a kép alatt jelenik meg. Az élő boltban az oldal a platformkártyát kapja meg az eredeti állapotában, amelyet a rendszer a hibával együtt tárol mindaddig, amíg a dizájn vagy az oldal adatai meg nem változnak.
• Ha egy kép átmenetileg nem rajzolható ki, az oldal a korábbi képét jeleníti meg, vagy a platformkártyát az eredeti állapotában. Semmi sem kerül tárolásra, egy későbbi kérés pedig újra megpróbálja futtatni a sablonodat.

Ellenőrizd az eredménytHivatkozás másolása

1. Témaszerkesztő. A Megosztási képek alatti workspace kirajzolja a piszkozat template-jét és az el nem mentett dizájnt egy valódi termékkel, kategóriával, bejegyzéssel vagy oldallal, vagy mintaadatokkal, ha a boltban még nincs ilyen. Válaszd ki az oldalt az Előnézet alapja alatt. A Biztonságos terület elsötétíti azt, amit az X levág.

2. Az oldal head része. Közzététel után nyisd meg a bolt egyik oldalát, és ellenőrizd az og:image taget:

   curl -s https://shop.example/products/linen-throw | grep -o '<meta property="og:image[^>]*>'

   A cím felépítése: https://shop.example/og/product/<id>.jpg?l=en&v=<version>. Nyisd meg egy böngészőben, hogy lásd a crawler által letöltött képet.

3. A hálózatok. A hálózat megőrzi a query-zett képet a már korábban látott linkekhez. A cím megváltozik, amikor a sablon, a dizájn vagy az oldal adatai módosulnak, így az új megosztás már az új képet veszi át. Régi link frissítéséhez használd a hálózat saját eszközét (Facebook Sharing Debugger, LinkedIn Post Inspector).

TovábbHivatkozás másolása

• Theme assetek és médiafájlok: képek és betűtípusok bundle-ölése a témával.
• Téma SDK referencia: az összes modul, amit egy téma importálhat.