נתונים מובנים עבור אתר מתכונים? אפשרי בהחלט.

התעלו על המתחרים שלכם והוסיפו נתונים מובנים עבור המתכונים באתר.

האם ברשותכם אתר המציע מתכונים לגולשים? אם כן, כנראה ואתם עושים שימוש בנתונים מובנים על מנת לסמן את המתכונים בכדי שיופיע בצורה בולטת בתוצאות החיפוש של גוגל. אך בשנה האחרונה גוגל ביצעו מספר שינויים שכנראה גורמים לאימפלמנטציה שביצעתם ללקות בחסר וייתכן כי אינכם מנצלים את המירב מאותם נתונים מובנים.

לא רק זה, גוגל אף הרחיבו את האפשרויות של נתונים מובנים עבור מתכונים בכך שהכניסו את ה Guidance לכל הסיפור, לא נדבר על זה בפוסט הנוכחי, אך בעיקרון הוא מאפשר ל Google Home להקריא את המתכונים שלכם בקול עבור הגולשים.

אז אם אתם מעוניינים שהמתכונים באתר שלכם יופיעו בקרוסלות, עם הצגה של זמן ההכנה של המתכון, עם כמות הביקורות והאנשים שאהבו מתכון זה, המשיכו לקרוא. הוספת נתונים מובנים הם חלק בלתי נפרד נכבד עבור קידום אתרי וורדפרס ואופטימיזציה למנועי חיפוש.

נתונים מובנים, מתכונים ו Google Home

לפני מעל לשנה, גוגל השיקו את Google Home המאפשר, בין היתר, להקריא הנחיות קוליות למתכונים. הנחיות אלו מספקות למשתמשים הוראות צעד אחר צעד לכיצד להכין מתכונים אלו כאשר הניווט הקולי בהנחיה בשליטתכם המלאה.

מאחר ויותר ויותר אנשים משתמשים ב Google Home בכל יום, גוגל החליטה לעדכן את הקווים המנחים להוספת מתכונים כנתונים מובנים וזאת על מנת לאפשר לאלו לתמוך בהנחיות קוליות. כך שבסיטואציה הנוכחית באפשרותכם לקבל יותר טראפיק ממקומות רבים יותר, וזאת מכיוון ומשתמשים יכולים כרגע לגלות את המתכונים שלכם בעזרת Google Assistant הקיים ב Google Home.

מבנה הנתונים המובנים המעודכן מאפשר למשתמשים לקבל יותר מידע על המתכונים שלכם וגורם כפי שציינו לטראפיק איכותי יותר וגדול יותר לאתר שלכם. בואו ניתן מבט כיצד זה עובד:

גם אם המצב בעברית הוא קצת שונה, ואולי בשלב הנוכחי אינו פעיל עבור אותן הוראות הכנה בעברית, הטמעה של מבנה הנתונים המעודכן עבור מתכונים יוביל לשיפור הנראות שלכם בתוצאות החיפוש של גוגל ולמספר קליקים גבוה יותר (CTR).

אז כדאי לכם להכין את המתכון בסרטון, הוא באמת טעים. בין אם כן ובין אם לא, נראה במדריך זה כיצד נכון להטמיע נתונים מובנים עבור אתר מתכונים וניתן מבט על מהו מבנה הנתונים ״החדש״ אותו גוגל ממליצה עבור אותם מתכונים. בתאבון!

אם אינכם יודעים מהי סכמה ומהם נתונים מובנים, תנו מבט בפוסט שנמצא בקישור המדבר בהרחבה על הנושא.

הוספת נתונים מובנים למתכונים

אם תתנו מבט ב Schema.org/Recipes, כנראה ותבהלו ותרצו לוותר על הרעיון. איפה בכלל מתחילים? ישנה כמות עצומה של אפשרויות כפי שאתם יכולים לראות. אך אלו כל התכונות שבאפשרותכם להוסיף ואינכם חייבים להוסיף את כולם. למעשה, גוגל דורשת רק מספר מתכונות אלו, אך ממליצה על יותר.

