Hackernoon logoHow To Avoid SEO Pitfalls by@velo

How To Avoid SEO Pitfalls

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. Make sure the code returning the content you want to be indexed runs before your page is initially rendered. You can emulate a Google bot and check which site Google bots will initially crawl and index. Internal links are important to know how to set up and manage links on your site. Use internal links to add a linkable link to your site with an attribute attribute.
image
Velo by Wix Hacker Noon profile picture

@veloVelo by Wix

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps.

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.

Make Sure Search Engines Can Crawl Your Content

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

onReady()
function is rendered on the server, returned as HTML, and seen by search engines.

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.

image

5. In the User Agent section, clear the Select automatically checkbox.

6. Select Googlebot.

image

7. Reload your site.

Now you're viewing the page content Google bots will initially crawl and index.

Links and SEO

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:

  • Add a site menu to your site.
  • Add a hyperlink to your text.
  • Use the link button to add a link to a clickable element such as a button or image.
image
  • Use a dataset to connect URLs from a database collection to clickable elements such as a buttons or images.

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
make sure that every page of your site is reachable from at least one
crawlable link.

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:

image

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=3
Note: 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:

  • www.mysite.com/page.html
  • www.mysite.com/PAGE.html

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.

Images and SEO

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.

image

Dynamic Pages and Routers

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:

  • Meta tags: Help search engines learn about your pages.
  • Sitemap: Help search engines find your pages.

Build a Great Site Structure

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:

image

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. 

Set SEO Data with the SEO API

You can use the Velo SEO API to get and set SEO information for your site pages:

  • Title tag: Gets and sets the clickable heading that appears in search result pages.
  • Link tags: Gets and sets link relation attributes for multiple URLs that point to your page. For example, rel canonical lets search engines know which URL represents the master copy of your page.
  • Meta tags: Gets and sets metadata, additional information about your page. For example, you could use meta tags to control what content appears when your page is shared on Facebook, or to prevent search engines from indexing your page.
  • Structured data: Gets and sets additional information about your page in a standardized format that can be read by search engines. Search engines use this information to classify your page content and possibly display the search result for your page as a rich snippet. For example, you can use structured data to let search engines know your page content is a recipe or contact information for an organization.
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.

Track Your Site Events

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. 

What's Next?

SEO is a complex and ever-changing field. Check out the following resources to keep your site up to date with SEO best practices:

  • Wix SEO Wiz: A step-by-step plan designed to help you improve your site's SEO. 
  • Wix SEO Guide: Everything you need to know to set up your website's SEO and get found online.
  • Google SEO Guidelines: Don't forget to carefully check Google's SEO guidelines. If you are experiencing SEO issues with your site, it's worthwhile to review Google's guidelines again and make sure you aren't inadvertently missing any important details.

Previously published at https://support.wix.com/en/article/velo-seo-best-practices

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.