Secrets to Boosting Website SEO: A Guide to Applying Schema with Webflow

‍

Why is Feedforce Vietnam Writing About SEO and Schema?

At Feedforce Vietnam, we don’t just focus on e-commerce or social media—we also aim to share solutions that enhance online performance. The website you’re browsing right now is built with Webflow, a powerful web design platform developed by our engineer Nam. Leveraging this platform, we’ve successfully implemented SEO strategies, helping our site rank higher while improving user experience.

In this article, we want to introduce Schema, a critical tool in SEO. Schema is a type of structured data that helps Google better understand website content, increasing visibility through enhanced formats like rich snippets or FAQ snippets. This guide will provide a detailed walkthrough on applying Schema to websites, especially those built on Webflow, so you can optimize SEO and achieve sustainable growth in the online space.

Part 1: What Is Schema and Why Is It Important?

Schema markup is a type of structured data markup that website administrators add to the website’s source code to provide detailed information about page content to search engines. This structured data helps search engines like Google better understand the content, context, and purpose of elements on the page, such as articles, products, locations, or events. Schema is created in standard formats like JSON-LD, Microdata, or RDFa and was developed by an organization called Schema.org. By adding schema to your page, you provide search engines with a clear “map” of your page content, helping them easily analyze and display more detailed and accurate information in search results.

Benefits of Schema for SEO

Improve Visibility on Google: Schema helps your website stand out more in search results by providing detailed information, making search engines understand your page content more clearly and accurately. This helps Google and other search engines display your content more prominently, leading to a higher potential for attracting traffic.
Increase Chances of Appearing in Rich Snippets: Thanks to schema, your website has the opportunity to appear as rich snippets in search results, such as news articles, product reviews, FAQs, or recipes. Rich snippets often contain additional information like images, ratings, publication times, etc., which help attract users’ attention and increase click-through rates (CTR).
Help the Website Reach the Right Target Audience: When your website’s information is well-organized thanks to schema, search engines will better understand the content and intent of the page, thereby suggesting your website to users searching for related content. This helps your website reach the right target audience and enhances the effectiveness of your SEO strategy, while also creating a better search experience for users.

Thanks to these benefits, schema is increasingly becoming an important factor in modern SEO, helping websites improve rankings, increase reach, and build credibility with customers.

Part 2: Common Types of Schema for Websites

‍

‍

1. NewsArticle

The NewsArticle schema is a special type of schema specifically designed for news articles, used to help Google understand that the content is a news article or news-style post. This is particularly useful for websites that publish news, blog posts, or important announcements, as this schema identifies the article as a valuable news document.

Using the NewsArticle schema increases the likelihood that your article will appear on Google News or special features like the Top Stories carousel on the search results page. This not only helps attract large amounts of traffic but also boosts brand recognition by appearing in prominent positions, building credibility, and capturing readers’ attention.

To apply the NewsArticle schema, you can use JSON-LD code with properties such as “headline”, “image”, “datePublished”, “author”, and “publisher”. These properties help Google better understand the main information of the article and display it accurately in search results.

Example of the NewsArticle schema:

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.feedforce.vn/articles/livestream-sales-vietnam"
      },
      "headline": "Livestream Sales – A Savior or a Destroyer of Vietnamese Businesses?",
      "image": "https://cdn.prod.website-files.com/66398a128daf987056d4054a/6731bd4457b80d43caeceeb1_Livestream%20Sales%20-.png",
      "datePublished": "Nov 11, 2024",
      "dateModified": "Nov 11, 2024",
      "author": [{
          "@type": "Person",
          "name": "Khai Huynh",
          "url": "https://www.feedforce.vn/author/khai-huynh"
        }]
    }
</script>

2. BreadcrumbList

The BreadcrumbList schema is a type of structured data used to create navigation paths for users, helping them know their current location on a website. BreadcrumbList displays as a chain of links from the main page to the page the user is currently viewing. This provides context about the page’s position within the overall structure of the website.

