Two weeks ago we wrote about the power of Swiftype’s custom <meta> tags and how they allow site owners to pass our web crawler, Swiftbot, information about their pages in a highly structured format optimized for our search algorithm. In this post, we will talk about how a heavily trafficked and large scale music website, Bia2, leveraged their website’s <meta> tags to create a stellar search experience for users on their mobile application in one of the most creative, yet simple mobile implementations we’ve seen so far.
Swiftype for Bia2.com
Bia2 came to Swiftype three months ago because they wanted to create a powerful search experience for users on their website and improve upon the weak search system they had in place. As the premier source for Iranian music and music videos, Bia2 has a massive content library of over 20,000 songs that site visitors primarily navigate to using the website’s search bar. To gain tighter control over how Swiftype indexed this library, Bia2’s development team added <meta> tags to tell Swiftbot exactly what information to gather from their pages (for more on the specifics of how this works, check out our <meta> tags tutorial and see and a screenshot of Bia2’s source code below).
After Swiftbot indexed Bia2’s content, the team went the extra mile and customized the look and feel of the search bar, adding a sectioned autocomplete dropdown with thumbnails. This created a vastly improved user experience, and CEO Amir Pakzadian observed a 40% increase in pageviews for their artist landing pages.
Despite this new and improved search experience for their website, Bia2’s mobile application continued to use an old method, which involved downloading an .xml file to the user’s phone and conducting the search locally on their device. This posed two major problems:
- Search results were weak, only producing exact text matches and not ranking results based on a scored relevancy, as an algorithm would.
- These results didn’t match the results for the same query on the website – results which Amir and his team had spent time carefully customizing in their Swiftype dashboard.
To eliminate these issues, Amir needed to figure out how to bring the same great search experience to Bia2’s mobile application users. The solution was quite creative, and demonstrates the value of using <meta> tags to create a highly structured data format for your search engine.
Front-end focus, back-end solution
Because Bia2 already had a mobile app with a search functionality, the solution was as simple as redirecting the app’s search bar from talking to their old search engine to instead speaking with the Swiftype search engine that powered their online site. Because the development team created great <meta> tags for his website, the only work they had to do was connect the pages in their mobile app to the Swiftype search results (which you can do easily using our mobile SDKs). According to Amir, “the implementation time was about four hours.”
With this new search experience for their mobile app, Amir was able to focus his energy on completely redesigning the look and feel of Bia2’s app. On Wednesday of last week, the app went live in the Apple store with several new features highlighted – search being a major one of them.
Now, users can search from any page and see dropdown results just like on the website. But perhaps the most important part of all of this, is that now search results match across mobile and web, and any customization that Amir does through the Swiftype dashboard will immediately be reflected in search results. Furthermore, now that searches are being performed through Bia2’s Swiftype search engine and not locally on individual phones, Amir and his team can now see analytics for all of their users across all devices.
What were the alternatives?
If Bia2 did not have Swiftype’s web crawler indexing their content and powering their search algorithm, translating their website search experience to their mobile app would have required months of development work to create a similar system on their end. At Swiftype, we’ve spent nearly two years building this out and creating a user-friendly interface that allows site owners to harness this power for their own site. As you’ve seen in this article, this powerful back-end infrastructure allows front-end developers to focus on creating awesome user design. For more about Swiftype’s custom <meta> tags, see our by clicking on the link below.