Search Engine Optimization (SEO) improves your website’s ranking on Search Engine Results Page (SERP). 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 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:
- Add a Group field within the content type of your Contentstack website and name it SEO.
- Next, add a Title (Single Line Textbox) field within the “SEO” field. The “Title” field provides an appropriate title for your metadata with relevant phrases or keywords.
- Finally, add a Description (Multi Line Textbox) field within the “SEO” field. The “Description” field contains a brief summary of the content placed on your website.
Additional Resource: Want to know more about content types? Check out the Create Content Types section that has a set of guides that has all the details that you need to know.
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:
- 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.
- 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.
The “alt” (short for “alternate”) 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:
- Click on the ASSETS tab on the header to view the list of available assets.
- Click on the asset that you wish to provide “alt” text for. This will open the modal that displays the details of the clicked asset.
- On this page, you can edit the asset details. Enter your “alt” text inside the Description textbox to provide the image with a descriptive text. This text provides alternate information about the image before it can load on screen or if the image fails to load.
Redirect rules for changed URLs
If you happen to change the URL of an already-published entry, it is highly advised 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.
Additional Resource: We have a detailed, step-by-step guide on Redirecting URLs that you can refer to, for more details.
Let’s see what you need to do to manage URL redirects for 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.
- Create a new 'Content Block’ type content type, named “Redirect”, within your Contentstack stack, and set it as ‘Multiple’.
- Add two fields to add the “from URL” and the “to URL” .
Create entries to manage redirection of URLs
If you change the URL of any published entry, create an entry for your Redirect content type.
- You need to provide the From URL that has been modified or no longer exists and the To URL which is the new URL.
- 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.
Additional Resource: Contentstack uses Xenu for finding broken links on the website. This tool is available online and you can download it for free. It connects to your website and checks for broken links by crawling through webpages just like any search engine would.
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:
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:
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 its webpage. 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.
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.