كيفية إنشاء صور ديناميكية مفتوحة للرسم البياني باستخدام جداول بيانات Google

صورة الرسم البياني المفتوحة (صورة OG) هي الصورة التي يتم عرضها عند مشاركة أي من روابط موقع الويب الخاص بك على Facebook أو LinkedIn أو Twitter. يمكنك توفير عنوان URL العام للصورة في العلامات الوصفية لموقع الويب الخاص بك وسيتم اختيار موقع الوسائط الاجتماعية تلقائيًا من هناك.

 < head > < title > Digital Inspiration </ title > < meta property = " og:image " content = " https://www.labnol.org/og/default.png " /> </ head >

افتح صور الرسم البياني باستخدام محرك العرائس

يستخدم Github داخليًا مكتبة Google Puppeteer لإنشاء صور Open Graph ديناميكية. يتم إنشاء الصور على الفور عن طريق تغذية HTML مخصص في Puppeteer والذي يقوم بعد ذلك بإنشاء لقطة شاشة. يمكنك عرض عينة من صورة OG تم إنشاؤها بواسطة Github في هذه التغريدة.

تستخدم Vercel ، الشركة التي تقف وراء Next.js ، محرك العرائس أيضًا لمولد صور الرسم البياني المفتوح. يتم استخدام الكروم بدون رأس لعرض صفحة HTML ، ويتم التقاط لقطة شاشة للصفحة ويتم تخزين الملف مؤقتًا لتحسين الأداء.

قم بإنشاء صور رسم بياني مفتوح بدون محرك العرائس

تعد Puppeteer مكتبة رائعة (أستخدمها داخليًا لـ screnshot.guru) ولكنها تتطلب بعض المعرفة الفنية لنشر محرك العرائس كوظيفة سحابية. هناك أيضًا تكلفة مرتبطة بنشر Puppeteer على السحابة نظرًا لأنك ستدفع مقابل أي طلب يتم تقديمه للخدمة.

إذا كنت تبحث عن حل بدون رمز وبدون تكلفة وبدون محرك ، فيمكنك استخدام جداول بيانات Google لإنشاء صور Open Graph. هذا ما أستخدمه لإنشاء صور ديناميكية وفريدة من نوعها لكل صفحة من صفحات موقع الويب الخاص بي. يمكنك رؤية عينة من صورة OG في هذه التغريدة.

الفكرة مستوحاة من Document Studio. يمكنك إنشاء تصميم صورة في العروض التقديمية من Google ، واستبدال نص العنصر النائب في القالب بعنوان صفحة الويب الخاصة بك ، ثم إنشاء صورة لقطة شاشة للعرض التقديمي وحفظها في Google Drive.

للبدء ، قم بعمل نسخة من ورقة Google هذه في Google Drive. استبدل العناوين في العمود A بعناوين صفحاتك وامسح عمود URL الخاص بالصورة. انقر فوق الزر " Play " ، وأجاز البرنامج النصي وستلاحظ أن جدول البيانات يتم تحديثه على الفور باستخدام عناوين URL للصور لكل صفحة.

أضف المزيد من عناوين الصفحات في Google Sheet ، Play على زر التشغيل مرة أخرى وسيتم تحديث جدول البيانات بعناوين URL للصور للصفحات الجديدة فقط. هذا هو.

اختبر صور Open Graph الخاصة بك

بعد إضافة العلامات الوصفية لـ Open Graph إلى موقع الويب الخاص بك ، يمكنك اختبار صور Open Graph الخاصة بك باستخدام الأداة أدناه.

1. Cards-dev.twitter.com/validator - الصق عنوان URL لموقع الويب الخاص بك في حقل URL وانقر على زر Validate لمعرفة ما إذا كان Twitter قادرًا على عرض الصورة المقدمة في العلامات الوصفية لـ Open Graph. يمكنك أيضًا استخدام أداة التحقق هذه لمسح صورة OG من ذاكرة التخزين المؤقت لتويتر لأي صفحة.