BreadcrumbList not only improves user experience by making it easier for them to navigate the site but also supports SEO by helping search engines better understand the structure and hierarchy of the website. This can enhance visibility and optimize your website’s ranking on search engines.

In Webflow, you can add the BreadcrumbList schema by inserting JSON-LD code into the page’s custom settings. This code will contain properties like “itemListElement” with corresponding items for each page in the breadcrumb trail. Be sure to check the results using Google’s Structured Data Testing Tool to ensure the structured data is functioning correctly.

Example of the BreadcrumbList schema:

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Feedforce Vietnam",
        "item": "https://feedforce.vn"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Knowledge Hub",
        "item": "https://www.feedforce.vn/articles"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Unlocking Growth: Digital Strategy to Win the Market for SMEs in Vietnam",
        "item": "https://www.feedforce.vn/articles/digital-strategy-sme-vietnam"
      }]
    }
    </script>

‍‍

3. Organization

The Organization schema is a type of structured data used to provide information about a company or organization on a website. This schema typically includes details such as the company name, logo, address, phone number, social media channels, and other contact information.

When setting up the Organization schema, you need to provide complete attributes like “name” (company name), “logo” (company logo URL), “address” (company address), “telephone” (phone number), and “sameAs” (official social media pages of the company). This information not only provides clear details about the organization to users and search engines but also enhances the trustworthiness of your brand information.

The Organization schema helps build brand credibility when information related to your organization is displayed in the Google Knowledge Panel. Having complete and accurate company information not only creates higher trust but also supports SEO, as search engines prioritize displaying pages with clear and reliable information. This contributes to improving search rankings and increasing the potential to attract prospective customers.

Example of the Organization schema:

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "image": "https://cdn.prod.website-files.com/661e050192b143ef2414f4eb/66a26572f693c3d0cf27a155_Logo-Symbol_Type-1.png",
      "url": "https://www.feedforce.vn",
      "sameAs": ["https://www.facebook.com/feedforce.vn", "https://www.linkedin.com/company/feedforce-vietnam/"],
      "logo": "https://cdn.prod.website-files.com/661e050192b143ef2414f4eb/66a26572f693c3d0cf27a155_Logo-Symbol_Type-1.png",
      "name": "Feedforce Vietnam",
      "description": "Feedforce Vietnam is the top e-commerce development and marketing agency in Vietnam.",
      "email": "info@feedforce.vn",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "35 Xuan Thuy, Thao Dien Ward, Thu Duc City, Ho Chi Minh City, Vietnam",
        "addressLocality": "Viet Nam",
        "addressCountry": "VN",
        "postalCode": "70000"
      }
    }
</script>

4. Other Relevant Schema Types:

Product: Used for e-commerce pages to display product information (name, price, reviews) as rich snippets in search results.
FAQPage: Used for FAQ pages, allowing questions and answers to appear directly in search results, increasing visibility and attracting users.
Event: Used for events, helping to display event information (date, location, ticket price) on Google Search and Google Maps.
Recipe: Intended for pages sharing cooking recipes, displaying information like cooking time, ingredients, and ratings in search results.
Review: Used for pages with product/service reviews, helping to display ratings in the form of stars in search results, attracting user attention.
Video: Used for pages with video content, helping videos appear with thumbnails and descriptions in search results.
LocalBusiness: Used for local businesses, displaying information like address, opening hours, and reviews on Google Search and Google Maps.

Part 3: How to Apply Schema in Webflow

1. Overview of Webflow and Schema Support

Webflow is an intuitive website-building platform that provides flexible tools to create websites without the need for complex coding. Although Webflow does not have direct integration features for schema (structured data) in its drag-and-drop interface, you can still add schema markup to your website through custom HTML code, such as using JSON-LD.

Note that when working with schema in Webflow, you need to have a basic understanding of JSON-LD code or at least know which types of schema are suitable for each content on the page. You should also be familiar with using Google’s Structured Data Testing Tool to ensure the schema is functioning correctly.

2. Steps to Install Schema in Webflow

