Carrd is an extremely intuitive, drag-and-drop, responsive one-page website builder. If you are looking to build a landing page to launch an online product, Carrd is a fantastic option. Indeed, it’s free and powerful for SEO. In today’s tutorial, you’ll learn not only how to make a Carrd landing page, but also how to customize it for optimal search engine rankings.
Carrd landing page tutorial
Carrd’s free plan allows you to build up to 3 one-page websites. For personal sites (such as portfolios) it’s a great option. However, with the free plan, your website will also say “Made with Carrd” at the footer and will be hosted on a “.carrd.co” subdomain.
On the other hand, the paid plan costs $19 per year. It allows you not only to have a custom domain and no watermark at the footer but also to build more sites. Additionally, the pro version includes the possibility to add forms, include widgets from third-party services, embed custom code, integrate with Google Analytics, set up Facebook Pixel, and more.
This is why we recommend the pro version for those looking to create a landing page to capture leads or launch new products. For more info on this plan’s features, you can visit Carrd’s pricing page.
Time needed: 30 minutes.
Now, let’s dive right into how to make a Carrd landing page. For this tutorial, I made one you can check out at unita.carrd.co.
- Enter Carrd’s website
Once you enter Carrd‘s website, click on “Choose a Starting Point” to get started.
- Pick a template
You have many templates to choose from, according to what type of website you are building. Keep in mind that templates marked with “PRO” tags are only available for users of the paid version.
- Adding new elements
The plus icon you see on the top right corner of Carrd’s canvas is what you’ll use whenever you wish to add new elements to your website. From there, you can simply drag the elements to the place you want them to be.
There are many elements available, such as Timer, Divider, Gallery, Icons, Table, Buttons, List, and more. Most of them are pretty self-explanatory. However, we’ll make an overview of the most important ones that’ll serve you to style any element in Carrd.
To organize a series of elements, you can group them together by using the “Container” element. For example, in the template we choose for this tutorial, the first container has an image, the site title and subtitle, and an icon with an arrow down.
- Personalizing the background and page settings
The menu at the top right corner also has a button with three horizontal lines that show additional actions. Among others, you will see two options: “Background”, and “Page”.
You can style the background to show either a solid color, a gradient, an image, a video, or a slideshow. However, the last two options are only available in the pro plan. Additionally, you can choose between 50+ patterns, animated or not, to show above the background.
On the other hand, the page element allows you to style the site’s overall layout. You can modify the page’s style and position, width, padding, the overall size of all elements, content alignment, and content spacing.
- Customizing text elements
To modify any element in your template, you only need to click on it to open a properties panel at the left with various tabs and settings.
For text elements, you will see a space to write whatever you want into the text box, with the ability to style it by using the commands shown in the image below.
Additionally, you can change text color, font, size, spacing, alignment, and more, and even add animations to it by using the tabs on the upper left corner.
- Customizing image elements
To customize an image box, the process is similar. You simply click on an image element to open the properties panel and from there you can style it however you want.
The “Appearance” tab, symbolized with a paintbrush in the upper left corner, gives you the possibility to change an image’s width, height, shape, border, padding, alignment, and more. This tab is also available to personalize any element.
- Creating sections for your website
Another important element on Carrd is “Control“. This element allows you to create separate sections to organize the website. It won’t be visible on the final result but allows you to create linkable points within a site that can be linked both internally and externally.
In the example below, the “#start” control element is a “Scroll Point“. If I were to link a “Button” element to this “#start” point, when someone clicks on the button the website will automatically scroll to that specific point. Additionally, there are other types of control elements, such as “Section Break“, “Header Marker“, and “Footer Marker“.
- Add animations
You can add animations to any element (including the background) by clicking on the element and switching to the “Animation” tab, symbolized with a play icon. The “Animation” tab allows you to choose different animations for each element both when the page loads and when someone hovers over the element.
To preview the animations of the entire website, click on the play icon that appears on the menu at the top right corner.
- Check that everything looks good on mobile
This can be done by switching to mobile view: simply click on the smartphone icon in the menu at the right upper corner. To switch back to the uncropped view, click on the same icon again, that will now be a desktop computer as shown in the image below.
Carrd’s fully automatic optimization is commonly flawless. However, if you see something’s off in the mobile version, click on the element you need to modify and then scroll down on the properties panel.
For each element, there is a “Mobile” section that allows you to style that element specifically for mobile. To do so, toggle the section to “Manual” and modify the proper settings.
- Save and publish the website!
Once you have your website ready, it’s time to save and publish it. You can do so by clicking on the floppy disk icon in the menu at the right upper corner.
You will need to provide a title and description for the website. Then, those with the free version can publish the website to a “.carrd.co” URL or save an offline draft to keep working on it later.
If you have the Pro version, now would be the time to use a custom domain.
How to do SEO on a Carrd landing page
Now that you’ve learned how to make a Carrd landing page, it’s time to make it SEO-friendly. Carrd’s websites are responsive, fast, and have the HTTPS protocol, which are all important ranking factors for SEO.
However, there are additional steps you can take to make sure your Carrd website is fully optimized for search engines:
1. Optimize title tags and meta descriptions:
When you publish your Carrd’s landing page, you will be prompted to choose a title and description. Title tags and meta descriptions are crucial elements for SEO. Both are HTML elements that go inside the <head> element of the website.
Both title tags and meta descriptions help search engines and users to understand what your page is about. It’s essential to both the title tag and description you choose for your Carrd’s website:
- Accurately describe what your page is about.
- Are limited in length (60 characters for title tags and 155 for meta descriptions).
- Use a focus keyword you want to rank with.
2. Make sure your content is properly structured
Indeed, sitemaps help search engines find, crawl and index your website’s content. But for them to be effective, your content must be properly structured. This includes using sections and containers inside Carrd to effectively organize and structure the content.
Additionally, Carrd’s advanced settings allow you to set custom HTML attributes to different elements of the website. This way, you can separate content sections with <div>s and add one H1 tag per section (a practice that is recommended for one-page websites).
3. Internal linking
Internal linking allows you to create an effortless navigation experience and makes it easier for search engines to crawl the website. You can put a header menu with anchor links leading to different parts of the same page, as we explored early with the “Control” element.
Putting targeted keywords in each anchor link and setting them up to send users to the <div>s that structure your content further helps your site. This leads us to the next point…
4. Plan and map your keywords
With a landing page, you commonly have one very specific goal: capture leads and inform people about your product or service. And when you’re working with a single-page website you don’t have lots of content for search engines to index. This makes planning and mapping relevant keywords even more important.
The first step would be to spend extra time on the keyword research process. Pick and choose the best keywords and group them thematically. Then, you can put each semantic group of keywords on the different content sections you have created on the website, each serving a specific purpose and targeting diverse search queries.
5. Optimize visual elements
To optimize your images, the best practice is to upload them in WEBp format. Additionally, make sure to compress images to optimize the loading speed.
Lastly, use keywords. You can do this both in the title and alt attributes. Carrd allows you to include alt text and also has options to automatically optimize the image for loading speed (only for paid users) and use defer loading.
6. Get high-quality backlinks
On small one-page sites, which don’t have lots of content, backlinks become increasingly important. There are lots of opportunities for backlinks when you start looking for them.
However, a crucial factor is that your backlinks are high-quality and come from trustworthy, authoritative sites. Some ideas for getting backlinks include guest blogs, collaborations with influential people in your industry, and positive reviews of your product/service.
Now that you’ve learned how to make a Carrd landing page and optimize it for SEO, check out our guide on getting early adopters to test your products and acquire some reviews for your brand-new website!