SEO Best Practices for Contentstack-powered Websites

Search Engine Optimization (SEO) improves your website’s ranking on Search Engine Results Pages (SERPs). An exceptional SEO strategy can attract customer traffic and provide growth in revenue and sales. Let us look at some of the SEO best practices that you can implement with Contentstack to improve your site’s visibility on a search engine.

Add meta description and title tags

Meta description and title tags provide a brief introduction to your website. This introductory content comes up on a Search Engine Results Page (SERP) when a customer’s search criteria match keywords in your website’s metadata.

Title tags and meta descriptions are pieces of HTML code placed within the header tag of a web page.

  • Title tag: The title tag assigns an appropriate name to the metadata that introduces your website. The title element of a web page appears on the search engine results pages, browsers, and external webpages.
  • Meta description: The meta description tag contains a summary of your website’s content. An ideal meta description should contain no more than 155 characters.

Let us look at how you can assign appropriate meta description and title tags to your webpage with Contentstack.

Defining SEO fields in the content type

While defining the structure of your Contentstack website, perform the following steps:

  1. Add a Group field within the content type of your content management system (CMS).
  2. Name the Group field SEO.
  3. Add a Title (Single Line Textbox) field within the SEO Group field.
    The Title field provides an appropriate title for your metadata with relevant phrases or keywords.
  4. Add a Description (Multiline Textbox) field within the SEO Group field.
    The Description field contains a brief summary of the content placed on your website.

This will make sure you have relevant metadata in place when you decide to publish content to your website.

Making SEO-related changes to the website code

Perform the following steps to add SEO related tags to your website code:

  1. Within the HTML code for your webpage, add the following SEO code in the header tag:
    <meta name="title" content="an appropriate title for your website content">

    This code assigns a title to your meta tag.

  2. Add the next line of SEO code in the header tag of your HTML code:
    <meta name="description" content="appropriate description for your website content.">
    

    This code assigns description details to your meta tag.

This code will make sure that the necessary SEO calls fetch and display appropriate metadata on your website.

Use images with alt text

Displaying images is the best way to explain a certain feature of your company’s software. The images provide a direct view of the steps being performed while a user makes use of that particular feature.

Alt text appears in place of an image on a website if the image fails to load on a user's screen. Sometimes, this alternate text helps provide information about an image while the image loads on the screen. This helps improve SEO ranking as search engines find it easy to crawl the web and visit your website’s links.

Contentstack also uses alt text to provide information about the images uploaded to our website. Follow the below steps to add alt text to images within Contentstack:

  1. Click on the 'ASSETS' link in the top navigation to view the list of available assets.
  2. Click on the asset that you wish to provide alt text for. This will open the modal that displays the details of the particular asset.
  3. On the following page, you can edit the asset details.
  4. Enter your alt text inside the Description textbox to provide the image with descriptive text. This text provides alternate information about the image before it can load on screen.

Redirect rules for changed URLs

If you happen to change the URL of any already-published entry, it is recommended that you redirect the previous URL to the newer one. This is considered as an appropriate SEO best practice as users trying to visit the older link to the website will be automatically taken to the newer link, instead of seeing a ‘Page not found’ error.

Let’s learn how to manage URL redirects using your Contentstack-powered websites.

Create a content type to handle URL redirects

You need to create a separate content type to manage the redirection of the changed URLs.

  1. Create a new content type within your Contentstack stack.
  2. Provide a suitable name for the content type, such as Redirect.
    Set it as a ‘Multiple’ content type of ‘Content Block’ type.
  3. Add two Single Line Textbox fields to the content type.
  4. Name the fields From and To, respectively.

Create entries to manage redirection of URLs

If you change the URL of any published entry, perform the following steps to manage URL redirects:

  1. Create an entry for your Redirect content type.
  2. In the From field, mention the URL that has been modified or no longer exists.
  3. In the To field, mention the new URL.
  4. After you enter relevant content in all the available fields, save and publish the entry to the specified publishing environment.

