Building a Wix site with Velo? Here are some tips for improving your site's
visibility in search engines and avoiding SEO pitfalls when coding with Velo.
One of the first steps to ensuring effective SEO is making sure search
engines can crawl and index your site content. If you're working with
Velo, some of your site content may be dynamic. How can you make sure
that search bots can view your content?
Search Bots Like HTML
Wix sites are built using Wix editor components that are rendered into HTML. With Velo you can also customize the content and layout of your site by adding JavaScript code using the Velo JavaScript APIs.
Search bots access your page content by sending an HTTP request to your
page and reading the HTML content generated from the initial page
rendering. At a later date, some search bots also render the page themselves and run any JavaScript code. Since not all search bots run
JavaScript code, you should make sure the code returning the content you want to be indexed runs before your page is initially rendered. Content not included in the initial HTML output may be indexed after a long delay, indexed incorrectly, or not at all.
For this reason, and also to increase the performance of your site, Wix uses server-side rendering (SSR) to render your page's components on the server and return them to the browser as HTML. How can you make sure your content is included in the SSR version of your page?
Inside the onReady() Function
For Velo sites, anything that occurs in the
function is rendered on the server, returned as HTML, and seen by search engines.onReady()
For most use cases, it's enough to just call the function in
onReady()
. For asynchronous functions and functions that run following a delay, the onReady()
promise may resolve before the function's promise has a chance to resolve. In such cases, if you need the returned content to be indexed, you can block the
onReady()
from resolving until your function's promise resolves. You can indicate to the server that it should wait by returning the promise in onReady()
.For example, let's say you have a repeater on your page that is populated with data queried from a database collection:
import wixData from 'wix-data';
$w.onReady(function () {
$w("#myRepeater").onItemReady(($item, itemData, index) => {
$item("#text").text = itemData.title;
$item("#image").src = itemData.image;
});
wixData.query("MyCollection")
.find()
.then((results) => {
$w('#myRepeater').data = results.items;
});
});
In this example, the asynchronous query's promise may not resolve before the
onReady()
promise resolves, and the SSR version of your page may not include the queried repeater content. To ensure that the query resolves before onReady()
, we can return the query in onReady()
. See the change to Line 9:
import wixData from 'wix-data';
$w.onReady(function () {
$w("#myRepeater").onItemReady(($item, itemData, index) => {
$item("#text").text = itemData.title;
$item("#image").src = itemData.image;
});
return wixData.query("MyCollection")
.find()
.then((results) => {
$w('#myRepeater').data = results.items;
});
});
Note that returning a promise in the onReady() function may affect the performance of your site, as all the data will load before the page is rendered. Since there is a tradeoff between SEO and performance, you might want to wait for the main content that is important for indexing, and let auxiliary content such as the time or weather information load later.
Note: Database content that is loaded into page elements via a dataset (instead of code) is included in the SSR version of your page and will be seen by search engines.
Test Your Site
How can you check if a search bot can view your page content? You can
emulate a search bot by setting your browser's user agent to a specific
bot. For example, you can emulate a Google bot and check which site
content Google bots will initially crawl.
Show me how
To emulate a Google bot in the Google Chrome browser:
1. Navigate to your published site.
2. Open Developer Tools.
3. Click the 3-dots menu at the top right.
4. Select More tools > Network conditions.
5. In the User Agent section, clear the Select automatically checkbox.
6. Select Googlebot.
7. Reload your site.
Now you're viewing the page content Google bots will initially crawl and index.
Search engines learn a lot about your site from internal site links. Since internal links impact your site's SEO, it's important to know how to set up and manage links on your site.
Crawlable Links
Google bots only crawl links with an HTML
<a>
tag with an href
attribute. There are several ways to add crawlable href
links to your Wix site:Other methods of adding links to your site are not guaranteed to generate
href
links. You can add non-crawlable links to your site, but you should Use Page Query Parameters for Pagination
There are different ways to handle loading more page content when the content is too long to fit on a single page. One method is to use a numbered menu that loads a specific number of items for each numbered button that is clicked.
If you are using a numbered menu for pagination and you want search
engines to crawl and index each batch of content as an independent page, add a page query parameter to the link for each numbered button:
?page=<pageNumber>
. Google views URLs with numbered page query parameters as links to independent pages.For example, let's say you have a numbered menu with several buttons:
Google indexes the following as 2 separate pages:
#button2
URL: https://www.wix.com/velo/examples?page=2#button3
URL: https://www.wix.com/velo/examples?page=3Note: For the link to the first page, don't set the query param to ?page=1 since you'll have 2 URLs pointing to the same page. Instead you can link to the main page.
Does URL Case Matter?
Google treats URLs as case sensitive. For example, Google views each of these URLs as unique:
Google recommends exposing either the uppercase or lowercase version of a URL, and not both. Even if you've set both URLs to point to the same page so that a site visitor will reach the same destination regardless, you may not want both versions out there on the web pointing to your page.
When multiple URLs point to the same page, Google will choose only one to represent the content on your page, and will highlight only that URL in
search results. And it might not be the URL you prefer.
So which case should you choose, uppercase or lowercase? Lowercase is
recommended, since it's more common and you can assume that at least
some people will use the lowercase URL to link to your site.
Site images play a significant role in determining your site's SEO. But how
do search engines "read" your images? They check the image's alternative text (alt text), a short but meaningful description you can assign to your image.
You can add alt text to an image via the Wix Editor, but if you are displaying multiple images from a database collection, you can dynamically assign alternate text to your images with code using the alt image property, or by connecting to alternative text stored in a database collection via a dataset.
Dynamic pages and router pages are different than regular pages in that they contain dynamic data. SEO information for a dynamic or router page must be set dynamically, so that it reflects the real content the pages will hold when they are viewed.
You can define SEO information for your dynamic pages in the Wix Editor.
You can dynamically define the following SEO information for your router pages:
Site structure refers to how you organize content on your site. For example, how do pages with your main content link to pages with subtopics? How many pages will a site visitor have to navigate to reach the content they want? Is the connection between pages with related content
organized or random?
Planning and mapping out an organized site structure will make it easier for search engines to crawl and index your site. Google awards sitelinks, additional links that appear beneath the main URL in a Google search, to sites with great site structures.You can use Wix Data features such as database collections, dynamic pages, and index pages to improve and organize your site structure. Consider the following factors when planning your site:
1. Organized hierarchy: Make sure the connection between pages on your site isn't random. Your site hierarchy should be organized and fairly shallow (not too many levels).
This is easy to accomplish using dynamic pages, where you can automatically generate multiple pages with similar structure and different content all relating to a main index page.
2. URL structure: The structure of your URLs should mirror your navigation hierarchy. Each level of your site should be represented by a section of your URL containing an appropriate keyword.
For example, if you've got a recipe site divided by cuisine type and then by course, a site visitor who selects Italian cuisine and then appetizer recipes should see a URL that reflects the site hierarchy:
You can automatically generate structured URLs for your pages using dynamic category and item pages.
3. Internal links: Search engines use internal links to crawl the pages of your site. In general, the more internal links the better, but minimally every page on your website should have a link to and from another page on your site.
You can create an index page or a dynamic category page to easily link to and from dynamic item pages on your site.
Note: SEO settings for dynamic pages are different than SEO settings for regular site pages.
You can use the Velo SEO API to get and set SEO information for your site pages:
Note: To ensure the SEO data you set will be read by search engines, make sure to set such data in the onReady() event handler.
You can connect a 3rd-party marketing tool such as Google Analytics or Facebook Pixel to your Wix site and collect valuable information about your visitors' behavior. Wix helps you track specific visitor events such as page views and purchases and report them to your integrated marketing tool. You can then use this information to optimize your site.
If you want to track additional visitor actions not included in the default tracking events available via Wix marketing integrations, you can use the Velo Track Event API. For example, you can add tracking code to a ownload button and report to a 3rd-party tool every time a visitor downloads a document.
SEO is a complex and ever-changing field. Check out the following resources to keep your site up to date with SEO best practices:
Previously published at https://support.wix.com/en/article/velo-seo-best-practices