תכונות עבור מתכונים בהם חייבים להשתמש עבור גוגל:

  • @context – קבעו ל Schema.org.
  • @type – קבעו ל Recipe.
  • @Image – קבעו לכתובת URL או ל ImageObject.
  • @name – קבעו לשם המנה.

אלו התכונות שגוגל דורשת, אך אלו לא יובילו אתכם למקום אליו אתם רוצים להגיע. על ידי הצהרה של תכונות נוספות לגוגל, אתם מגדילים את הסיכוי שגוגל ״יקבלו״ את המתכון שלכם ויציגו אותו במעלה תוצאות החיפוש.

תכונות מתכונים מומלצות על ידי גוגל:

  • aggregateRating: הדירוג הממוצע של המתכון.
  • author: מי הכין את המתכון? יש להשתמש ב Schema.org/Person.
  • cookTime: הזמן שלוקח להכין את המתכון.
  • datePublished: מתי המתכון פורסם לראשונה.
  • description: תיאור המתכון.
  • keywords: מונחים שמתארים את המתכון.
  • nutrition.calories: מספר הקלוריות במתכון, השתמשו ב Schema.org/Energy.
  • prepTime: כמה זמן לוקח לבצע הכנות עבור המתכון?
  • recipeCategory: האם זו ארוחת בוקר, צהריים, ערב או משהו אחר?
  • recipeCuisine: מאיזה מטבח מגיע המתכון? ים תיכוני, צרפתי, אסיאתי וכדומה.
  • recipeIngredient: כל אחד מהמרכיבים הנדרשים להכנת המתכון (הכרחי עבור Google Home וקריאת המתכון בקול).
  • recipeInstructions: סמנו את השלבים עם HowToStep או HowToSection .
  • recipeYield: מספר הסועדים אליו המתכון מכוון.
  • review: ביקורות עבור המתכון.
  • totalTime: זמן ההכנה של המתכון.
  • video: וידאו המסביר כיצד להכין את המתכון אם קיים.

