Richie JS version 1.1.4 🚀

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 (opens in a new tab) to know more about event rich result.

What are necessary data for event rich result?

1. Event name

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

2. 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

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

4. End Date

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

5. Status

Status data values are:

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

6. Images - Thumbnails

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

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.<!-- reduce for brevity -->
  </p>
 
</div>

8. Location

Two type of location are,

  • venue - Physical Location (Offline Event)
  • vlurl - 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. Performer(s)

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

10. Organiser(s)

  • 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

đź’ˇ
Pass data as free only if event entry is free otherwise pass 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 (Reservation) link

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!