SEO

SEO Overview

Search Engine Optimization (SEO) is a broad collection of strategic practices that might seem minor when each practice is considered on its own, but when all of these techniques are combined, they can help improve your site's UX and search engine ranking.

On-page SEO

Optimize each page of your website by including keywords in the title, headings, and throughout the content. Use meta descriptions to summarize each Page's content and encourage clicks.

The default Page model in Builder comes pre-configured with a Title and Description field, two important fields that search engines use when indexing pages. The title and description are what appear in most search engine results lists, so always fill these out.

For instructions on setting Builder Page metadata, read Search Engine Optimization, and for even more info on customizing Page fields, read Custom Fields.

Responsive design

Ensure your website is responsive and maintains its design integrity on all screen sizes. Google, specifically, uses mobile-first indexing , which means that mobile-friendly sites get preference in search results.

Builder's built-in styles are by default mobile-friendly, but understanding responsive concepts can help you work smarter and faster.

For detail, read Builder's extensive Responsive Design documentation, a beginner-friendly tour of the principles of mobile-friendly design. Though it covers responsive design in the context of Builder, the concepts are universal to web development, whether you're using pure code or a drag-and-drop UI like Builder's Visual Editor.

Images and SEO

When using images, leverage Builder to help search engines surface your content more effectively. Some tips include:

• A good URL structure includes naming and organizing your images. Use URL paths and file names that help image searches find your images.
• Create responsive content. Builder's default styles do a lot of the work for you when it comes to responsiveness, but understanding how responsive design and development work can help you work more efficiently as well as help you get your images higher up in the image search results list.
• If you have to put text in an image, be sure to include that text in the image's alt text as well as describe the concept in the page content. This helps make sure the content of images is available to more users and helps search engines understand your images.
• Make alt text descriptive, but don't stuff it with keywords.

The next image shows where to add alt text to images.

For more detail, visit Builder Best Practices and Working with Images.

Use optimized images and videos

Beautiful images and video can encourage visitors to stay on a site longer, but not if they require so much bandwidth that they are slow to load. When you use Builder's Image and Video blocks, Builder optimizes those assets to help keep your page size low. For more detail, visit Working with Images and Working with Videos.

URL structure

When creating and managing your URLs, keep these points in mind:

• Keep site structure as simple as possible.
• Create clean, descriptive, and reader-friendly URLs for each page.
• Find and fix any broken relative links.
• Make sure your URL path structures are logical and straightforward.
• Prefer a minimal style for URL parameters.
• Block crawler access to URLs that don't need to be indexed, such as search results.

Tips for creating slugs

At a high level, after the domain in a URL, like builder.io, and any subdirectories, such as /docs/, the slug is next. The slug is the URL part that is unique to an individual page; for example, in https://builder.io/docs/seo , seo is the slug.

When creating your slugs, be succinct yet informative. Avoid long slugs with too many words and never keyword stuff , which search engines consider spam. As a result, this practice will lower your rankings in search results.

When URLs need to change

If a site's been around for a while, it's likely that the site structure has evolved and old URLs need to be updated. Rather than changing the slug of a given page, you can use redirects to funnel site traffic to the right places.

Once the code is set up for redirects, non-dev teammates can use the Builder UI to manage redirects without ever having to contact a developer.

Set Up Server-side Redirects with Nuxt

We will configure server-side redirects in Builder. A server-side redirect is a technique for rerouting site traffic from one web address to another.

Use cases for server-side redirects include:

• Reroute traffic to an updated Page from an outdated one.
• Phase out an old URL without breaking links to the old URL.
• Redirect traffic when you're updating URL naming conventions.

Step 1: Create a Data model

1. Go to Models.
2. Click the + Create New button.
3. Select the Data option & add new fields to the data model. it can be sourceUrl & destinationUrl of Type Url.
4. Click Save.

Step 2: Use your data model to make content entries

The next step is to use the Data model you just made. Here you make a Data content entry to redirect a URL called /products to /shop.