בכדי לראות כיצד זה מתורגם לקוד, בואו נראה דוגמה שנלקחה מגוגל, לכיצד נראה המתכון בפורמט JSON-LD. תגלו שהדברים די ברורים וניתנים להבנה יחסית בקלות:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": "1",
      "item": {
        "@type": "Recipe",
        "url": "http://example.com/big_list_of_recipes#cherry_pie",
        "name": "George's Cherry Pie",
        "image": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
        ],
        "author": {
          "@type": "Person",
          "name": "Mary Stone"
        },
        "datePublished": "2018-03-10",
        "description": "I learned this recipe as a youngster.",
        "prepTime": "PT20M",
        "cookTime": "PT45M",
        "totalTime": "PT65M",
        "keywords": "cake for a party, coffee",
        "recipeYield": "8 servings",
        "recipeCategory": "Dessert",
        "recipeCuisine": "American",
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": "4.2",
          "ratingCount": "71"
        },
        "nutrition": {
          "@type": "NutritionInformation",
          "calories": "270 calories"
        },
        "recipeIngredient": [
          "2 store-bought pie shells",
          "4 cups tart canned cherries",
          "1 cup sugar",
          "1/4 teaspoon almond extract",
          "3 tablespoons corn or tapioca starch"
        ],
        "recipeInstructions": [
          {
            "@type": "HowToStep",
            "text": "Defrost one pie crust"
          },
          {
            "@type": "HowToStep",
            "text": "Bake the second pie crust at 350ºF for 20 minutes, or until brown."
          },
          {
            "@type": "HowToStep",
            "text": "In a large bowl, combine sugar, cherries, starch, and almond extract."
          },
          {
            "@type": "HowToStep",
            "text": "Let the baked crust cool, pour in cherry filling."
          },
          {
            "@type": "HowToStep",
            "text": "Flatten the defrosted crust on a sheet of wax paper and cut into strips. Weave the strips over the top of the filled pie shell."
          },
          {
            "@type": "HowToStep",
            "text": "Cover the baked pie crust edge with tin foil to prevent additional browning."
          },
          {
            "@type": "HowToStep",
            "text": "Bake for 20 minutes, or until firm, and the top crust begins to brown."
          },
          {
            "@type": "HowToStep",
            "text": "Allow to cool."
          }
        ],
        "video": [
          {
            "name": "How to make George's famous cherry pie",
            "description": "Prepare and bake a great cherry pie",
            "thumbnailUrl": [
              "https://example.com/photos/1x1/photo.jpg",
              "https://example.com/photos/4x3/photo.jpg",
              "https://example.com/photos/16x9/photo.jpg"
            ],
            "contentUrl": "http://www.example.com/video789.mp4",
            "embedUrl": "http://www.example.com/videoplayer?video=789",
            "uploadDate": "2018-02-06T08:00:00+08:00",
            "duration": "PT22M12S",
            "interactionCount": "2347",
            "expires": "2020-02-07T08:00:00+08:00"
          }
        ]
      }
    },
    {
      "@type": "ListItem",
      "position": "2",
      "item": {
        "@context": "http://schema.org/",
        "@type": "Recipe",
        "url": "http://example.com/big_list_of_recipes#coffee_cake",
        "name": "Party Coffee Cake",
        "image": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
        ],
        "author": {
          "@type": "Person",
          "name": "Mary Stone"
        },
        "datePublished": "2018-03-10",
        "description": "This coffee cake is awesome and perfect for parties.",
        "prepTime": "PT20M",
        "cookTime": "PT30M",
        "totalTime": "PT50M",
        "keywords": "cake for a party, coffee",
        "recipeYield": "10 servings",
        "recipeCategory": "Dessert",
        "recipeCuisine": "American",
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": "5",
          "ratingCount": "18"
        },
        "nutrition": {
          "@type": "NutritionInformation",
          "calories": "270 calories"
        },
        "recipeIngredient": [
          "2 cups of flour",
          "3/4 cup white sugar",
          "2 teaspoons baking powder",
          "1/2 teaspoon salt",
          "1/2 cup butter",
          "2 eggs",
          "3/4 cup milk"
        ],
        "recipeInstructions": [
          {
            "@type": "HowToStep",
            "text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
          },
          {
            "@type": "HowToStep",
            "text": "In a large bowl, combine flour, sugar, baking powder, and salt."
          },
          {
            "@type": "HowToStep",
            "text": "Mix in the butter, eggs, and milk."
          },
          {
            "@type": "HowToStep",
            "text": "Spread into the prepared pan."
          },
          {
            "@type": "HowToStep",
            "text": "Bake for 30 to 35 minutes, or until firm."
          },
          {
            "@type": "HowToStep",
            "text": "Allow to cool."
          }
        ],
        "video": [
          {
            "name": "How to make George's famous cherry pie",
            "description": "Prepare and bake a great cherry pie",
            "thumbnailUrl": [
              "https://example.com/photos/1x1/photo.jpg",
              "https://example.com/photos/4x3/photo.jpg",
              "https://example.com/photos/16x9/photo.jpg"
            ],
            "contentUrl": "http://www.example.com/video456.mp4",
            "embedUrl": "http://www.example.com/videoplayer?video=456",
            "uploadDate": "2018-02-06T08:00:00+08:00",
            "duration": "PT15M22S",
            "interactionCount": "2347",
            "expires": "2020-02-05T08:00:00+08:00"
          }
        ]
      }
    }
  ]
}
</script>

קוד קצת ארוך ומייגע עבור מתכון האמת, אך זכרו כי ברמת הפיתוח יש צורך להטמיעו פעם אחת בלבד. את התוכן כמובן שיש צורך להכניס עבור כל מתכון ומתכון.

הוספת נתונים מובנים למתכון באתרי וורדפרס

הנתונים עצמם  מגיעים בצורה דינמית ברוב המקרים, ואין זה משנה באיזה CMS אתם משתמשים – בין אם וורדפרס, ג׳ומלה או כל מערכת לניהול תוכן שעולה על דעתכם.

