In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

How to Get Gatsby to Work with Drupal: Building a Gatsby Site with a Decoupled Drupal Back-End

How to Get Gatsby to Work with Drupal: Building a Gatsby Site with a Decoupled Drupal Back-End

by RADU SIMILEANU on Aug 13 2018

Just imagine: putting together the powerful UI creation tools of a static site generator — more of a modern front-end framework rather —  built for high speed, like Gatsby.js, with Drupal 8's content modeling and access system! Putting their powers together into a blazing-fast website! But how to get Gatsby to work with Drupal?

How do you build a plugin that fetches data from API-first Drupal? In short: a static, conveniently simple, yet robust Gatsby site powered by a powerful, decoupled Drupal back-end?

You've got the questions, we've got the answers...

And we've grouped all our answers to your questions regarding “API-first and decoupled Drupal in connection with Gatsby” in a straightforward 4-step tutorial. One on building a high-speed Gatsby website backed by a versatile headless Drupal CMS.

Shall we dig in?

1. But What Is Gatsby.js More Precisely?

The standard, rather rigid definition would be:

“It is a GraphQL-fueled, React-based static site generator.”

Now if the words “static site generator” just make you... cringe, here's a more nuanced definition for you:

“Gatsby's more of a modern front-end framework —  one pulling together the best parts of GraphQL, React, webpack, react-router — built with the developer experience in mind.”

In short: it's a static site that this “more than just a static site generator” helps you build, leveraging its out-of-the-box front-end tools. A website geared to reach fast page loads while pulling data from a decoupled Drupal CMS.

And there are 2 basic steps for getting started with Gatsby. You simply write your site's code structure and let Gatsby handle the rest:

  1. turn it into a directory with a single HTML file
  2. … along with all your static assets


2. 3 Reasons Why You'd Want to Use Gatsby

… instead of Jekyll, your webpack config or create-react-app.

a. Because of the richness of the Gatsby ecosystem

With rich documentation at hand and backed by an already large community of starters, you'll get your Gatsby site up and running in no time.

b. Because it leverages GraphQL' power to build its data layer.

And this is one of those heavy-weighting reasons for using Gatsby over other competing alternatives:

Gatbsy's built to fetch data from... pretty much anywhere — your CMS of choice, Markdown, third-party APIs, Markdown — using “source” plugins. When creating its data layer, it relies on GraphQL, which builds an internal server of all this pulled data.

In short: when questioning yourself “how to get Gatsby to work with Drupal”, do keep in mind that in your future Gatsby & decoupled Drupal setup data gets queried from the same place, in the same way, via GraphQL.

c. Because it's built for high speed.

And this is one of Gatsby's hardest-to-resist-to advantage:

It's just... fast.

And that gets reflected in your final Gatsby & decoupled Drupal site while bubbling up to the user experience, as well.

Summing up, these are the 3 strongest reasons why you would be tempted to use Gatsby with Drupal CMS. 

I'm not going to engage in dynamic sites vs static sites debate now. The internet's already overcrowded with such comparisons.

I'll just end this “pledge” on using Gatsby with a non-debatable statement:

Since a static site generator pre-generates the pages of your website, scales of performance vs maintenance costs gets unbalanced. And guess which one's going up and which one down!

3. And Why Would Pair Gatsby with Drupal?

If there are strong reasons why you should be getting started with Gatsby, why is there any need to consider decoupled Drupal CMS for its back-end?

Because static site generators don't “care” much for the authoring experience. Content editors have to get themselves tangled up in Markdown for creating content.

True story!

And this is where powerful CMSs, such as Drupal, step in, “luring” you with their:

  • WYSIWYG editors
  • content types 
  • content modeling capabilities
  • access workflow capabilities

… to make your content team's lives easier!

And now your “How to get Gatsby to work with Drupal” dilemma turns into a new legitimate one:

How to make your Gatsby website cope with a decoupled Drupal setup without adding the “dread” of a database and web server to the equation? 2 elements that “pave the path” for performance and security issues...

