# Pictures, SEO and category mappings

Catalog

Three tabs of the product editor decide how a product is found and how it looks: **Pictures** (the gallery), **SEO** (the address and the text search engines show) and **Mappings** (the categories and collections the product appears in). This article covers all three. Open any product under **Catalog → Products** to follow along.

### Pictures

The **Pictures** tab lists the product's images with a thumbnail, the default-photo marker, the display order and the alt and title texts.

![The Pictures tab of Fieldstone Oxford Shirt with one picture marked as the default photo, its display order, alt and title, and an upload area below](https://grandnode.com/Plugins/Theme.GrandNodeCom/Content/kb/catalog/product-edit-pictures.webp)

The Pictures tab: the gallery above, the upload area below.

1. Under **Add a new picture**, click **Upload a file** or drop files onto the area. Each file becomes a picture immediately.
2. Click a picture in the grid to edit it: set **Display order** (the lowest number is shown first), **Alt** (read by screen readers and search engines) and **Title** (the tooltip).
3. Use **Delete** to remove a picture from the product.

The first picture by display order is the main image on product listings and the product page. Thumbnails in several sizes are generated on demand; their sizes and the image quality are set under **Settings → Media settings** (see [Configuration](https://grandnode.com/docs-configuration)).

> Always fill in **Alt**. It is what a blind shopper hears and what search engines and AI assistants read instead of the image.

### SEO

![The SEO tab with meta keywords, meta description, title and search engine friendly page name fields](https://grandnode.com/Plugins/Theme.GrandNodeCom/Content/kb/catalog/product-edit-seo.webp)

The SEO tab.

| Field | What it does |
|---|---|
| Search engine friendly page name | The last part of the product address, for example `fieldstone-oxford-shirt` gives `/fieldstone-oxford-shirt`. Leave it empty and GrandNode builds it from the product name. It must be unique across products, categories, pages and other entities with an address; a duplicate gets a number appended. |
| Title | The page title shown in the browser tab and as the headline in search results. Empty means the product name is used. |
| Meta description | The snippet search engines show under the title. Aim for one or two sentences, about 150 characters. |
| Meta keywords | Kept for completeness; major search engines ignore it. |

When you change the page name, GrandNode keeps the old one as an inactive address and answers it with a permanent (301) redirect to the new one, so existing links keep working.

### Mappings: categories and collections

The **Mappings** tab places the product in the catalog. It has a grid for categories and one for collections (brands are chosen on the **General** tab).

![The Mappings tab with the category Fashion \>\> Men, not featured, display order 2, and an empty collection grid](https://grandnode.com/Plugins/Theme.GrandNodeCom/Content/kb/catalog/product-edit-mappings.webp)

The Mappings tab: one category, no collection yet.

1. Click **Add new record** above the **Category** grid.
2. Pick the category, tick **Is featured product?** if it should appear in the category's featured block, and set the **Display order** of the product inside that category.
3. Save the row. Repeat for more categories, and the same way for collections.

A product can live in any number of categories and collections. The display order is per mapping, so the same product can be first in "New arrivals" and tenth in "Shirts".

You can also map from the other side: the **Products** tab of a category, brand or collection lets you add several products at once with a search popup, which is quicker when you build a new category.

### Tips and common mistakes

- A product that is not mapped to any category is still reachable by its address and by search, but it will not appear in the category navigation.
- Pictures are stored in the database by default; on large catalogs consider storing them on disk (Media settings).
- Upload images at least as large as your largest thumbnail size, or the storefront scales small images up and they look blurry.

### Related

- [Products](https://grandnode.com/catalog-products)
- [Categories, brands and collections](https://grandnode.com/catalog-categories-brands-collections)
- [Configuration](https://grandnode.com/docs-configuration) - media and SEO settings

- [Web page](https://grandnode.com/catalog-pictures-seo-mappings)