Tassos Docs

Google Structured Data v6.0.0

Contact Support

Home / Google Structured Data / Schema Types

HowTo Structured Data

Add HowTo structured data to your Joomla tutorials. Include step-by-step instructions, tools, materials, and time estimates to help users find your guides with rich results in search.

HowTo Structured Data is available in Pro

Unlock this and dozens of other powerful features by upgrading to Google Structured Data Pro.

Unlock this feature

A HowTo is a step-by-step guide that helps users accomplish a specific task. By marking up your how-to content with structured data, you make it eligible to appear as a rich result snippet in Google Search Result Pages. These can include a list of steps, images, required tools and materials, and estimated time required.

How to build a structured data-powered HowTo page in Joomla (Step-by-Step Guide)

Let's see how we can add step-by-step instructions in a Joomla Article and make the Google Structured Data extension automatically create the HowTo schema for our page.

Step 1: Create a new Joomla! Article

The first step is to create a Joomla Article that will contain your how-to guide. To do so, go to Content -> Articles -> New. If your site already has a how-to guide page, proceed with the next step.

Step 2: Add steps and details to your Article

The next step is to populate our article with the how-to content. You can structure your content in two ways:

Manually: Create your content normally and later manually input the steps in the HowTo Item's settings
Automatic (using CSS Selectors): Structure your content with specific CSS classes that the extension can automatically detect. E.g.:


<div class="howto-step">
 <h3 class="step-name">Step 1: Prepare the materials</h3>
 <div class="step-text">First, gather all the required materials...</div>
 <img class="step-image" src="/step1.jpg" alt="Material preparation">
 <a class="step-url" href="#detailed-prep">View detailed preparation</a>
</div>

gsd howto classes

Step 3: Create a HowTo Item

Go to Components -> Google Structured Data. Click on Items from the left sidebar and then on the New button to create a new Structured Data Item.

gsd howto new item

Now, configure the structured data item:

Enter a title of your choice (for back-end purposes only)
Select the HowTo Content Type
Select Joomla Content from the Integration option

After selecting the HowTo Content Type and Integration, a new section will appear where you can enter your HowTo settings.

gsd howto new item2

Step 3.1: HowTo Schema Settings

Here's a table of the properties you can define for the HowTo Content Type.

Name	Description
Title	The title of your HowTo guide.
Image	The image of the completed HowTo guide
Estimated Cost	The estimated cost of the supplies consumed when performing the instructions.
Estimated Cost Currency	The currency of the Estimated Cost.
Tool	List of objects used (but not consumed) when performing instructions. You can enter multiple values, each on a separate line.
Total Time	The total time required to complete all steps (in minutes).
Supply	List any supplies or materials needed when performing the instructions. You can enter multiple values, each on a separate line.
Steps	Manual Entry: Use this option if you prefer to provide the HowTo steps manually. The available step properties include the following: Name (required) Text description Image URL for more details Use CSS Selectors (automatic mode): Use CSS Selectors to automatically find the HowTo steps in your page's HTML: Step Name: CSS selector for step titles (e.g.: .howToStep .name) Step Text: CSS selector for step descriptions (e.g.: .howToStep .text) Step Image: CSS selector for step images (e.g.: .howToStep .image) Step URL: CSS selector for step detail links (e.g.: .howToStep .url)

In the following screenshot you can see an example of setting up your HowTo Item with CSS selectors:

gsd howto css selectors

Step 4. Publishing Rules

In this section you will be able to control the pages where your HowTo Item will be applied.

Article: Select which Joomla Articles will contain the HowTo structured data.
Category: Select which Joomla Categories will contain the HowTo structured data.

Note: Leave both options Disabled to apply the HowTo schema on all of your Joomla Articles.

gsd howto pub rules

Step 5: Validate your HowTo Item settings

Use Google's Rich Results Test tool to validate your markup:

Visit Google's Rich Results Test page.
Enter your page's URL and click TEST URL.
Check that the HowTo schema is properly detected and has no errors

Step 6: Notify Google about your Schema markup

Log in to your Google Search Console account.
Use the URL Inspection tool to check your how-to page.
Request indexing to inform Google about your changes

CSS Selector Examples

Example #1

<div class="howto-guide">
    <div class="step">
        <h3>Prepare the workspace</h3>
        <p>Clear your desk and gather all materials</p>
        <img src="/workspace.jpg" alt="Clean workspace" />
    </div>
    <div class="step">
        <h3>Begin assembly</h3>
        <p>Start with the base component</p>
        <img src="/assembly.jpg" alt="Assembly step" />
    </div>
</div>

Resulting CSS selectors:

Step Name: .step h3
Step Text: .step p
Step Image: .step img

Example #2


<div class="tutorial">
    <div class="howto-step">
        <strong class="step-title">Step 1</strong>
        <div class="step-content">
            <p class="instructions">First, download the software...</p>
            <img class="step-photo" src="/download.jpg" alt="Download process" />
            <a href="#details" class="step-details">More details</a>
        </div>
    </div>
</div>

Resulting CSS selectors:

Step Name: .step-title
Step Text: .instructions
Step Image: .step-photo
Step URL: .step-details

Troubleshooting HowTo Schema pages

The HowTo Schema is added but not showing in search results

Verify your markup: Use the Rich Results Test tool to check for errors.
Follow Google's guidelines: Make sure your content meets Google's HowTo Guidelines.
Request indexing: Use Google Search Console to request fresh indexing.
Be patient: Allow time for Google to process and display your rich results.

Frequently Asked Questions

What makes a good HowTo guide?

A good HowTo guide should:

Clearly solve a specific task or problem.
Include detailed, actionable steps.
Use images to illustrate key steps.
List required tools and materials.
Provide an estimated completion time.

Do I need images for my HowTo Schema?

While images are not required, they are strongly recommended. Images help users understand the steps better and can make your rich results more appealing in search results.

Can I use HowTo Schema for recipes?

No, for recipes you should use the dedicated Recipe Schema type instead. HowTo Schema is for general instruction guides, DIY projects, and other non-food-related procedures.