[{"data":1,"prerenderedAt":239},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-create-a-better-google-user-experience-with-structured-data-i18n-slugs":134,"language-blog-slug-en-create-a-better-google-user-experience-with-structured-data":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","create-a-better-google-user-experience-with-structured-data",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":143,"subtitle":79,"isArchived":147,"headerIllustration":148,"date":149,"authors":150,"introTitle":144,"items":159,"pivots":236,"relatedBlogPosts":237,"tags":238,"onMountedScript":153,"onUnmountedScript":153},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Create a better Google user experience with structured data","Using structured data helps Google better understand your website and present info in a user friendly way",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1623338977-structured-data-bas-cover.png",false,null,"2021-06-10T02:00:00.000+02:00",[151],{"name":152,"lastName":153,"slug":154,"image":155},"Bas","","bas",{"url":156,"alt":148,"width":157,"height":158},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,[160,164,168,178,181,185,190,193,197,205,209,212,215,222,225,232],{"__typename":161,"id":162,"title":153,"body":163},"TextSectionRecord","40046819","\u003Cp>I’ve received the confirmation email just moments after booking a ticket to Edinburgh. A nice summary of my flight details is provided in Gmail and when I check my Calendar an appointment is added with the booked flight. No more paperwork, checking different websites for data and long searches for emails. The world at my fingertips.\u003C\u002Fp>\n\u003Cp>The above is powered by structured data. Search engines like \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fguides\u002Fintro-structured-data\" target=\"_blank\" rel=\"noopener\">Google\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fwww.bing.com\u002Fwebmasters\u002Fhelp\u002Fmarking-up-your-site-with-structured-data-3a93e731\" target=\"_blank\" rel=\"noopener\">Bing\u003C\u002Fa> can create a better understanding of your content using this structured data.\u003C\u002Fp>",{"__typename":161,"id":165,"title":166,"body":167},"40046823","What is structured data?","\u003Cp>Structured data helps search engines classify human-readable content on a website using a predefined format. This predefined format is specified in a vocabulary, for example Schema.org and Open Graph. A vocabulary provides types to classify content with properties and descriptions. For example, in Schema.org, a \u003Ccode>Recipe\u003C\u002Fcode> type can have the property \u003Ccode>recipeIngredient\u003C\u002Fcode> with a text value. This way a search engine can understand that the recipe for mashed potatoes has ‘potatoes’ as an ingredient.\u003C\u002Fp>\n\u003Cp>With this knowledge, search engines can show the structured data as a rich result in their search results. Rich results are normal search results, but with additional data displayed like images, review stars or dates. Common rich results types include recipes, events, and reviews. Adding rich results won’t impact your Google ranking but they take up more space, are more eye-catching and have a higher click-through rate.\u003C\u002Fp>",{"__typename":169,"id":170,"image":171,"caption":173,"fullWidth":176,"captionPosition":177},"ImageRecord","176474065",{"url":172,"alt":173,"width":174,"height":175},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1621505309-kogyn62x.png","Difference between a rich search result for a recipe (top) and a normal search result (bottom)",1198,558,true,"left",{"__typename":161,"id":179,"title":153,"body":180},"40046849","\u003Cp>In order to implement structured data a vocabulary isn’t enough. You’ll need to write markup using a specific type of syntax to describe your content. With Schema.org this can be done with RDFa, MicroData and JSON-LD. Google recommends the usage of JSON-LD whenever possible.\u003C\u002Fp>",{"__typename":161,"id":182,"title":183,"body":184},"40047108"," The JSON-LD format for Google search","\u003Cp>JSON-LD follows the same structure as the normal JSON format. Add it using a script tag in the \u003Ccode><head>\u003C\u002Fcode> of the HTML page. The data provided in this script tag should relate to the content on the page. By following the guidelines on Schema.org and the \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fguides\u002Fsearch-gallery\" target=\"_blank\" rel=\"noopener\">documentation on Google Search\u003C\u002Fa> you can create the correct structure of JSON-LD that will enable Google to show a rich snippet of your page.\u003C\u002Fp>\n\u003Cp>So as an example let’s host a Meet-up at our office. We have a page on our website with the human-readable content, but to improve the readability for search engines we add the following JSON-LD data to our page:\u003C\u002Fp>",{"__typename":186,"id":187,"language":188,"body":189},"CodeBlockRecord","40047194","json","<script type=\"application\u002Fld+json\">\n  {\n    \"@context\": \"http:\u002F\u002Fschema.org\",\n    \"@type\": \"Event\",\n    \"location\": {\n      \"@type\": \"Place\",\n      \"address\": {\n        \"@type\": \"PostalAddress\",\n        \"streetAddress\": \"Rijnsburgstraat 9\",\n        \"addressLocality\": \"Amsterdam\",\n        \"postalCode\": \"1059 AT\",\n        \"addressCountry\": \"Nederland\",\n        \"addressRegion\": \"Noord-Holland\"\n      },\n      \"name\": \"De Voorhoede\"\n    },\n    \"name\": \"Frontend Forward - Amazing Meet-up\",\n    \"startDate\": \"2021-05-20T20:00\"\n  }\n<\u002Fscript>",{"__typename":161,"id":191,"title":153,"body":192},"40047267","\u003Cp>To help the search engine classify our page, \u003Ccode>@context\u003C\u002Fcode> and \u003Ccode>@type\u003C\u002Fcode> are provided. Based on these values, the page is categorised as an \u003Ca href=\"https:\u002F\u002Fschema.org\u002FEvent\" target=\"_blank\" rel=\"noopener\">Event\u003C\u002Fa> within the vocabulary of Schema.org. According to the reference for an Event, you can provide information using properties like \u003Ccode>location\u003C\u002Fcode> and \u003Ccode>startDate\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>Schema.org has a hierarchy in which types can inherit and share properties. In this example the \u003Ccode>name\u003C\u002Fcode> of the event is an attribute inherited from \u003Ca href=\"https:\u002F\u002Fschema.org\u002FThing\" target=\"_blank\" rel=\"noopener\">Thing\u003C\u002Fa>, which is a parent of Event.\u003C\u002Fp>\n\u003Cp>Since Schema.org is a vocabulary it has some requirements: every type has a specific list of properties. For example, the \u003Ccode>eventSchedule\u003C\u002Fcode> property can only be applied to an Event. Furthermore, every property can have only one type of value. For example, the property \u003Ccode>startDate\u003C\u002Fcode> can only have a value of an ISO date. Schema.org will not validate the JSON-LD you write; you need to test the code yourself.\u003C\u002Fp>",{"__typename":161,"id":194,"title":195,"body":196},"40047307"," Testing your code","\u003Cp>To test the requirements the \u003Ca href=\"https:\u002F\u002Fsearch.google.com\u002Ftest\u002Frich-results\" target=\"_blank\" rel=\"noopener\">Google Rich Result Test tool\u003C\u002Fa> can be used. With the Meet-up event example shown above, Google can understand the content that is on our page. Like the \u003Ccode>name\u003C\u002Fcode> of the event “Front-end Forward - Artificial intelligence Meet-up”, the \u003Ccode>startDate\u003C\u002Fcode> May, 20 at 20:00 and the \u003Ccode>location\u003C\u002Fcode> where the event will take place. When the site is live you can see how your rich search results look like via the \u003Ca href=\"https:\u002F\u002Fsearch.google.com\u002Fsearch-console\u002Fwelcome\" target=\"_blank\" rel=\"noopener\">Google Search Console\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>We also added the option to test your structured data in \u003Ca href=\"https:\u002F\u002Fheadsup.voorhoede.nl\u002F\" target=\"_blank\" rel=\"noopener\">Heads Up\u003C\u002Fa>. Heads Up is a website and \u003Ca href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fheads-up\u002Fajjdmakdoicbgmgoacfmlplnefljpcke\" target=\"_blank\" rel=\"noopener\">Chrome extension\u003C\u002Fa> we developed at De Voorhoede with which you can check the meta-data of your website, including general meta info, social media previews, and structured data.\u003C\u002Fp>\n\u003Cp>If we correctly implement this code, Google will display events in the search results like this:\u003C\u002Fp>",{"__typename":169,"id":198,"image":199,"caption":201,"fullWidth":176,"captionPosition":204},"40047312",{"url":200,"alt":201,"width":202,"height":203},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1621506980-eci7xcdq.png","Rich cards for events",1600,1090,"bottom",{"__typename":161,"id":206,"title":207,"body":208},"40047321"," Using structured data for Gmail","\u003Cp>When hosting events most of the time you have contact with the attendees by email. The content of those emails mostly include the location of the event, speakers and maybe some information about food or the venue. With \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fgmail\u002Fmarkup\u002Foverview\" target=\"_blank\" rel=\"noopener\">structured data in emails\u003C\u002Fa> we can make that information available across other Google products. Gmail, Google Calendar and the Google app can, like Google Search, process structured data.\u003C\u002Fp>",{"__typename":186,"id":210,"language":188,"body":211},"40047327","<script type=\"application\u002Fld+json\">\n  {\n    \"@context\": \"http:\u002F\u002Fschema.org\",\n    \"@type\": \"EventReservation\",\n    \"reservationNumber\": \"E123456789\",\n    \"reservationStatus\": \"http:\u002F\u002Fschema.org\u002FConfirmed\",\n    \"reservationFor\": {\n      \"@type\": \"Event\",\n      \"name\": \"Masterclass\",\n      \"url\": \"https:\u002F\u002Fwww.example.com\u002Fmasterclass\u002F\",\n      \"startDate\": \"2020-05-20T09:00\",\n      \"endDate\": \"2020-05-20T17:00\",\n      \"location\": {\n        \"@type\": \"Place\",\n        \"name\": \"De Voorhoede\",\n        \"address\": {\n          \"@type\": \"PostalAddress\",\n          \"streetAddress\": \"Rijsburgstraat 9\",\n          \"addressLocality\": \"Amsterdam\",\n          \"postalCode\": \"1059 AT\",\n          \"addressCountry\": \"Nederland\",\n          \"addressRegion\": \"Noord-Holland\"\n        }\n     }\n    },\n    \"underName\": {\n      \"@type\": \"Person\",\n      \"name\": \"Jane Doe\",\n      \"email\": \"post@voorhoede.nl\"\n    }\n  }\n<\u002Fscript>",{"__typename":161,"id":213,"title":153,"body":214},"40047333","\u003Cp>When setting up an Event email, the structured data should contain the \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fgmail\u002Fmarkup\u002Freference\u002Fevent-reservation\" target=\"_blank\" rel=\"noopener\">Event Reservation\u003C\u002Fa> data. This data is added in the \u003Ccode><head>\u003C\u002Fcode> of an HTML email, just like the structured data for web pages. To make use of this functionality your domain should be \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fgmail\u002Fmarkup\u002Fregistering-with-google\" target=\"_blank\" rel=\"noopener\">whitelisted\u003C\u002Fa> by Google.\u003C\u002Fp>\n\u003Cp>If you don’t want to wait to be whitelisted, you can already test your code with a \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fgmail\u002Fmarkup\u002Fapps-script-tutorial\" target=\"_blank\" rel=\"noopener\">Google script\u003C\u002Fa>, wh will send emails to your Gmail account. Or send an email containing the schema to yourself.\u003C\u002Fp>\n\u003Cp>You can validate your email with the \u003Ca href=\"https:\u002F\u002Fwww.google.com\u002Fwebmasters\u002Fmarkup-tester\u002Fu\u002F0\u002F\" target=\"_blank\" rel=\"noopener\">Email Markup Tester\u003C\u002Fa>. Debugging in the email client is near impossible: you won’t get any errors, it will just skip the JSON-LD markup.\u003C\u002Fp>\n\u003Cp>Adding the JSON-LD mark-up to an email makes sure the event will also be put in the Google App and Calendar of the attendee.\u003C\u002Fp>",{"__typename":169,"id":216,"image":217,"caption":219,"fullWidth":176,"captionPosition":177},"176474066",{"url":218,"alt":219,"width":220,"height":221},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1621506134-hymk2qpw.jpeg","The Meetup added to the Google app of the attendee",1080,1411,{"__typename":161,"id":223,"title":153,"body":224},"40047356","\u003Cp>There is way more to explore when it comes to the email markup for Google. It is also possible to add buttons with actions to the subject of your email, highlight flight information in emails or even highlight flights in Google Search. Because information is defined in JSON-LD, Google can integrate this information in different ways on their services.\u003C\u002Fp>",{"__typename":169,"id":226,"image":227,"caption":229,"fullWidth":176,"captionPosition":177},"176474067",{"url":228,"alt":229,"width":230,"height":231},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1621506174-b54pnna.png","When searching for \"my flights\" I will get results based on emails in my gmail account",1510,606,{"__typename":161,"id":233,"title":234,"body":235},"40047361","Conclusion","\u003Cp>As web-developers we can create a very rich environment for Google users by providing structured data to our sites and emails. By adding this small effort from our side we can have a huge impact on the user experience for our end-users. \u003C\u002Fp>",[],[],[],1776256150210]