1. Go to Content.
2. Click the + New Entry button.
3. Select the data model you just created.
4. For the SourceUrl, enter /products.
5. For the DestinationUrl, enter /shop.
6. Name the new content entry /products -> /shop. This way, when the URL Redirects are listed in the content area of Builder, each redirect's purpose is in the name, so you don't have to open them to see the URLs that are being redirected.
7. Click Save.

Step 3: Configure your code

Use builder.getAll() to get all the redirects from Builder.

In nuxt.config.ts, add the following code:

const { builder } = require('@builder.io/sdk');

const redirects: object = {}

const BUILDER_API = process.env.NUXT_API_KEY

async function getRedirectUrls() {
    const res =  await builder.getAll(
            'url-redirects',
            {
                apiKey: BUILDER_API,
                options: { noTargeting: true },
                cachebust: true,
            }
        )

    for(const { data } of res) {
        redirects[data.sourceUrl] = {
            redirect: {
                to: data.destinationUrl,
                statusCode: 301
            }
        }
    }
    return redirects
}

export default defineNuxtConfig(async () => ({
  routeRules: {
    ...(await getRedirectUrls()),
  }
}))

here, url-redirects is the unique id of the data model.

Step 4: Add a webhook

With Nuxt.js sites, you need to trigger a rebuild for new redirects. Since Nuxt.js evaluates the nuxt.config.ts only once when building an app, newly added redirects don’t take effect immediately. To cause this rebuild, use a webhook.

To add a Webhook to the data model take the following steps:

1. Go to Models.
2. Open the URL Redirects model you made previously.
3. Go to the Advanced Tab.
4. Scroll to the bottom & Click the Edit Webhooks button.
5. Expand the new Webhook 1 and paste your webhook URL into the URL field.
6. Click Done & Save the changes.

Internal and external linking

To support UX and SEO, link your related pages to each other to help users navigate and search engines understand the structure of your site. Always use succinct but descriptive copy for links; for example, avoid links say "click here".

For internal links, Google recommends that if a page is important, you should link to it from at least one other page on your website. Try to avoid pages that lead nowhere and instead, always give your users more ways to explore.

For instructions on creating links in Builder, read Creating and Editing Links and for a programmatic approach to data for navigation, see the code-focused Integrate Navigation Links.

Understand your site analytics

If you're on a Growth plan or higher, you can monitor your site metrics in the Visual Editor's Insights tab. Zero in on data such as behaviors, conversions, and where user's click with heatmaps. If you're on an Enterprise plan, you can even create your own custom dashboards that give you the information you need most.

Regularly monitor your analytics to understand visitor behavior and improve your strategy.

Intuitive navigation and hierarchy, along with great UX and clear calls-to-action keep visitors engaged and encourage them to stay longer, reducing bounce rates.

The following image is an example of one of the views available in the Insights tab. This example shows impressions and clicks.

To get an idea of how to leverage Builder content metrics, visit Viewing Metrics with Insights .

Search Engine Optimization Techniques

By default, Builder pages offer a graphical UI for Search Engine Optimization (SEO). To take the best possible advantage of SEO with Builder.io content, make sure you provide metadata for search engines.

Setting page metadata

Page metadata is the data about your page that search engines use to display information in search results. For any page you publish, make sure that you include, at the very least, a title and description for your page.

The built-in Page model in Builder includes title and description fields by default. To specify a title and description on a page content entry made using the default Builder Page model:

1. Go to Content.
2. Click on the page to open it in the Visual Editor.
3. In the Options tab, expand the section titled Docs Content Fields.
4. Enter the title and description for your page.

The following video demonstrates filling out the title and description metadata in a page created with the default page model in Builder:

Rendering page metadata into your pages

To use the dynamic seo content in our page we need to fetch the content for the page using the fetchOneEntry method provided from the SDk.

• Firstly, go to the page route in your nuxt app.
• In the script section fetch the custom field data from the fetchOneEntry method.