Step 1: Prepare the JSON-LD Code for the Schema: Create JSON-LD code based on the type of schema you want to install, such as NewsArticle, BreadcrumbList, or Organization. The JSON-LD code will contain specific properties to help Google and other search engines better understand your content. Make sure your code follows the standard JSON-LD format supported by Schema.org.

Step 2: Add the Schema Code to Webflow

Access the Webflow Designer and open the page where you want to add the schema.
Select Page Settings for that page.
In the Custom Code section, paste your JSON-LD code into the Inside <head> tag field.
Save and publish your website for the schema to take effect.

‍

Step 3: Test and Verify the Schema

After publishing the website with the added schema, use Google’s Structured Data Testing Tool (or Google’s Rich Results Test) to check whether Google has read and verified your schema correctly. The specific steps to test are:

Visit Google’s Structured Data Testing Tool.
Enter the URL of the page you just published on Webflow and click Run Test.
The tool will analyze the page and display the structured data it has recognized.
If there are errors or warnings, you will see the details and can adjust your JSON-LD code accordingly.

Testing after installing the schema is necessary to ensure your structured data is working correctly and without errors. This helps increase the likelihood that your website will be displayed as rich snippets and prominent search results on Google.

‍

Part 4: Notes When Using Schema for Websites

Using schema helps improve your website’s visibility in search results, but to achieve optimal effectiveness and avoid errors that could negatively impact SEO, you need to pay attention to several important points when implementing schema.

1. Choose the Right Schema Type for Each Content Type

Each content type is suitable for certain schemas—for example, the Product schema for products, the FAQPage schema for frequently asked questions, or the Recipe schema for recipes. Selecting the correct schema not only ensures accurate content display on search engines but also avoids “schema spam”—when a schema doesn’t match the actual content of the page. Google may penalize your website if it detects this behavior, causing your site’s ranking to drop. Make sure you thoroughly understand each type of schema and apply them appropriately within the content context.

2. Check Accuracy and Regularly Update Schema Information

Schemas must contain accurate and up-to-date information to be most effective. Old or incorrect information can diminish your website’s credibility in the eyes of users and search engines. For example, if you use the Product schema, attributes like price and stock status should be promptly updated when changes occur. Similarly, with the Event schema, details about date, time, and location need to be correct and match reality. Regularly reviewing your website’s schema helps avoid errors or outdated information.

3. Use Google Search Console to Check and Monitor Schema Effectiveness

Google Search Console is a powerful tool for monitoring and evaluating the effectiveness of your implemented schemas. With Search Console, you can:

Check for Schema Errors: In the “Enhancements” section, Google provides detailed reports on the schemas your website is using, along with any errors and warnings that need addressing. This helps you quickly identify and fix schema-related issues.
Evaluate Schema Effectiveness: Google Search Console also shows how schemas are affecting your website’s click-through rate (CTR) and keyword rankings. This allows you to assess which schemas are performing well and optimize pages that aren’t meeting expectations.
Monitor Rich Snippets: The tool lets you track the rich snippets where your website appears in search results. This is very useful for understanding which schemas are effectively attracting users.

Google Search Console assists in optimizing and improving schema quality, thereby increasing the likelihood that your website will display better in search engines, attract more traffic, and enhance user experience.

Conclusion

Applying schema to your website brings many practical and long-term benefits. Schema not only helps improve SEO by optimizing data structures but also enhances user experience when important information like prices, reviews, images, and event details are prominently displayed in search results. This not only attracts users but also makes your website stand out, increases the click-through rate (CTR), and boosts organic traffic without the need to invest in paid advertising. Additionally, using schema builds trust and credibility with customers when they can easily access clear and accurate information about the products, services, or events your business provides.

Given the clear benefits and sustainable effectiveness that schema offers, you should start applying appropriate types of schema to your website today. Choose the suitable schema type for each specific content, implement it, and monitor its effectiveness using Google Search Console to optimize your SEO strategy. Experimenting with and applying schema not only helps your website effectively reach target customers but also creates a competitive advantage in the online environment.

‍