2. developer.facebook.com/tools/debug/ - الصق عنوان URL لموقع الويب الخاص بك في حقل URL وانقر فوق الزر Debug لمعرفة ما إذا كان Facebook قادرًا على عرض الصورة المقدمة في علامات Open Graph meta الخاصة بك.

3. linkin.com/post-inspector/ - يمكن لأداة LinkedIn Post Inspector مساعدتك في تحديد كيفية ظهور صفحة الويب الخاصة بك عند مشاركتها على منصة LinkedIn. يمكنك أيضًا أن تطلب من LinkedIn إعادة مسح الصفحة إذا تم تغيير صورة OG المرتبطة.

كيف يعمل Open Graph Image Generator؟

داخل Google Sheet ، انتقل إلى قائمة الإضافات واختر Apps Script لعرض كود المصدر المستخدم لإنشاء صور Open Graph. يمكنك أيضًا إنشاء رسومات في Canva باستخدام أي من القوالب المتاحة ثم استيراد تصميمات Canva في العروض التقديمية من Google.

التطبيق مكتوب بلغة Google Apps Script. يقرأ عناوين المنشورات من Google Sheets ، وينشئ نسخة من العرض التقديمي لكل صف في الورقة ، وينشئ لقطة شاشة للشريحة ويضيفها إلى Google Drive.

 const FOLDER = 'Open Graph Images' ; const TEMPLATE_ID = '1QZ4mR6B36XEVyzJf-s8vq88SDnSRPiRDchJ71VM-cfU' ; const APP = { /* Create a folder in Google Drive for storing open graph images */ getFolder ( ) { if ( typeof this . folder === 'undefined' ) { const folders = DriveApp . getFoldersByName ( FOLDER ) ; this . folder = folders . hasNext ( ) ? folders . next ( ) : DriveApp . createFolder ( FOLDER ) ; } return this . folder ; } , /* Download the Slide thumbnail URL and save it to Google Drive */ getImageUrl ( contentUrl , title ) { const blob = UrlFetchApp . fetch ( contentUrl ) . getBlob ( ) ; const file = this . folder . createFile ( blob ) ; file . setName ( title ) ; return file . getUrl ( ) ; } , /* Make a temporary copy of the Google Slides template */ getTemplate ( title ) { const slideTemplate = DriveApp . getFileById ( TEMPLATE_ID ) ; const slideCopy = slideTemplate . makeCopy ( title , this . getFolder ( ) ) ; return slideCopy . getId ( ) ; } , /* Get the thumbnail URL of the Google Slides template */ getThumbnailUrl ( presentationId ) { const { slides : [ { objectId } ] = { } } = Slides . Presentations . get ( presentationId , { fields : 'slides/objectId' , } ) ; const data = Slides . Presentations . Pages . getThumbnail ( presentationId , objectId ) ; return data . contentUrl ; } , /* Replace the placeholder text with the title of the web page */ createImage ( title ) { const presentationId = this . getTemplate ( title ) ; Slides . Presentations . batchUpdate ( { requests : [ { replaceAllText : { containsText : { matchCase : false , text : '{{Title}}' } , replaceText : title , } , } , ] , } , presentationId ) ; const contentUrl = this . getThumbnailUrl ( presentationId ) ; const imageUrl = this . getImageUrl ( contentUrl , title ) ; /* Trash the presentation copy after the image is downloaded */ DriveApp . getFileById ( presentationId ) . setTrashed ( true ) ; return imageUrl ; } , /* Show job progress to the user */ toast ( title ) { SpreadsheetApp . getActiveSpreadsheet ( ) . toast ( '️ ' + title ) ; } , run ( ) { const sheet = SpreadsheetApp . getActiveSheet ( ) ; sheet . getDataRange ( ) . getDisplayValues ( ) . forEach ( ( [ title , url ] , index ) => { /* Only process rows that have a title */ if ( title && ! / ^http / . test ( url ) && index > 0 ) { const imageUrl = this . createImage ( title ) ; sheet . getRange ( index + 1 , 2 ) . setValue ( imageUrl ) ; this . toast ( title ) ; } } ) ; } , } ;