Well, this is precisely what this “decoupling Drupal with Gatsby scenario means to avoid:

  • you'll get to host your Drupal CMS in-house
  • … and thus take full advantage of the robustness and versatility of a decoupled Drupal CMS back-end
  • your Gatsby website will fetch data from its Drupal back-end and generate content “the static way” (which translates into “incredibility fast page loads”)

4. How to Get Gatsby to Work with Drupal More Precisely

Or simply put: how to pull data/content from Drupal into your Gatsby website?

Here's a straightforward tutorial in 4 steps on how to integrate Drupal with Gatsby:

4.1. First, Build Your Drupal Server 

Assuming that you have a Drupal 8 website installed, the very first step to take is to:

a. Create a new content type 

For this exercise, it's a blog — including all its blog posts — that we'll try to transfer from Drupal to Gatsby. So, we'll name our content type: “Blog”.

It will include 3 basic fields:

  • title
  • body
  • image

Just navigate to Home>Administration>Structure>Content Types.

b. Turn Drupal into an API Server 

And there are 2 key modules that you'll need to install:

  1. jsonapi_extras: for gaining more control over the API (to disable resources, to change the default endpoint, to enhance field output etc.)
  2.  jsonapi, which will turn your Drupal website into an API server (one having a default endpoint)

c. Grant Anonymous User Permission to Access the JSON API resource list

If you overlook this step, you'll end up with an “Error 406” message, which will just sabotage your whole “decoupling Drupal with Gatsby” mission.

d. Check How Your Drupal API Server Works 

You can do this by navigating to http://[your-site]/jsonapi logged in as an Anonymous user.

If the page that you'll get displays all the information regarding your API server, then you'll know you're on the right track.

4.2. Then, Create a New Gatsby Site

But before you jump to building your new static website, check whether you have npm and node installed on your PC. 

How? By entering “npm  -v” and “node  -v” into your terminal.

Next, you'll need to install Gatsby's CLI:

npm install --global gatsby-cli

Then, just build and get your Gatsby site up and running.

Note: by default, it will be accessible at localhost:8000.

How to Get Gatsby to Work with Drupal: building a new Gatsby site

4.3. Decouple Drupal with Gatsby: Pulling Data from the API Server

a. Set up the (/blog) page

Solving your “How to get Gatsby to work with Drupal”  type of dilemma starts with... the creation of a new page on your Gatsby website.

And is as simple as... setting up a new JS file.

Note: all your Gatsby pages will get stored under /src/pages.

Now here are the basic steps to take:

  1. create the blog.js in /src/pages
  2. then add this code: import React from "react" const BlogPage = () => ( <div> <h1>Latest from our bog</h1> </div> ) export default BlogPage 

Voila! You've just created a new page at /blog.

b. Pull Content from the Drupal 8 site using GraphQL

The “gatsby-source-drupal” plugin, to be more specific.

It's this source plugin that will be “in charge” with all the data (images here included) pulling from decoupled Drupal back-end and pushing into your Gatsby site.

Note: do keep in mind that, in this case, the JSON API module plays a crucial role.

And here's how you install your “power” plugin:

// in your blog.gatsby folder npm install --save gatsby-source-drupal 

Next, just configure your newly installed plugin:

// In gatsby-config.js plugins: [ ... { resolve: 'gatsby-source-drupal', options: { baseUrl: 'https://goo.gl/Cc5Jd3 apiBase: 'jsonapi', // endpoint of Drupal server }, } ], 


Tada! Now your site should be functioning properly.

If... not quite, here are the causes of the 2 most common error messages that you could get:

  • “405 error”, check whether the jsonapi_extras module is enabled
  • “ 406 error”, have a closer look at the permission on your Drupal site

c. Configure GraphQL to Pull Specific Pieces of Content from Drupal

In other words: to query all the “blog” nodes from Drupal and request specific data from the API server.

Another strong reason for using Drupal CMS with Gatsby is that the latter provides an in-browser tool for testing GraphQL queries names, for writing and validating them. You can access it at localhost:[port]/___graphql, whereas in our particular case here at: localhost:8000/___graphql.

