Does anyone have an example of a page marked up for schema.org?

I’m looking to markup our events so the data is structured and easier for google, etc. to be able to interpret. Anyone have a working example they could share? Thanks!

1 Like

Have you used Google’s Structured Data Markup Tool?

https://support.google.com/webmasters/answer/3069489?hl=en

Here’s an example for one of your events. Once you’ve highlighted the appropriate areas it will give you a strucutred format as an example.

<!-- JSON-LD markup generated by Google Structured Data Markup Helper. -->
<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "Meetaway: UX Designers helping UX Designers",
  "startDate" : "2019-05-28T18:00",
  "image" : "https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Fd29%2Ff1524430809468x515987419057637440%2Fimage.png?w=1024&h=512&auto=compress&fit=max",
  "description" : "This event is exclusively for UX Designers.  This is your chance to connect with other UX Designers to help one another build better products and user experiences as well as make more informed career decisions. If you&#39;re a UX Designer and want to help other UX Designers or need some help yourself, then this event is for you. <STRONG>RSVP today!</STRONG></DIV><DIV><BR/></DIV><DIV>I&#39;m running this event online, over Meetaway, so we can bring UX Designers together from around the country.  We&#39;ll break attendees out for a handful of 1:1 conversations over webcam.  You&#39;ll be able to choose who you meet, and after each conversation, you&#39;ll automatically rotate to the next one. You just check in to the event and Meetaway will handle the rest.<BR/><BR/></DIV><DIV>Additionally, you&#39;ll want to join the event on a laptop or desktop with Chrome or Firefox. Meetaway does not support mobile devices because having attendees on a laptop or desktop results in a better overall experience for everyone",
  "url" : "https://meetaway.com/event/1557884066475x591875808174800900",
  "offers" : {
    "@type" : "Offer",
    "price" : "Free"
  }
}
</script>
1 Like

Thanks @Kfawcett! So, this just goes in the header, I assume?

Yes, sir – see highlighted below. More details are also available here: https://developers.google.com/search/docs/data-types/event

image

1 Like

Also make sure to add all required fields like “location”. I couldn’t find that on the page, but if you read the docs about events, it’s required.

Yeah, will do. We don’t have physical locations so will add something like “online” or “meet over webcam.” Thanks again.

Unfortunately, Bubble’s header section only allows for a limited set of logic and queries (I suspect for page load performance reasons) and, as such, there’s no way to hide this script for private events that we don’t want to be displayed publicly.

Yes. you just need a script in the header to implement this. I have it implemented for a Recipe Structured data schema.

For private events, you would anyways have some form of restrictions on who can see the event details, and if so, my guess is, it wouldn’t make much of a difference if there is a schema markup or not. You could just have it.

@paritosh.mehta19, we often handle private events by enabling anyone to register for them who has the link (which makes it easy for other organizers to invite people however they want). This is the same way most event sites handle it. As such, we don’t want the link to be published publicly by Google.

Looks like it’s okay to post it in the body so I’ll probably put it towards the bottom of the page in an HTML element.

Source: https://stackoverflow.com/questions/28687653/schema-org-json-ld-where-to-place

Thanks for your help.

That should work. Moreover, you could put the HTML in a group that is loaded only when its a public event. This way you wouldn’t load it for a private event.

1 Like

@sridharan.s might want to validate that Google can see it here: https://search.google.com/structured-data/testing-tool/u/0/

1 Like

I picked this project back up today and can’t get google to be able to read the content with the html element. Additionally, this same content isn’t visible when I click “view source.” Any idea what could be going on?

Bubble hides the HTML in JS so it’s a little difficult to view using “view source”. You could do “inspect element” instead.

This shouldn’t cause issues with Google’s crawlers.

What do you mean by HTML element?

I’m looking to add the schema.org markup to the body of a page. It doesn’t seem like google can read it when I post that in an HTML element like so:

Do you have the CSS Tools plugin? How about trying an “Add/Edit Head Tags” action on Page load.

image

image

1 Like

Will give that a shot. Great idea!

This topic was automatically closed after 70 days. New replies are no longer allowed.