Εικόνες OG για Σελίδες Προϊόντων

Μια εικόνα OG για μια σελίδα προϊόντος είναι η προεπισκόπηση κοινωνικής δικτύωσης που εμφανίζει το όνομα του προϊόντος, την τιμή και μια μικρογραφία όταν η σελίδα κοινοποιείται. Η FastOG την αποδίδει δυναμικά σε ανάλυση 1200×630 και την αποθηκεύει στην άκρη του δικτύου (edge cache), έτσι ώστε κάθε προϊόν να αποκτά μια επώνυμη κάρτα χωρίς να χρειάζεται ένας σχεδιαστής να επεξεργαστεί κάποιο πρότυπο.

Γιατί οι σελίδες προϊόντων του ηλεκτρονικού εμπορίου χρειάζονται δυναμικές εικόνες OG

Όταν ένας πελάτης μοιράζεται έναν σύνδεσμο προϊόντος στο WhatsApp, το Slack ή το Discord, η κάρτα προεπισκόπησης είναι μια μίνι διαφήμιση. Μια κάρτα με το πραγματικό όνομα προϊόντος, την τιμή και την αξιολόγηση μετατρέπει πολύ καλύτερα από τη γενική εικόνα λογότυπου του καταστήματος. Η δημιουργία μιας μοναδικής κάρτας ανά προϊόν με το χέρι δεν κλιμακώνεται — γι' αυτό υπάρχει το API.

Πώς να δημιουργήσετε μια εικόνα OG προϊόντος

Υπογράψτε μια διεύθυνση URL με το template=ecommerce, τον τίτλο του προϊόντος, την τιμή, την αξιολόγηση και μια διεύθυνση URL εικόνας. Το API αποδίδει την κάρτα κατ' απαίτηση και την αποθηκεύει στην κρυφή μνήμη.

tsx

// Next.js — app/products/[slug]/page.tsx
export function generateMetadata({ params }) {
    const product = await getProduct(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "ecommerce",      // product card
                title: product.name,
                subtitle: product.tagline,  // optional
                price: product.price,       // e.g. "$29.99"
                rating: product.rating,     // e.g. "4.9"
                image: product.imageUrl,    // product photo
            })],
        },
    };
}

Πεδία προτύπου ηλεκτρονικού εμπορίου

Πεδίο	Τι εμφανίζει	Προαιρετικό;
`title`	Όνομα προϊόντος (επικεφαλίδα)	Υποχρεωτικό
`subtitle`	Σλόγκαν ή κατηγορία	Προαιρετικό
`price`	Ετικέτα τιμής, π.χ. `$29.99`	Προαιρετικό
`rating`	Βαθμολογία κριτικών, π.χ. `4.9`	Προαιρετικό
`image`	Εικόνα προϊόντος / URL εικόνας προφίλ	Προαιρετικό

Συχνές Ερωτήσεις

Φορτώνει το FastOG την εικόνα του προϊόντος μου στην κάρτα;

Ναι. Περάστε τη διεύθυνση URL της εικόνας του προϊόντος στην παράμετρο image και το πρότυπο ηλεκτρονικού εμπορίου την ενσωματώνει στην κάρτα.

Η τιμή εμφανίζεται ζωντανά και είναι επεξεργάσιμη;

Η τιμή είναι ό,τι περάσετε κατά τη στιγμή της υπογραφής. Αλλάξτε την τιμή → αλλάξτε τη διεύθυνση URL → μία νέα απόδοση.

Τι γίνεται με τις τιμές έκπτωσης / προσφοράς;

Περάστε την τρέχουσα τιμή ως price. Ορισμένοι πωλητές ανανεώνουν την κάρτα όταν αλλάζει η προσφορά, ώστε η κοινόχρηστη προεπισκόπηση να δείχνει τη ζωντανή τιμή.

Δοκιμάστε το δωρεάν — δεν απαιτείται εγγραφή

Προεπισκόπηση και δοκιμή δυναμικών εικόνων OG σε δευτερόλεπτα.

Ανοίξτε τον Δωρεάν Ελεγκτή Εικόνων OG

Θέμα