The Maidenhead Zombie walk is an annual event in Maidenhead, now in its 4th year. Hundreds of people dress as zombies and march the streets, there is an after party, live bands and it is generally a fun family day out. The ‘Zombie Committee’ decided that they would like a better website to help drive awareness of the event and get better attendance on the day.
The brief was very loose
- No set design
- No set content
- Needs to work with existing social media
- Needs a contact email
We decided on a one-page responsive website. The aim is only to provide details of the event and get people to share the event with others as the ‘call to action’. They don’t need to be drawn into additional pages of a website – the only take-away information is when and where and a decision to attend. They are most likely to see the web-link via social media and want to share easily with friends. Many will use a mobile phone, so it must be mobile friendly. This also helps with search ranking and Google Search recognises this effort.
A url was selected and registered. We opted for a .org domain. The Zombie Walk is not a company or commercial enterprise; it is a charity event. It is registered on Facebook, Twitter etc as a 'non-profit organisation' and so .org fits in with this most closely. We also created an e-mail address @maidenheadzombiewalk.org to allow us to add a contact form and have it handle the e-mail as people make requests. For example, sponsors may come forward offering services … the contact form is useful to start that e-mail interaction + the zombie committee then have a formal e-mail address with which to reply.
Next was the social element. Apart from adding links to various social media presences with facebook buttons etc and having them point back to the website, we wanted to make sharing easier and more engaging. We added both a twitter card and open GL card to the header of the website.
Twitter Card Code
meta name="twitter:card" content="summary_large_image"
meta name="twitter:site" content="@MheadZombieWalk"
meta name="twitter:creator" content="@MheadZombieWalk"
meta name="twitter:title" content="Maidenhead Zombie Walk 2016"
meta name="twitter:description" content="Welcome zombies, to the online home of the Maidenhead Zombie Walk. Now in our 4th year, we are looking forward to striking fear into the hearts of the uninfected, this Halloween, in Maidenhead town centre."
meta name="twitter:image" content="http://www.maidenheadzombiewalk.org/assets/img/preview/zombiebanner.png"
You can see from the code that this allows us to force a description, an image, a title and a link to the website, all in a neat card. We picked an image that matched their facebook banner, as driving people to the facebook event and registering is important to the zombie committee. Now when anyone shares the url on twitter, it always makes the card. Put the url http://www.maidenheadzombiewalk.org/home.html into https://cards-dev.twitter.com/validator and you can see how Twitter will display a link to this site now.
A similar approach was taken with Facebook, LinkedIn, Google+ and many others that all use Open Graph to generate rich social media cards. Again, you can check things will be displayed correctly here. http://opengraphtester.com/test/ An important note with Facebook, is that you require an App Id to run Open Graph. You must create an app ID from the developer area of Facebook, before your code will work.
Telling Google about the event.
We also added an ld+json script at the bottom of the page that give search engines extra information about the site, so that they catalogue it and make it appear in all the right places. By putting the Zombie Walk url into Google’s markup validator, you can see the exact information we are giving to search engines and what the search engine will be told. See what Google sees. You can see Google will instantly know this is an event website, its name, when the event takes place, where for its mapping software etc … so it should give prominence nearer the event time and people local to the event in search results and make it fade away again just after the event … when we’ll gear it all up ready for 2017! You can compare this to our Red Kite Code website where we are instead informing Google that this website is about a local business. View what Google reads about Red Kite Code.
Next we added a robots.txt file and sitemap.xml file to help search engine bots navigate the site and an .htaccess file to aid caching to the site. Finally, we validated the site with Google and Bing, optimised the Google and Bing consoles for languages, regions, social media aliases etc and added Google Analytics so as to be able to help the organisers understand their web traffic for future planning.