eZ Publish Search Engine Optimization
Saturday 17 June 2006 1:22:00 pm
The structure of a web page consists of:
- the content of the document (data and metadata)
- navigation elements (links between pages)
- additional information (banners, footer, information blocks not directly connected with the core content)
Different information blocks can be positioned in different locations on the page (in this case (1) header, (2) horizontal menu, (3) vertical menu, (4) main content, (5) additional information, (6) footer).
In the past, a page layout such as the one shown above would have been implemented via an HTML table structure. All the components of the page ? the content (in HTML format) and design (HTML code for tables and CSS styles) - were included in one document. This made it difficult for webmasters to change the page design, because items such as the information boxes are associated with a specific cell in the table. This design also made it difficult for search engines to understand the content and analyze it correctly.
Additionally, table-based design made it impossible to display websites correctly on non-standard browsers such as:
- text-only browsers
- voice-driven accessibility interfaces
- mobile and hand-held browsers with small screens
One of the advantages of the eZ Publish template system is that the layout is determined via <div> blocks ( table-less layout) rather than tables. Web developers construct pages from information blocks (header, menu, main content, additional or related information, footer, etc.) and then specify the layout using external style sheets (CSS files).
The page layout with the vertical menu positioned as the left column block
The page layout with the horizontal menu positioned as part of header block.
Valid XHTML source code allows people and search engines to precisely understand the content of the document. XHTML and CSS code connected via the page layout template (the main eZ Publish template - pagelayout.tpl) reduces page size (because formatting like fonts, sizes and colors are stored in re-usable CSS files).