Now, as you're solving this “How to get Gatsby to work with Drupal” type of puzzle, just try to query all the blog nodes.

Next, navigate back to your blog.js file and run this query:

export const query = graphql` query allNodeBlog { allNodeBlog { edges { node { id title body { value format processed summary } } } } } ` 


Then, update your const BlogPage so that it should display the body, content, and title:

const BlogPage = ({data}) => ( <div> <h1>Latest from our blog</h1> { data.allNodeBlog.edges.map(({ node }) => ( <div> <h3>{ node.title }</h3> <div dangerouslySetInnerHTML={{ __html: node.body.value }} /> </div> ))} </div> ) 


Next, save your file and... “jump for joy” at the sight of the result:

All your blog posts, nicely displayed, pulled from Drupal and published on your Gatsby site!

4.3. Finally, Just Go Ahead and Publish Your New Gatsby Site

And here you are now, ready to carry out the last task of your “How to get Gatsby to work with Drupal” kind of “mission”. 

This final task is no more than a command that will get your Gatsby website running:

gatsby build 

Next, just run through your /public folder to see the “fruits of your work”.

At this point, all there's left for you to do is to copy/push content in /public to the server and... deploy your new website using Gatsby with Drupal CMS.

The END! This is how you do it: how you use Gatsby.js in a decoupled Drupal setup so you can benefit both from:

  1. a modern static site generator's robustness and high performance, built with developer experience in mind 
  2. a powerful CMS's content managing capabilities, built with the editorial experience in mind 
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Top 10 Drupal Websites in Australia: From the Most Impressive to the Most Visited Ones
They're visually-appealing, highly popular, built on top of robust structures, so that they should "cope with" with huge amounts of traffic and content... These are but some of the things that the top 10 Drupal websites in Australia have in common. But which are they, more precisely? Australia's finest examples of websites using Drupal? We've done our research and put together a 10 best list for you. Let's dive right into it:   1. Australian Nuclear Science and Technology Organisation(ANSTO)   "Australia's research and development organization, and the center of Australian nuclear expertise..." (source: directory.gov.au) And the presentation could go on with other superlatives to "wow" you with:   Australia's most important science infrastructure (one of) Australia's largest public research organizations it sums up more than 1000 experts that use nuclear techniques to find the answer to various medical, environmental, and industrial challenges   A significant content load? A large team of content editors in need of the most robust tools to streamline their content management workflow with? The web project had Drupal 8 written all over it... And it quickly became one of the top 10 Drupal websites in Australia. Why Drupal? Because Drupal provides the best editing experience. Content managers are free to build new custom pages on their own, by just selecting and assembling pre-designed blocks. Not to mention that the "component-based" approach to design ensures consistency throughout the website and, implicitly... the best user experience, as well.    2. University of Technology, Sidney The University of Technology Sidney (UTS), Australia's #1 university and the 10th best one in the world, also has its website running on Drupal. Drupal is the platform that powers a lot of higher education websites worldwide, so... no surprise here, right? The reasons why UTS chose Drupal are obvious:   their multi-site structure incorporates no less than 150 UTS sub-sites the "cluster" of mini-sites needed a central content hub and a unified platform the internal content team needed enough freedom and flexibility to create, edit, and publish content across the entire network of sub-sites they needed to integrate lots of third-party systems (e.g. systems sourcing course information)    In short:   Drupal makes the perfect choice for multi-site setups it integrates seamlessly with third-party apps it provides the best editorial experience   3. The Australian Government       Undoubtedly one of the top 10 Drupal websites in Australia.  "The Government of Australia is standardizing on Drupal for hundreds of government departments and agencies across Australia, starting with the country’s homepage. Drupal enhances digital services to millions of citizens." (source: Drupal.org)   Why Drupal? For multiple reasons:   Drupal's ideal for multi-site architectures Drupal provides a granular permission system it integrates with lots of third-party services and solutions (payment systems, citizen service centers, various "latest news" sources)  it's one of the most secure CMS platforms: Drupal has its own dedicated Security Team and a foolproof process for monitoring, identifying, and publishing any security issues it's flexible, giving unmatched freedom to content editors and website admins: anyone from the internal team can update content on the website quick and easy Source: Drupal.org   4. Bunjil Place     The "home of arts and entertainment in the City of Casey" is Drupal-powered.  And it's probably one of the most visually impressive examples of Drupal websites from Australia. A high-trafficked website, that "bids on" Drupal 8 to provide an interactive user experience. Source: PreviousNext.com Now, if we were to list just some of the strongest reasons why Drupal was the best option for this Australian website:   the diversified content hosted on the website (text, video, eye-catching images), that falls into multiple sections and subsections the need for a new responsive design the need to incorporate some powerful user-oriented functionalities (e.g. visitors can easily book spaces in the palace for their future events)   Drupal was the only choice here... 5. The Australian Drupal's already famous for being the best CMS solution for news websites. And the CMS platform is behind the online presence of "The Australian" — Australia's national news brand — as well. A high-trafficked, content-packed website, with content that needs to be updated on the fly, on a regular basis.  They couldn't have opted for another platform than Drupal... 6. Australian Conservation Foundation, One of the Top 10 Drupal Websites in Australia   Australia's national environment organization — over 600,000 people — has its website running on Drupal. It's a campaign-driven site, one of the most popular Drupal-based websites in Australia, that leverages the CMS platform's top features to:   manage all their content workflows with great ease engage their member database and anyone willing to address urgent environmental problems via social networking, donation processing, event management, analytics, fundraising   A website that needed to withstand high amounts of traffic and to support complex content workflows: Drupal was the most suitable CMS solution.   7. Australian War Memorial "The Memorial's purpose is to commemorate the sacrifice of those Australians who have died in war or on operational service and those who have served our nation in times of conflict." (source: awm.gov.au) One of the top 10 Drupal websites in Australia that turned this CMS platform into a reliable publishing tool for all the historians, researchers, and designers accessing it. We're talking here about a content-heavy website, hosting content that ranges from:   war-related material to extensive archive to a database of unique collections of film footage, artworks, sound recordings to articles on Australia's military history   And where there's rich and varied content, that needs to be handled with ease by various internal teams, there's Drupal, as well. Drupal with its:   robust inline content creation and editing tools sophisticated access control system   8. Charles Darwin University  One of Australia's public universities and one of the world's most reputed universities (among the top 2% universities on the globe) has its website running on Drupal. And for all the self-evident reasons:   they needed to provide internal users with the best experience: Drupal enables content editors to create their custom course pages by simply putting together pre-built components they also needed to provide an intuitive search experience to all the external users: Drupal makes it easy for students to find, review courses, and sign up   9. International Business Times Australia   The Australian version of this digital news publication is built on Drupal. But is it of any surprise that the go-to source of financial news in Australia has chosen this CMS platform to build its online presence on? After all:   news publications are Drupal's "specialty" Drupal's already famed for powering some of the most content-intensive websites in the world  Drupal's gained a reputation for being the CMS that provides the best content editing experience: the internal team at International Business Times Australia can create, update, and publish new content on the go   10. Car News Australia       One of the top 10 Drupal websites in Australia, that stands out from the crowd as a high-trafficked one. Its complex content ecosystem has turned Drupal into the Carsguide team's only option. The site's an intricate network of 7 different sections — "buy + sell", "reviews", "news", "advice"... — that unfold, each, into "clusters" of multiple sub-sections. A content network that called for a CMS with particularly powerful content creation and editing features. A content-rich architecture that's now powered by Drupal.   The END! We're curious now: what other famous brands are on your own top 10 Drupal websites in Australia? Photo by Iván Lojko on Unsplash  ... Read more
Adriana Cacoveanu / Apr 03'2020
Drupal Layout Builder vs Gutenberg: How Do You Know Which Page Builder’s Right for You? 
Drupal Layout Builder vs Gutenberg: which of these 2 next-generation site-building tools to use to create your page layouts?  Or, better said, to empower your content editors to design great-looking pages on their own.  In order to help you make an informed decision, I've made an honest “Layout Builder modules vs Gutenberg editor module” comparison.  Therefore, in this post you'll find your answers to the following questions:    What issues with the editing experience in Drupal do these 2 new page layout builders come to address? What is the Gutenberg Editor? What are Drupal Gutenberg's main strengths? What are its limitations? What is the Layout Builder for Drupal? What are the Drupal Layout Builder's main strengths? What are its weaknesses? When would you use one Drupal page builder over the other?    1. Drupal Layout Builder vs Gutenberg: What Limitations Do They Address?  Or, to put it this way: what makes a good content editing experience?  Here are some of the editors' main requirements:    to be easy to use (with an intuitive drag and drop interface) to enable them to create custom page layouts on the fly, with zero CSS or HTML knowledge to be ideally flexible, enabling them to adjust the pages to their needs    Now, if we put editors' requirements against the "reality" of the editing experience in Drupal, here are the limitations we can identify:    it doesn't provide a decent level of visual design it compromises branding for flexibility or the other way around it requires some HTML experience it doesn't go beyond the level of a basic WYSIWYG editor it doesn't allow them to design fully customed page layouts it doesn't provide a 100% intuitive user interface it still makes editors dependant on the site builders/Drupal developers in their teams And these are precisely the problems that these 2 Drupal page builders "promise" to solve.    2. Introducing: The Gutenberg Drupal 8 Module   "Ever since the “Gutenberg” editor was released for WordPress and gained popularity we’ve seen a surge of “Easy to use” drag and drop interfaces for various CMSes."  (source: codekoalas.com) The Gutenberg Editor module is no more than WordPress's layout system integrated with Drupal.  What sets it apart from the other tools for creating page layouts in Drupal?  Its block-based approach.  Creating content in Drupal becomes a matter of selecting and assembling multiple blocks.  Each block stands for an individual piece of content: a separate block for a button, another separate block for an image, another one for a column, for a heading...  Furthermore, you get to create content inline. To edit the media content, text, and blocks on the page that you're building.  In short, you can take the Drupal Gutenberg module as a convenient "block editor".  You (or your editors) can put together and visualize your page layout in one large form field. That, instead of editing every single form field that makes up a page.    3. 4 Reasons to Choose Drupal Gutenberg  Let's say that you're looking for a site building tool to build a... landing page (or one that would empower your content editors to create it).  Why would you go with the Gutenberg content editor for Drupal 8?  Here are 4 good reasons to choose it:    it provides you with lots of predesigned elements out of the box you can see what you're building on the editor side it doesn't require you to be experienced in working with CSS or HTML you can design your own blocks or use blocks created by other open-source developers    4. 6 Reasons Why You Might Hesitate to Choose Gutenberg  Any honest Drupal Layout Builder vs Gutenberg comparison must include the 2 tools' main weaknesses, as well, right?  So, here's why you may want to think twice before choosing the Gutenberg content editor in Drupal 8:    the way it stores data could be... better it doesn't excel when it comes to layout flexibility: you can align your blocks left, right, center, but you can't add custom margins, for instance the style options that it provides are quite limited, one of the main drawbacks highlighted in any Gutenberg vs page builder comparison updating a page created with Gutenberg is particularly overwhelming the visual editing experience is not one of the best ones: visualizing your layout is a bit more difficult you cannot reuse your Gutenberg blocks and the page layouts that you create with this editor    Tip: when it comes to the poor visual experience that you get with the Gutenberg Editor, you can always improve it with page builder plugins. There are some pretty good ones out there that guarantee you a 100% visual design.   5. Introducing: The Drupal Layout Builder Module (Core) "Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface." (source: Drupal.org) The Layout Builder for Drupal enables you to create layouts by putting together separate form fields and block entities. No coding know-how needed.  No need to tweak the templates in the theme's source code.  In short, it "spoils" you with a drag-and-drop type of visual editing experience. You can put together structured content quick and easy.  Source: Drupal.org "But how exactly does it work?"  Here's how you create a custom layout with this Drupal page builder in 5 quick steps:  enable the module go over to the "Manage Display" tab of your target content type click the "Use Layout Builder" checkbox click the "Manage Layout" button then, you're free to use your Layouts and Blocks (after you've created them), dropping them in the defined regions of the page that you're building    6. 7 Reasons to Choose the Layout Builder in Drupal 8  Here's a legitimate question that this Gutenberg Editor vs Layout Builder in Drupal 8 comparison should respond to:  “Why would I want to use Drupal Layout Builder?”  The best answers would be:    you can create your content blocks and just drop them on the regions of your page layout you get to (re)arrange otherwise static fields the way you want to you're free to add views, blocks, widgets, to any section of your page the content that you create is specific to that page type, so all the pages of that type will have the same layout you get to override the default layout to create fully customed pages your layout is rendered on the web page in real-time you're free to incorporate blocks in the main content region 7. 5 Reasons Why You Might Hesitate to Choose the Layout Builder  When comparing Drupal Layout Builder vs Gutenberg, you inevitably get to the point where you ask yourself:  "What are the Layout Builder's main weaknesses?"  Now, here's why you wouldn't want to jump on it right away:    you can use it only on the main content area of your page unlike the Gutenberg Drupal 8 module, the Layout Builder doesn't ship with prebuilt elements for you to just choose from and assemble with Drupal Layout Builder, you need to create your blocks and page type first; you can't "get away with" choosing user-contributed blocks it's not always easy to see what precisely gets overridden you can't rely on a granular permissions system for overriding individual pages    8. When to Use Drupal Gutenberg: 4 Typical Use Cases  You'd want to use the Gutenberg Drupal 8 module if:    your Drupal website's a content-packed one you need to build a landing page you need to create a simple layout: Gutenberg doesn't really shine when it comes to style options you need to create content that fits perfectly into your theme's looks: Drupal Gutenberg pulls right from your theme's styles    To sum up, designing landing pages are Gutenberg's most typical use case.  Use it to add just some extra design (nothing too "extravagant") to an "About Me" page, for instance.   9. When to Use the Drupal Layout Builder: 2 Typical Use Cases  You'd want to use the Layout Builder for Drupal if:    it's a field-intensive page that you're building: a product page, a case study, etc. you have synced content on that page (from Salesforce, for instance)   The END!  Your turn now: have you tried any of these Drupal page builders?  Which one best serves your content goals?  What other pros and cons would you have added to this Drupal Layout Builder vs Gutenberg comparison?  Let us know in the comments below. Photo by Jason Dent on Unsplash  ... Read more
Silviu Serdaru / Mar 25'2020
Drupal Voice Search: How to Set Up Search Based on Voice Recognition on Your Drupal Site
Drupal voice search has gone from trend to standard these days.  So, you can't help ask yourself:  "How do I enable search based on voice recognition on my Drupal website?"  And that's precisely the question that I'm about to answer in this blog post.  That, along with all the other ones that must be "haunting" you:    How does voice search impact my revenues?  How do I optimize my website content for voice search queries?  How do I set up a custom voice search engine on my Drupal site?  Can I even build a voice-powered app with Drupal? How?    1. How Does Voice Search Impact Your Traffic, Conversions, Revenues?  “Voice Shopping Set to Jump to $40 Billion By 2022, Rising From $2 Billion Today“ (source: prnewswire.com) How does making your Drupal website voice search-friendly translate into higher conversion rates?  The logic is simple:    it's more convenient for users to speak to the search bar than to type in their queries in order to find the needed products or services by allowing them this convenience, you improve their experience on your website and that'll bubble up to your web traffic, conversions... revenues  "Becoming voice-first is going to be the new mobile first" (DrupalCon Nashville 2018)  In other words:    understanding how search engines provide accurate answers to users' vocal queries optimizing your content to the patterns that you will have identified    … will have a huge impact on the user experience on your Drupal site.  Source: Gartner.com And great user experience is what sets high ranking websites apart from... the rest.    2. Here's How You Make Your Content Cater to Voice Search Queries  Spoiler alert: I'll be pinpointing just the main techniques to apply for optimizing your content for voice search.  If you feel like delving deeper into this topic, we have a full post focused solely on actionable tips for optimizing your website for voice search. That being said, here's the list of essential voice search SEO techniques to implement:   2.1. Incorporate Short, Simple, Clear Answers Into Your Content 30 words at most, according to Backlinko's research.   2.2. Fine-Tune the FAQ Page on Your Drupal Site This page alone plays a key role in your voice search optimization strategy. It's there that search engines often “extract” their answers from.   2.3. Use Natural Language When Writing Your Content A user would speak to a search bar as he/she would ask a question to a person. Which is significantly different from him/her interacting with a text search box via a robotic keyword search entry.   2.4. Configuring Drupal for Voice Search: Optimize Your Content for Google's Featured Snippets I'm not going to get into details here, but there are lots of highly valuable MOZ blog posts on this topic that I recommend you have a look at.   2.5. Center Your Drupal Voice Search Strategy Around Question Keywords “How to...”, “What to...”, “Why use...”   2.6. Make Sure to Include (Really) Long-Tail Keywords Into Your Content  5+ word keywords, I mean.   3. Set Up a Drupal Voice Search Engine in Just a Few Steps  How do you create a search system based on voice on your Drupal website?  Image by Kaufdex from Pixabay Here are the easy steps to creating a custom voice search engine with Expertrec:    First of all, you need a google tag manager account, a Gmail id, access to your Drupal admin dashboard and a valid sitemap    Set up an account on https://cse.expertrec.com??platform=cse using your Gmail ID   Enter your website's URL login to your Drupal admin panel and install google tag manager: https://www.drupal.org/project/google_tag   Enter your google tag manager ID and save the configuration   Access https://cse.expertrec.com/csedashboard/home/code and copy that code   Add the first part of the code in your control panel, using Google tag manager   Use the custom HTML option and configure the trigger to place it on all the web pages on your Drupal site where you want the voice search enabled   Go to Structure-&gt; Block layout-&gt; Header -&gt;Place block-&gt; Add custom block-&gt; click on source and enter: &lt;ci-search&gt;&lt;/ci-search&gt; (opt for "full HTML"). It's this code that will display a search box in your website's header   Hit the Save button and finally, navigate to UI customization-&gt;features-&gt; enable voice search    And that's it: 9 simple steps to add voice search to your Drupal site.    4. Building Your Own Voice App: Why Would You Want to Use Drupal?  Now, let's say that you've optimized your Drupal website for voice search, improved your search ranking and given your traffic a major boost.  And you've decided to go further and... build your first voice app, as well.  Why would you use Drupal to build it?  Here are some of the most solid reasons:    Drupal provides you with a sophisticated user permissions and access control system it allows you to restrict access to content it provides you with fieldable content it ships with a pre-built front-end Drupal it enables you to put together complex content workflows it provides multi-language support out of the box it provides you with an API module    Note: in the end, it's your use case, along with all the specific feature needs deriving from there, that should influence your final decision.  But how would your Drupal voice app work, more precisely?  Here's the whole "mechanism" in the back-end, summed up to 4 stages:    the user talks to the voice assistant (Alexa, Siri, Cortana...) the voice assistant talks to Drupal Drupal provides an answer to the voice assistant the voice assistant delivers the answer to the user    Chatbot API is the module that makes communication between Drupal and the AI voice assistant possible. It integrates, out of the box, with Dialogue Flow and Alexa. I won't go into detail on the basics of a voice-powered app and the fundamentals of a VUI design. Yet, I recommend you watched the DrupalCon session on Powering an Alexa App with Drupal. It includes a handful of useful tips and actionable information on building a Drupal-powered voice search. In this chapter, my sole intention was to outline those Drupal features and functionalities that make it the best candidate for a voice app.    The END!  I won't hide it: I'm curious whether you've already got your Drupal website voice-search friendly or not just yet.  What strategies have you implemented so far to make your content more findable for vocal queries?  Have you set up your own Drupal voice search engine? Are there any obstacles that Drupal challenged you with? That made the whole optimization for voice search more complex than expected?  Let us know in the comments below.  Photo by Matt Botsford on Unsplash  ... Read more
Adriana Cacoveanu / Mar 23'2020