content.value = await fetchOneEntry({
  model,
  apiKey,
  userAttributes: {
    urlPath: route.fullPath,
  },
  options: {
    fields: 'data'
  }
})

• Use that stored data in the template dynamically using the built-in SEO tags.

• Finally, save the changes in your code & you shall see the updated tags in the browser.

Managing indexing in Builder

Sometimes you want to link to or maintain content that doesn't need to inform your online presence. With Builder custom fields, you can customize your Page model, so non-coding teammates can specify settings such as nofollow and noindex , which tells search engines not to convey reputation or index your page, respectively.

nofollow

The nofollow attribute prevents reputation transfer, which is useful when linking to user-added links in comments or mentioning sites negatively. It's also handy for third-party widgets that might add unintended links to your site, ensuring control over your site's reputation.

In code, you can include the <meta name="robots" content="nofollow"> tag in the head section of a page to apply nofollow to all its links.

noindex

The noindex rule, implemented through either a meta tag or an HTTP response header, prevents search engines like Google from indexing specific content. When Googlebot encounters this rule, it excludes the page from Google Search results, even if other sites link to it. It's vital that the page remain unblocked by a robots.txt file and remain accessible to the crawler to ensure the effectiveness of the noindex rule.

For more detail, read Google's Block Search indexing with noindex and Using the robots meta tag .

Example: a noindex custom field

In your Page model, you can add as many custom fields as you like. Custom fields could include any meta robots tags of your choice such as the noindex or nofollow.

With Builder's custom fields, you can select the input type so a noindex or nofollow setting can be a toggle. This way, non-dev teammates can quickly adjust this setting on their own. With almost 30 available custom input types, you can add as many inputs (such as for metadata or directives) to your Page model as needed, along with default values, requirements, localization as well as helper text so you users have context.

The image below shows a custom input for a noindex toggle that Builder uses in its documentation when, for example, there's a little-used page that is being phased out but the content is still occasionally needed.

The first image is of the custom field in the Page model:

This second image is how the noindex toggle appears in the Visual Editor.

After you added a new custom field know you need to use it in your Nuxt page.

Tip: The index and follow directives are search engine defaults, so you don't need to specify them. You'd only specify noindex and nofollow if you wanted to toggle these settings off.

Creating a sitemap

To create a sitemap based on your content, you first need to obtain the relevant JSON data. Here's an example of how to retrieve the JSON data for a Space we use for documentation demos:

example:

https://cdn.builder.io/api/v2/content/page?apiKey=2b5ffc858d74425485135b88d2fc307a&fields=data.url&query.data.includeInSitemap.$ne=false

For your own JSON, replace the Public API Key with your Public API Key. With your JSON, you can now create your sitemap.

Things to keep in mind:

• If your sitemap is bigger than 50MB, create multiple sitemaps.
• To impact all files on your site, place the sitemap at the root. To focus on a particular area, place it in specific directories.
• Use complete URLs, not slugs.
• Use canonical URLs.

Build out your URLs

Now that you have your JSON, which includes all the Page slugs, create a script to write out all the URLs:

const pageUrls = pages.map((page) => page.data.url)

About the above snippet do:

• takes an array of page objects
• extracts the URLs of those pages using the map() function
• creates a new array containing only the URLs

Create the XML file for your framework

The next part depends on your framework. You can create your sitemap manually or use a sitemap generator tool.

Here's an example of an XML sitemap based on the documentation demo query:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/</loc>
  </url>
  <url>
    <loc>https://www.example.com/nextjs-test</loc>
  </url>
  <url>
    <loc>https://www.example.com/remix-test</loc>
  </url>
  <url>
    <loc>https://www.example.com/ai-demo</loc>
  </url>
</urlset>

For more information, refer to Google's Build and submit a sitemap .

About Builder and SEO

Builder doesn't use iframes or canvases when rendering content with the Builder SDK on your site.

In this way, what you create in Builder is as optimized as the code your developers write.