Richie.js 2.0.2 released 🚀 Explore
DocumentationSupported Rich ResultsEvent

Event (Event)

What is event?

Google’s event experience simplifies finding and attending events via Google Search and other Google products, such as Google Maps. This feature offers several advantages:

  • More interactive results: Your events can appear in Google’s event experience, showcasing your logo, event description, and more.
  • Increased discovery and conversion: Users can engage with your event posting in a new way, increasing the likelihood of visits to your site. For example, Eventbrite experienced a 100% increase in typical year-over-year growth in traffic from Google Search.

Kindly Refer Google Doc to know more about event rich result.

What are necessary data for event rich result?

1. Event name (rjs-event-[number]-name)

event.html
<div>
  <p class="rjs-event-1-name">The Age of AI</p>
</div>

2. Mode (rjs-event-[number]-mode)

đź’ˇ
Data attribute item

Three Modes are:

  • online - Online Only Event
  • offline - Offline Only Event
  • mixed - Hybrid or Online & Offline Mixed Event
event.html
<div>
  <p>
    Attendance Mode:
    <span class="rjs-event-1-mode" data-mode="online">Online</span>
  </p>
  <p>
    Attendance Mode:
    <span class="rjs-event-1-mode" data-mode="offline">Offline</span>
  </p>
  <p>
    Attendance Mode:
    <span class="rjs-event-1-mode" data-mode="mixed">Mixed</span>
  </p>
</div>

3. Start Date (rjs-event-[number]-from)

event.html
<div>
  <p>
    Starting Date: <span class="rjs-event-1-from">2024-02-26 05:23 PM</span>
  </p>
</div>

4. End Date (rjs-event-[number]-end)

event.html
<div>
  <p>Ending Date: <span class="rjs-event-1-end">2024-03-26 05:23 PM</span></p>
</div>

5. Status (rjs-event-[number]-sts)

Status values are:

  • postponed - Event Postponed
  • toonline - Event Moved to Online
  • cancelled - Event Cancelled
  • rescheduled - Event Rescheduled
  • scheduled - Event Scheduled
event.html
<div>
  <p>
    Event Status:
    <span class="rjs-event-1-sts" data-sts="scheduled">Scheduled</span>
  </p>
</div>

6. Images - Thumbnails (rjs-event-[number]-img)

event.html
<div>
  <!-- any number of img possible -->
  <img class="rjs-event-1-img" src="https://jdi.group/a.jpg" alt="" />
  <img
    class="rjs-event-1-img"
    src="https://neurosciexcenews.com/sd.webp"
    alt=""
  />
</div>

7. Description (rjs-event-[number]-desc)

event.html
<div>
  <p class="rjs-event-1-desc">
    <b>Explore the cutting-edge world of Deep Learning</b> at our AI event! Dive
    into the latest advancements, breakthroughs, and applications of neural
    networks and deep learning algorithms.
  </p>
</div>

8. Location (rjs-event-[number]-loc)

Two types:

  • Venue (Physical Location)
  • Virtual Location (Online Event)
event.html
<div>
  
  <section class="rjs-event-1-loc">
  			
    <p class="venue">The Grand Plaza</p>
    <!-- st for street -->
    <!-- any number of st can be created but 2 is good -->
    <p class="stl">90, MGR Nagar Street</p>
    <p class="stl">Public Office Road</p>
 
    <!-- city -->
    <p class="ct">Nagapattinam</p>
 
    <!-- state -->
    <p class="st">TamilNadu</p>
 
    <!-- pincode -->
    <p class="pc">611-001</p>
 
    <!-- country -->
    <p class="ctry">India</p>
 
  </section>
 
</div>

9. Performers (rjs-event-[number]-aname)

event.html
<div>
  <!-- any number of performers possible -->
  <p>
    Actor/Performer: <span class="rjs-event-1-aname">DEAN</span>,
    <span class="rjs-event-1-aname">SAM</span>
  </p>
</div>

10. Organisers (rjs-event-[number]-pname)

  • pnameP - Person type Organiser
  • pnameO - Organisation type Organiser
event.html
<div>
  <p>Organised By <span class="rjs-event-1-pnameP">JOHN</span></p>
 
  <!--With link OR without link-->
 
  <p>
    Organised By
    <a href="https://www.organisationpage.com" class="rjs-event-1-pnameO"
      >Cresteem</a
    >
  </p>
</div>

11. Price & Currency (rjs-event-[number]-cost)

đź’ˇ

Use data-currency="free" for free events, otherwise use a currency alpha-3 code.

event.html
<div>
  <p>
    Event Fee:
    <span class="rjs-event-1-cost" data-currency="free">FREE</span>
  </p>
 
  <!-- OR -->
 
  <p>
    Event Fee:
    <span class="rjs-event-1-cost" data-currency="inr">200 INR</span>
  </p>
