Jump to content
OLSA

Large categorisation and backend long page tree

Recommended Posts

Hello for all,

these days finishing project what is combination of e-commerce and portal website. Problem is "Products" page-tree because content need to be divided inside 48 categories. Also the client gave me content divided in 68 categories, but at the end they accepted my proposal about reducing that number. But problem is that and with 48 categories in backend, "Products" page tree is very large, long list, and very hard for administration. On front-end mega-menu with labels (menu group headings) solved that problem for vistors. And, at the end, I decided to test variant with additional categories to group categories, and result is good (now it's easy for adminsitration to find what they want very easy).

Problem: now urls are longer, and in some parts (categories) not sure how that's can affect on SEO (eg. before: "products/showers/some-product", now: "products/showers-and-bathtubs/showers/some-product"). There are few more examples like that. And another thing is that urls are now longer (more characters, and deeper).

For better administration I added new level of categorisation - I think - that is not a way to go. What is your opinion or suggestion about that? Maybe different, custom admin template, with custom navigation, or some folders? or ...?

Thanks.

Share this post


Link to post
Share on other sites

Hi @OLSA

Because SEO is very important in that kind of business/site I would first of all stick to its requirements and that to other things like the usability of administration etc.d

In your second example, you can change "showers and bathtubs" to something more general like "bathroom". In that case, you will have additions keyword in your URL. If your page name includes stop words (and, or, but, of, the, a, etc.), it's not critical to putting them in the URL. You don't have to leave them out, either, but it can sometimes help to make a URL shorter and more readable in some sharing contexts. Use your best judgment on whether to include or not based on the readability vs. length.

As for best URL structure, I would recommend  "site.com/bathroom/showers/product". You can do it by using URL segments, so you can have desired page tree in admin and perfect URL structure on the frontend. Of course, it's much more work and there is a lot of small things like canonical links, redirect etc that you have to think about. 

As another way to make your URL shorter you can move only last "product" part to "products", so you will have "products/product". 

Don't forget to use schema.org or other for breadcrumbs.

 

 

  • Like 5

Share this post


Link to post
Share on other sites

Thank you Zeka,

6 hours ago, Zeka said:

In your second example, you can change "showers and bathtubs" to something more general like "bathroom".
...
As for best URL structure, I would recommend  "site.com/bathroom/showers/product".

Can't use this concept because, as example, they have category "faucets", and there are "faucets" for kitchen and for bathroom. Also they have "colors" for wall paintings, "floors" (wall tiles for kitchen or bathrooms can be the same product), and there are other examples where can't use that principle (divide products by area)...
Also, grouping categories really helps to get cleaner administration, but also get me in another "problem" where I get unbalanced page tree (levels), as example:

1) products:

- faucets
---- faucet-product-1
---- faucet-produc-2
.
.
- floors
---- parquet
-------- parquet-product-1
---- laminate
-------- laminate-product-1

6 hours ago, Zeka said:

 You can do it by using URL segments, so you can have desired page tree in admin and perfect URL structure on the frontend. Of course, it's much more work and there is a lot of small things like canonical links, redirect etc that you have to think about.

I use PW few years, and build many custom things (not polished yet to put it here, but will do it for this great/the best community), but never use PW concept with URL segments. Read about that, sounds to me very interesting, but never had time to investigate, how and when...
 

6 hours ago, Zeka said:

As another way to make your URL shorter you can move only last "product" part to "products", so you will have "products/product"

Yes thinking about that, but that not decided to use that concept because in administration would be chaos (initial content is ~2000 products, but client has plan to place 10 to 20 000 products, build importers..).  Also for ajax, filters.. in backend is "easier"... "where parent category is my parent"...

In all I agree with you, but sorry because in first topic, I didn't write other details about this website.
Thanks.

Share this post


Link to post
Share on other sites

This is off-topic,  but here is drag and drop JSON tree page module (or menu manager) what I build inside this project to solve client task to get much as simple solution to manipulate with Main menu (and all other website navigations).

Also, please that this topic go in same direction as it started. This is only short of-topic.

What this module do:

1: clone page tree and build JSON string (it's good if you have few thousands of pages), and in rendering you don't have in runtime to build main menu
2: if you have some special cases where need to do some correction for main menu, you can do it very fast and easy (do not need to "move" DB large page tree, you "moves" inside small JSON)
3: you can save ("export") somewhere current tree, and experimenting with menu
4: you can create page tree Menu, and child "Top menu", "Sidebars", "Fotter menu" etc...

I build this for this project, and main target was to leave real PW page tree, but add options to manipulate with that if needed. Also one of target was to get faster page rendering, done testing (in this project with >2000 pages, get faster pages rendering about 25% and more).

How to use it:

1) download attached zip (at the bottom of this message) and install like any other PW module
2) create "JSON tree" type field and place it on some template ("menu", or if you like place it on "home", or...)
3) you can add pages one by one (first tab), or if you have large page tree, in second tab set your "max deep level", set what parent you want to skip their children, and press "Create list"
4) press Save
5) now you can drag and drop and create custom tree (and after changes press save)