אך אם אתם משתמשים בוורדפרס, כנראה ויש לכם  Custom Post Type ייחודי עבור מתכונים וכמובן שלו שדות מטא כלשהם המכילים את המידע עבור כל מתכון. בין אם אתם משתמשים ב ACF, CMB2 או כל דרך אחרת להוסיף שדות מטא, עליכם לקרוא למידע מאותם שדות ולהכניסו דינמית לאותו JSON-LD.

ניתן לראות דוגמאות כיצד לבצע זאת במדריך הוספת סכמה ונתונים מובנים באתרי וורדפרס. אך ברמת טירגוט ה  CPT, נקרא לו  recipe לצורך הדוגמה, ההוספה של אותו JSON-LD תתבצע בסגנון הבא:

<?php

function json_ld_recipe() {

    // Schema.org JSON for Recipes

    // Only on single recipe CPT
    if ( is_singular('recipe') ) {

        // Open script
        $html = '<script type="application/ld+json">';

        
        //****** HERE SHOULD EXISTS YOUR JSON-LD CONTENT ******//
        
        
        // Close script
        $html .= '</script>';

        echo $html;
    }
}
add_action('wp_head', 'json_ld_recipe');

אם סיימתם להוסיף את אותם נתונים מובנים למתכונים באתר שלכם, נכון יהיה לבדוק את התקינות שלהם בעזרת Google Structured Markup Tool, וזאת בכדי לוודא שגוגל מזהה את כל הנתונים כראוי.

הכלי יספק לכם מידע חיוני במידה וישנם שגיאות, וברוב המקרים ישנם שגיאות בפעם הראשונה לאחר הטמעה. התוצאה שלכם בבדיקה אמורה להראות בסגנון הבא:

recipes structured data testing tool

לסיכום

תהליך הוספת נתונים מובנים עבור מתכונים ברמת הקוד הוא תהליך חד פעמי. ברגע שתבצעו תהליך זה כראוי, תוכלו להתעסק אך ורק בלספק מתכונים טעימים וכמובן להכניס את המידע הרלוונטי עבור כל מתכון.

אם תעשו זאת, הסיכוי כי גוגל יציגו את תוצאות האתר שלכם כ Rich Snippets או Rich Cards גבוהים יותר. המתכונים שלכם יבלטו בתוצאות החיפוש וימשכו את הקליקים שכולנו רודפים אחריהם מידי המתחרים שלכם. אז למה אתם מחכים?

רועי יוסף
רועי יוסף

מפתח וורדפרס, מאמין ביצירת הזדמנויות לעסקים קטנים, סטארטאפים נועזים ואנשים עצמאים לשנות את העולם. אוהב טיפוגרפיה, צבעים וכל מה שבינהם ומכוון לספק אתרי וורדפרס עם ביצועים גבוהים, תמיכה בכל הדפדפנים, בעלי קוד ולידי, סמנטי ונקי.

2תגובות...
  • אורי כהן 18 בדצמבר 2018, 9:41

    אחלה פוסט! תוכל להרחיב על ההכנסה הדינמית של השדות מ ACF? האם יש צורך לתת להם את השמות שהסכמה דורשת, לדוגמה: recipeIngredient?

    • רועי יוסף 18 בדצמבר 2018, 9:47

      הדינמיות מתבטאת רק עבור התוכן בכל אחת מהתכונות, כך ש recipeIngredient, recipeInstructions הם קבועים וכתובים ברמת הקוד, אך התוכן שלהם מגיע דינמית – בין אם מ ACF או בכל דרך אחרת. זאת מכיוון וזהו התוכן שבעל האתר מכניס בהתאם לכל מתכון.

      לצורך הדוגמה, התכן היחיד שיהיה דינמי בהקשר של התכונה recipeIngredient הוא:

      "2 cups of flour",
      "3/4 cup white sugar",
      "2 teaspoons baking powder",
      "1/2 teaspoon salt",
      "1/2 cup butter",
      "2 eggs",
      "3/4 cup milk"

השאירו תגובה

פעימות
Up!