wiki:TechnicalDescription

Version 11 (modified by dagmon, 11 years ago) (diff)

—

Technical description

  1. Technical description
  2. 1. Technical requirements
    1. 1.1. Google tag manager
    2. 1.2. All site pages on https
    3. 1.3. Hidden "trafficsource" field to in the user registration forms
    4. 1.4. Embedding of youtube
    5. 1.5. Use the open graph protocol
    6. 1.6. Don’t forget the favicon: ​http://css-tricks.com/favicon-quiz/
    7. 1.7. RSS feed for new courses
    8. 1.8. Direct URL to filtered view
  3. 2. SEO
    1. 2.1. Page level robots
    2. 2.2. Meta title
    3. 2.3. Meta description
    4. 2.4. Canonical field
    5. 2.5. Friendly URLs
    6. 2.6. HTTP Code 301 redirection Management
    7. 2.404. page
    8. 2.405. Templates requirements
    9. 2.406. Semantics (correct headings)
    10. 2.407. No flash
    11. 2.408. Img alt
    12. 2.409. Robots.txt upload via ftp
    13. 2.410. Search engine friendly Breadcrumbs markup
    14. 2.411. No-www  with www redirection (if not on subdomain)
    15. 2.412. XML Sitemap
    16. 2.413. “Semantic” IDs and Classes for in tags for better event management via GoogleTagManager.
    17. 2.414. Ability to inject third party code at the bottom of the <head>

1. Technical requirements

1.1. Google tag manager

Free tag management through which we manage Google Analytics and other scripts. Please add the following directly under the <body> on every page (please make sure it's the very first element under the body tag) 

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WWHZ4H"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WWHZ4H');</script>
<!-- End Google Tag Manager -->

1.2. All site pages on https

1.3. Hidden "trafficsource" field to in the user registration forms

It is a field where I store marketing data per user, that should be stored in the database once the user is registered. Should be added as a hidden field on the registration form, with a unique ID/class value (name it with "ts") and then will be dynamically populated with data. It will be a string of different values, max 512 chars.

1.4. Embedding of youtube

We need to have the ability to embed youtube movies in a way that will be responsive.

1.5. Use the open graph protocol

(​http://ogp.me/) for good presentation on social media. These fields' values should be dynamically populated (so, no user input here), based on the existing content of the page (meta title, featured image and etc.)

1.6. Don’t forget the favicon: ​http://css-tricks.com/favicon-quiz/

1.7. RSS feed for new courses

We should have a feed for new courses that are online. See the most recent guidelines of Google: ​http://googlewebmastercentral.blogspot.nl/2014/10/best-practices-for-xml-sitemaps-rssatom.html

(By the way it should be only for courses. once we have a blog, the blog will have its own RSS feed for blog posts)

1.8. Direct URL to filtered view

To design the course catalogue so we can provide a URL to a user that will direct him to a filtered view. (when the filtered view is reached, the relevant filter button should be “turned on”.) Use case: I would like to link to the course catalogue when only the water management courses are displayed, or, for example, to display only free courses, sorted by the start date. ​See example.

2. SEO

2.1. Page level robots

Add a meta like 

<meta name="robots" content="..., ..." />

With drop down values: 1) index, follow 2) noindex, nofollow 3) index, no follow 4) noindex, follow

2.2. Meta title

User input for meta title.

2.3. Meta description

User input for meta description.

2.4. Canonical field

User input for 

<link rel="canonical" href="{{user input}}"

/>

Important: If the input field isn't field by the user, then this field shouldn't be rendered.

2.5. Friendly URLs

Ability to change the url, but with keeping the hierarchy of the pages. Note: Let's discuss it f2f.

2.6. HTTP Code 301 redirection Management

Ability to point one old URL to another, through 301 redirect. (I'd rather not do it by manually editing htaccess, but on the application level).

2.404. page

Create HTTP Code 404 page sending a valid 404 response error. It should be a customizable page on our CMS.

2.405. Templates requirements

No frames, no iframes for content, no table for layout, no flash.

2.406. Semantics (correct headings)

We should discuss what would be the h1, h2, h3, h4 before we cut the HTML.

2.407. No flash

2.408. Img alt

User input for the alt value: 

<img src="image.gif" alt="{{user input}}">

2.409. Robots.txt upload via ftp

2.410. Search engine friendly Breadcrumbs markup

See ​https://schema.org/breadcrumb This is for better indexing by search engines.

2.411. No-www  with www redirection (if not on subdomain)

Not sure it's relevant

2.412. XML Sitemap

We should put sitemap.xml file on the root domain .

2.413. “Semantic” IDs and Classes for in tags for better event management via GoogleTagManager.

2.414. Ability to inject third party code at the bottom of the <head>

(this cannot be done using google tag manager). This is needed for A/B testing software.