How to edit some list item:

Press on some list item button "pencil/edit", and in the bottom you will get that page selected, change that to some another page... And press Save.

How to create "Label" item, in next version that would be different, but now it's can be done:
1) Create template "label" (only title field), create some pages ("labels"), and after select that pages inside JSON tree and append children to it (drag and drop).
2) In rendering process check if template=='label'...

How to render page tree (Menu):

As example, call:

// field is on page with id 3600
// fieldname is "tree"
$menu = $pages->get(3600);
// var_dump($menu->tree);
echo mainMenu( json_decode( $menu->tree)); // mainMenu is method in function.php, there you go through tree and create UL,LI...

NOTES:

1) What is inside "mainMenu" function?

Do var_dump(...) before function call and will understand what that function need to do.
We have JSON objects with attributes, eg. "pwid" store page ID.
If you don't build multilanguage websites, you don't have to call PW page (there is also attribute "slug").

// function.php
// you need to create function inside function.php
// this is only example

function mainMenu($items){    
	$out = '';	
	foreach( $items as $item ){
        // please note main attribute "pwid" it's store PW page id
		$i = wire('pages')->getById($item->pwid)->first();// in my example need this because multilanguage project
        .
        .
        .
        .
    }
}

This module is totally unpolished (first version).

Here are few screenshots:

- First image shows process when module clone PW page tree where you can add desired pages to list.
- Second image shows option where you can add pages one by one, or select multiple and add.
- Third image shows what happened after you press button "Add to list" or "Create list".

Regards.


JSON-Tree-1.jpgJSON-Tree-2.jpg

JSON-Tree-3.jpgJSON-Tree-4.jpg

FieldtypeJSONtree.zip

  • Like 2

Share this post


Link to post
Share on other sites
1 hour ago, OLSA said:

Yes thinking about that, but that not decided to use that concept because in administration would be chaos (initial content is ~2000 products, but client has plan to place 10 to 20 000 products, build importers..).  Also for ajax, filters.. in backend is "easier"... "where parent category is my parent"...

 You definitely should take a look at URL segments. The power of URL segments is that your URL structure can be different from you page tree structure and in your case, as, for me, it is highly desirable.

I think that is not a good way to place products under categories because some products can be relative to several categories. How will you handle it?

  • Like 1

Share this post


Link to post
Share on other sites
2 hours ago, Zeka said:

I think that is not a good way to place products under categories because some products can be relative to several categories. How will you handle it?

+1

I have products/product (-> parent/children in the tree) and separate categories/sub-categoies/.../category, tags/tag-group/tag, etc. parent/children in the tree and Page references + URLsegments to do the routing. Otherwise one faces the issues @OLSA is facing.

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, Zeka said:

I think that is not a good way to place products under categories because some products can be relative to several categories. How will you handle it?

No, no in this product had very large place for clean categorisation. It is very easy to separate tools and showers or tiles or parquet or painting colors...

Except, had that problem on category level, but for that use "tags". As example, in category "Tools" are about 100 products, but also inside that category had tags "for painting", "cleaning"...