Now, if any user visits the old URL, he/she will be redirected to the new URL automatically.

Update broken links

Broken links can affect your website in the following ways:

  • Poor user experience: Users may navigate away from your site when they discover broken links that lead to a 404-error page
  • Poor onsite-SEO: Presence of broken links restricts the search engine’s capability to easily crawl to different links on your website. This directly impacts your site’s SEO ranking.

Contentstack uses the Xenu tool for finding broken links on the website. This tool is available online for free. It connects to your website and checks for broken links by crawling through webpages just like any search engine would.

You can use the following link to download the application:
https://download.cnet.com/Xenu-s-Link-Sleuth/3000-10248_4-10020826.html

Canonical tags for webpages with the same content

A canonical tag specifies to the search engine that a particular URL is actually a master copy of a specific page. This tag indicates which version of a specific URL should be displayed in the search results that a search engine derives.

Using the canonical tag helps avoid duplicate content being placed on multiple URLs. This helps the search engine easily crawl the Web and pick out the URL you have mentioned in the canonical tag to browse through your website. Easy navigation enables better SEO rankings.

Let us consider a sample website which can be reached through all of the following links:

  • https://www.samplesite.com
  • http://www.samplesite.com
  • http://samplesite.com
  • http://samplesite.com/index.php?r...
  • http://samplesite.com/index.php