</div>

12. Booking Link (rjs-event-[number]-rlink)

event.html
<div>
  <a class="rjs-event-1-rlink" href="https://www.rjs-eventsite.com/book-event"
    >Book Here</a
  >
</div>

Function and parameters

đź’ˇ
By default input file is overwriiten with result so destination is optional
This is only for API method. We prefer CLI method for keeping it simpler (refer - Working with API & CLI).
func_params.js
const richResultType = 'event';
const filePath = 'event.html';
const destination = 'dist/event.html'; /* optional */
 
richie([richResultType], filePath, destination);

Example of a Instance

event.html
<body>
  <!--  "1.online-event" -->
  <div>
    <p class="rjs-event-1-name">The Age of AI</p>
 
    <!-- starting date -->
    <p>
      Starting Date: <span class="rjs-event-1-from">2024-02-26 05:23 PM</span>
    </p>
 
    <!-- optional ending date -->
    <p>Ending Date: <span class="rjs-event-1-end">2024-03-26 05:23 PM</span></p>
 
    <!-- Event mode -->
    <p>
      Attendance Mode:
      <span class="rjs-event-1-mode" data-mode="online">Online</span>
    </p>
 
    <!-- event status -->
    <p>
      Event Status:
      <span class="rjs-event-1-sts" data-sts="scheduled">Scheduled</span>
    </p>
 
    <!-- location -->
    <section class="rjs-event-1-loc">
      <!-- online platform link -->
      <a
        class="vlurl"
        href="https://open.spotify.com/genre/0JQ5DArNBzkmxXHCqFLx2J"
        >Spotify Podcasts</a
      >
    </section>
 
    <!-- any number of img possible-->
    <img
      class="rjs-event-1-img"
      src="https://jdi.group/wp-content/uploads/2023/07/AI-Event-Banner_Article-1-1536x768.jpg"
      alt=""
    />
    <img
      class="rjs-event-1-img"
      src="https://neurosciencenews.com/files/2023/12/ai-life-prediction-neurosicencce.jpg.webp"
      alt=""
    />
 
    <!-- description -->
    <p class="rjs-event-1-desc">
      <b>Explore the cutting-edge world of Deep Learning</b> at our AI event!
      Dive<!-- reduced for brevity -->
    </p>
 
    <!-- offers -->
    <p>
      Event Fee: <span class="rjs-event-1-cost" data-currency="free">FREE</span>
    </p>
    <!-- booking link  -->
    <a
      class="rjs-event-1-rlink"
      href="https://www.yourjs-eventsite.com/book-event"
      >Book Here</a
    >
 
    <!--any number of performer possible-->
    <p>
      Actor/Performer: <span class="rjs-event-1-aname">DARSAN</span>,
      <span class="rjs-event-1-aname">DEAN</span>,
      <span class="rjs-event-1-aname">SAM</span>
    </p>
 
    <!-- organiser -->
    <p>
      Organised By
      <a href="https://www.organisationpage.com" class="rjs-event-1-pnameO"
        >Cresteem</a
      >
    </p>
  </div>
</body>

Output of a Instance

event.html
<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "Event",
    "name": "The Age of AI",
    "startDate": "2024-02-26T17:23:00+05:30",
    "endDate": "2024-03-26T17:23:00+05:30",
    "eventAttendanceMode": "OnlineEventAttendanceMode",
    "eventStatus": "EventScheduled",
    "location": [
      {
        "@type": "VirtualLocation",
        "url": "https://open.spotify.com/genre/0JQ5DArNBzkmxXHCqFLx2J"
      }
    ],
    "image": [
      "https://jdi.group/wp-content/uploads/2023/07/AI-Event-Banner_Article-1-1536x768.jpg",
      "https://neurosciencenews.com/files/2023/12/ai-life-prediction-neurosicencce.jpg.webp"
    ],
    "description": "Explore the cutting-edge world of Deep Learning at our AI event! Dive into the latest advancements, breakthroughs,<!-- reduced for brevity -->",
    "offers": {
      "@type": "Offer",
      "category": "Free",
      "price": 0,
      "priceCurrency": "INR",
      "url": "https://www.yourjs-eventsite.com/book-event",
      "validFrom": "2024-06-07T20:50:54.062Z"
    },
    "performer": {
      "@type": "PerformingGroup",
      "name": "DARSAN, DEAN and SAM"
    },
    "organizer": {
      "@type": "Organization",
      "name": "Cresteem",
      "url": "https://www.organisationpage.com"
    }
  }
]
</script>


Let’s see what’s next!

Restaurant & CarouselFAQ