Also know what are you talking here, as example in some rental site some house can go to rent and sell at the same time (that was my client request in one project). Solved that without problem using "tags". Low level item is property, but same property can have various status... Also property can be house, flat, ship...whatever...

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Sanyaissues
      I hadn't developed a website for a while, but here we are. It's a very simple minimalist website to showcase the latest work of Dominican Artist Patricia Abreu Mota.
      Site: https://patriabreu.com
      Modules:
      Procache ❤️ Seo Maestro Profiler Pro Lister Pro ProcessRedirects
    • By Mike Rockett
      Docs & Download: rockettpw/seo/markup-sitemap
      Modules Directory: MarkupSitemap
      Composer: rockett/sitemap
      ⚠️ NEW MAINTAINER NEEDED: Sitemap is in need of developer to take over the project. There are a few minor issues with it, but for the most part, most scenarios, it works, and it works well. However, I'm unable to commit to further development, and would appreciate it if someone could take it over. If you're interested, please send me a private message and we can take it from there.
      MarkupSitemap is essentially an upgrade to MarkupSitemapXML by Pete. It adds multi-language support using the built-in LanguageSupportPageNames. Where multi-language pages are available, they are added to the sitemap by means of an alternate link in that page's <url>. Support for listing images in the sitemap on a page-by-page basis and using a sitemap stylesheet are also added.
      Example when using the built-in multi-language profile:
      <url> <loc>http://domain.local/about/</loc> <lastmod>2017-08-27T16:16:32+02:00</lastmod> <xhtml:link rel="alternate" hreflang="en" href="http://domain.local/en/about/"/> <xhtml:link rel="alternate" hreflang="de" href="http://domain.local/de/uber/"/> <xhtml:link rel="alternate" hreflang="fi" href="http://domain.local/fi/tietoja/"/> </url> It also uses a locally maintained fork of a sitemap package by Matthew Davies that assists in automating the process.
      The doesn't use the same sitemap_ignore field available in MarkupSitemapXML. Rather, it renders sitemap options fields in a Page's Settings tab. One of the fields is for excluding a Page from the sitemap, and another is for excluding its children. You can assign which templates get these config fields in the module's configuration (much like you would with MarkupSEO).
      Note that the two exclusion options are mutually exclusive at this point as there may be cases where you don't want to show a parent page, but only its children. Whilst unorthodox, I'm leaving the flexibility there. (The home page cannot be excluded from the sitemap, so the applicable exclusion fields won't be available there.)
      As of December 2017, you can also exclude templates from sitemap access altogether, whilst retaining their settings if previously configured.
      Sitemap also allows you to include images for each page at the template level, and you can disable image output at the page level.
      The module allows you to set the priority on a per-page basis (it's optional and will not be included if not set).
      Lastly, a stylesheet option has also been added. You can use the default one (enabled by default), or set your own.
      Note that if the module is uninstalled, any saved data on a per-page basis is removed. The same thing happens for a specific page when it is deleted after having been trashed.
          
    • By jploch
      Hey folks,
      currently Iam working on a website for one of my clients and I need some advice on how to approach this in PW.
      The website is for a company, that offers holiday houses in two locations. 

      The client wants the homepage to show the first location. Normally I just have a home template for the first page, but here the URL should reflect that you are in Location 1. So when you visit the URL casamani.com it should redirect to casamani.com/location-1. Not sure if this makes sense at all.

      Whould it be bad for SEO and performance reasons to redirect home to the Location-1 page?
      Another approach would be to render the Location-1 template on the home template or do an include like discussed here.
      Here is how the tree looks:
      – Home
      – Location 1 (Homepage)
           – Creation
           – Adventure
           – Sustainability
      – Location 2 
           – Creation
           – Adventure
           – Sustainability

      Thanks for looking into this!
    • By daniel_puehringer
      Hey,

      so we all know about SEO and the importance of performance. Basically we do it, because if no one finds the website we just built, it´s frustrating. We all try to write clean markup, css and js code and most might have a webpack/gulp/whatever pipeline to minimize css&js.
      But when thinking about it, optimizing your pipeline might save you a few (hundreds) of kb, compared to loading an image with 1 mb that´s literally nothing and frankly just ridiculous.

      Don´t get me wrong, frontend pipelines are great and should be used, but let´s shift your "I will optimize the shit out of that 3 css lines" focus to something different: try to serve images as fast as possible, this is where the performance boost really happens.

      I´m no pro on processwire so far, but I built a very easy to use picture element, which some of you could find interesting:

      1. the picture comes with 3 different sizes: one for mobile (keep in mind the double dpi, therefore width of 828px), one for tablet and one for desktop
      2. the picture generates a webp version and the original file extension as a fallback
      3. the filesize of each element is rendered within the "data" attribute
      4. lazy loading(sooo important!!!) is done via the native 'loading="lazy"' attribute.


      Please try it out and see the difference 🙂

      I posted this so others can easily optimize their images, but I would also like to hear your suggestions in making it better. Maybe you could decrease the rendering time or maybe you have some easy improvements.

      Please let me know.

      Greetings from Austria!


       
      <picture> <source data="<?php echo($oElement->repeater_image->width(828)->webp->filesize);?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(828)->filesize) ?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->width(767)->webp->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(767)->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->webp->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->webp->url) ?>" type="image/webp"> <source data="<?php echo($oElement->repeater_image->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->url) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> <img data="<?php echo($oElement->repeater_image->filesize) ?>" class="img-fluid" loading="lazy" src="<?php echo($oElement->repeater_image->url) ?>" alt="<?php echo($oElement->repeater_image->description) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> </picture>
    • By neophron
      Hi guys,
      after getting a complain message from google about a robots.txt (where everything is ok), I searched for an online tool, where I can test my robots.txt files. I found this website: https://technicalseo.com/tools/
      This page offers a bunch of nice tools, just wanted to share it with you.

×
×
  • Create New...