A search engine will consider every single one of these URLs as a unique webpage. However, they are five similar copies of the homepage. Here, setting a canonical tag that points to a specific URL (e.g. https://www.samplesite.com) will tell the search engine to include just that URL in the search results.

Using the Canonical tag with Contentstack

When setting up the code for your website on Contentstack, add the following line of code inside the header tag in HTML:

<link rel="canonical" href="your preferred website address">

You can add the version of your website address that needs to be displayed on the search results page here.

Add a sitemap

A sitemap provides a list of all the important URLs that exist on your website. The sitemap forms a roadmap that Google’s search engine can follow to crawl to a particular URL link on your website.

The use of sitemap benefits organizations that have websites:

  • With hundreds of webpages or a complex website architecture
  • With constantly changing URLs
  • With constantly changing content

By providing a list of all the important webpages on a sitemap, you indicate to a search engine that these are appropriate landing pages on your website. The sitemap then provides an easily accessible index for the search engine to intelligently traverse through your website. This provides better on-site SEO.

Using a sitemap with Contentstack

You can use service providers such as Google’s online XML sitemap generator service to make use of sitemaps with Contentstack. These sitemaps are normally stored within a file named sitemap-index.xml.

You can also create a plugin that autogenerates the sitemap-index.xml file when a particular entry on your Contentstack website is published.

Create high-quality content

High-quality content attracts search engines and visitors to your website. Visitors prefer crisp and engaging content that sticks to the main topic that your website is all about. Users are able to find relevant content and may end up visiting related sections of your site too.

Content that promotes good onsite-SEO should contain the following attributes:

  • Well-researched content: Search engines favor websites with comprehensive and well-researched content directed towards a specific audience, and usually reward them with higher rankings.This division of traffic across two locations with the same data affects the visibility of the content blocks on your website and eventually results in loss of overall user traffic on the website.
  • Unique content: When more than one unique website address contains the same pieces of content, search engines find it difficult to choose any one of those duplicated versions as the relevant result of a search query. To attract user traffic to your website, you should maintain unique content throughout your website.
  • Competitor and Keyword research: A detailed analysis of the keywords used by competitors in the industry to draw visitors to their website helps understand important content and gain the attention of different search engines.
  • Linking strategy: Provide links to internal content on your website wherever possible to display efficiency in the related industry.
  • External Links: Provide acclaimed external links that back up the claims made by your website’s content.
  • Varied Content: Content that includes a perfect mixture of optimized images, compelling videos, numbered lists, and bulleted lists promotes itself.

Leverage search engine friendly URLs

When search engines can easily crawl to a particular website URL, onsite-SEO rankings improve. Search engine friendly URLs provide users with an appropriate path to their desired destination.

Let us see how URLs can be optimized for SEO.

Use appropriate keywords

It is a good practice to include keywords that tell crawlers what the webpage is about in the URL. When you include the most relevant term alongside the root domain of the website URL, this helps search engines direct the right traffic to your site.

Consider a website with the URL https://example.com/headlesscms. Here, the keyword headlesscms specifies what the webpage is about.

Use appropriate URL hierarchy

An SEO-friendly URL should flow logically from the root domain to categories and sub-categories. This hierarchy will allow search engines and users to crawl through your website with ease.

Consider the following URLs:

  • https://example.com/cms/headless/wordpress
  • https://example.com/sitecore

The first URL is SEO-friendly as it provides smooth flow towards the CMS. While the second URL confuses users with its inappropriate categorization.

Additional best practices

Here are a few more practices that help maintain SEO-friendly URLs on your website:

  • Concise URLs: Short and crisp URLs often help convey what the website is about clearly. It also prevents Google from truncating part of the URL since the character length crossed 512 pixels.
  • Word delimiters: Use hyphens to separate terms in your URL address. Avoid using underscores to optimize SEO.

Optimize headlines for SEO

It is a good practice to optimize the header tags on your website for better user experience and onsite-SEO. Use of SEO-friendly headlines makes your content easier to browse through and improves SEO ranking for your website.

Let us take a look at some best practices to be followed while using header tags for your website.

Appropriate use of the H1 tag

An H1 tag provides the largest headline available on your webpage. This tag usually represents the title of your webpage or other significant content that should stand out from the remaining data on the webpage.

It is considered as a best practice to use only one H1 tag for your webpage as more than one titles would confuse visitors that scan through your website.

For example, the Contentstack website follows the same ideology on the following webpage: https://www.contentstack.com/. The webpage maintains “Industry Leader in Headless CMS” as the sole H1 tag, providing better readability for its visitors.

Use of a single header tag enhances user experience and improves SEO rankings for the website.

Structure website content

The header tags shape the content on your website and provide appropriate context for the data present on your webpage. To provide appropriate flow of information on your website, you can use different header tags to structure your content.

Let us take a look at the different types of header tags:

  • H1 tags: The H1 tags highlight the main topic that your webpage is all about.
  • H2 tags: The H2 tags usually provide context for the sub-headings or sub-sections placed under the H1 tag.
  • H3 to H6 tags: The H3 to H6 tags are available when you need to assign additional sub-headings or sub-sections under the H1 and H2 tags.

For example, the H1 tag would form the title of your blog post, while the tags ranging from H2 to H6 would form the subsequent sub-headings inside your blog post.

Create an SEO-friendly Robots.txt file

The Robots.txt file is a text file that indicates to search engines which webpages on the website to crawl and which not to crawl. Before a search engine visits a site, it will first go through the Robots.txt file for directions.

Let’s consider the following basic content block that lies within the Robots.txt file:

User-agent: *
Disallow: /

Here, the asterisk refers to all the search engines or visitors that crawl the website while the slash indicates to the visitors that they should avoid visiting that particular website.

Importance of using the Robots.txt file

Any search engine that crawls your website will crawl through all the webpages displayed on your website. However, crawling through so many webpages can take a lot of time and affect SEO rankings for your website.

This negative ranking depends on the “crawl budget” that Googlebot assigns to your website. The crawl budget represents the number of URLs on your website that Googlebot decides to crawl through. Learn more about crawl budgets here.

Now, this is where the Robots.txt file comes in handy. To help Googlebot or any other search engine crawl the most important webpages on your website, you can mention the important URLs within the Robots.txt file. This helps improve SEO rankings for your website.

Let’s consider a scenario where we have placed content for a particular blog post within the Contentstack CMS. Here, we have placed the content, however, it is supposed to be published to the website at a later time.

To avoid the blog getting published at an earlier time, the developer includes the link for this blog post within the Robots.txt file. This means that the blog post entry will be skipped whenever any other content is sent for publishing.

Was this article helpful?
top-arrow