Request for IDX Page Layout Improvements for SEO/Performance/Customization 2015-02-12T00:06:33+00:00

Build with IDX Broker Forums Enhancement Requests Request for IDX Page Layout Improvements for SEO/Performance/Customization

  • Author
    Posts
  • imFORZAimFORZA
    Participant
    Post count: 68

    I am gonna break this done into two parts. For starters ALL of the templates need some big improvements, For PART 1, I listed the 5 biggest updates needed for the templates in what we believe to be the order of importance:

    1) NONE of the templates use h1, h2, or h3 tags. This is especially hurtful for SEO when details pages are competing against other providers. Zillow, Trulia, iHomeFinder, Diverse Solution, etc all use header tags for the address on a property details page. Since the IDX Broker templates don’t use headers they don’t rank as well in search results.

    2) Clients (and more often Partners) write custom css for the various IDX Pages. However if a client or someone changes templates the custom css causes issues breaking the pages. VirtualResults posted about this here:

    http://developers.idxbroker.com/forums/topic/custom-css-for-variable-page-layouts/

    I submitted a very simply request that would solve this issue by wrapping the idx page content in another div which uses an id or class name. Here is an example of how that might look:

     <div id="idx-mobile-first-details" class="mobile-first-details-v1">
      <div id="idx-main" class="idx-not-logged-in idx-page-listing idx-category-details idx-type-default idx-wrapper-standard" data-pageid="">
     
     IDX Page Template Code
     
      </div>
     </div>
     

    This seems like a simple elegant solution that allows developers to nest all their styles under this parent id or class. The ticket number provided to me when I submitted this issue was #3024. Assuming the developers wraps all of their styles correctly then the page won’t break when the clients change their templates.

    3) Add support for Schema – Zillow, Trulia, and others already are using schema and we want IDX pages to do everything possible to keep up with these guys. While I know a standard for Real Estate properties has yet to be truly defined it seems most big portals/sites are using SingleFamilyResidence so I suggest that is what gets used. Also the Real Estate Agent schema should be used wherever the agent information is displayed, most importantly on the single agent page.

    4) Some other big development improvements I would like to see that would help the templates with performance:

    a) Add an alt tag and image dimensions for ajaxLoadBar.gif.
    b) Update jQuery to the latest version and load from Google’s CDN.
    c) Load Javascript at the bottom of the page templates when possible.
    d) Use Relative Path for all urls (// instead of http:// or https://), this will allow better support for https.
    e) Minify all the CSS and JS. Examples of a few files that could be minified:
    * //d1qfrurkpai25r.cloudfront.net/graphical/css/jquery-ui-bootstrap.css
    * //d1qfrurkpai25r.cloudfront.net/graphical/css/select2.css
    * //INSTALLNAME.idxbroker.com/graphical/frontend/css/idxstyles.php?t=134%7C120%7C1%7C136%7C34%7C142%7C195%7C5%7C7%7C8%7C9%7C6%7C10%7C11%7C12&a=353&w=s&c%5Bs%5D=
    * //INSTALLNAME.idxbroker.com/idx/javascript/search.js
    * Inline JS elements on the pages

    5) If you are gonna be updating the templates I also suggest all the id’s and classes STOP using camelCase and use hyphens instead. Here are some examples of other developers/users who would agree:

    * http://codeguide.co/#css-syntax (See under Class names)
    * http://csswizardry.com/2010/12/css-camel-case-seriously-sucks/
    * http://css-tricks.com/new-poll-hyphens-or-dashes/
    * Bootstrap switched to hyphens in v3 – http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

    ================================

    For Part 2, I really think the whole template system should just be rewritten with support for a liquid markup system. This would allow clients/partners the greatest flexibility in modifying templates as needed. Here are a few examples of other companies/services using liquid tags:

    * Desk.com – https://support.desk.com/customer/portal/articles/2916-list-of-liquid-variables
    * Shopify.com – http://docs.shopify.com/themes/liquid-documentation/objects
    * ZenDesk – https://support.zendesk.com/hc/en-us/articles/203662146-Using-Liquid-markup-to-customize-comments-and-email-notifications

    In addition to liquid markup, I think the system also requires some kind of versioning. Maybe having it all saved in a git repo for example. This way all changes can be tracked as who made the change, when it was made, and most importantly offering a way to revert to a previous version.

    13 ratings, 13 votes13 ratings, 13 votes (+13 rating, 13 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • officeto-go
    Participant
    Post count: 2

    I just joined here but great recommendations you made.

    13 ratings, 13 votes13 ratings, 13 votes (+13 rating, 13 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Antonio Ortega
    Keymaster
    Post count: 172

    These are great suggestions and I can say that part 1 ” templates use h1, h2, or h3 tags.” has become an enhancement in an upcoming sprint. YAY

    Since this is such a highly up voted thread we are looking into the other requests here as well. Please continue to up vote and post on any particular part of the this thread that interests you.

    13 ratings, 13 votes13 ratings, 13 votes (+13 rating, 13 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Tony Eppright
    Participant
    Post count: 21

    Great recommendations. Glad to hear about the upcoming improvements by adding the h1-h6 tags, and looking forward to the other changes.

    13 ratings, 13 votes13 ratings, 13 votes (+13 rating, 13 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • imFORZAimFORZA
    Participant
    Post count: 68

    I wanted to just provide an update in this thread, just to let everyone know where we are with my requests.

    IDX Broker has released the ability to do Dynamic Tags in sub headers. I found this to be an interesting way to solve issue #1 on my list. It also partially solved issue #3 as well.

    KB Article on Dynamic Heading Tags
    http://support.idxbroker.com/customer/en/portal/articles/1988482-dynamic-heading-tags?b_id=10433

    It was a great introduction to using liquid variables (my part 2) in IDX Broker. If they continue this route and cover all the needed variables, then it would be huge improvements to the system. Here are just some of the changes I could see:

    * Developers and clients would now have full control over the html/layout of pages, but still give IDX Broker the ability to disable layouts if dev/client doesn’t follow MLS rules. They could also add checks to make sure certain variables such as the MLS logo get used before the template/layout could even be saved.

    * Sub headers would no longer be needed as all users could just add html/css/js where it is needed within the template/layout box.

    * Custom CSS is probably not needed as well, users can just link or add any css as they would for any other site. But they could have a liquid variable {{custom-css-link}} for users to use it in templates until it gets faded out.

    * Several of the preferences could probably disappear as well: ShareThis, Client Logo, Custom Image for Properties without photos, Global Design Settings, etc.

    This would be a big change, so anyone with thoughts/suggestions/ideas/complaints, don’t be afraid to post them.

    13 ratings, 13 votes13 ratings, 13 votes (+13 rating, 13 votes, rated)
    You need to be a registered member to rate this post.
    Loading...

You must be logged in to reply to this topic.