| Version 15 (modified by dagmon, 11 years ago) (diff) |
|---|
Technical description
- Technical description
- 1. Technical requirements
-
2. SEO
- 2.1. Page level robots
- 2.2. Meta title
- 2.3. Meta description
- 2.4. Canonical field
- 2.5. Friendly URLs
- 2.6. HTTP Code 301 redirection Management
- 2.404. page
- 2.405. Templates requirements
- 2.406. Semantics (correct headings)
- 2.407. Img alt
- 2.408. Optimization
- 2.409. Robots.txt upload via ftp
- 2.410. Search engine friendly Breadcrumbs markup
- 2.411. No-www with www redirection (if not on subdomain)
- 2.412. XML Sitemap
- 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 top of the <head>
- 2.415. Connecting to Youtube API
1. Technical requirements
1.1. Google tag manager (GTM)
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. 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.5. Don’t forget the favicon: http://css-tricks.com/favicon-quiz/
1.6. 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.7. 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.
- HTML5 markup template
- no flash.
- Responsive videos and lightboxes.
- Add rel="home" to the clickable logo.
- Efficient responsive rendering - on mobile view, to render and load elements as needed (in contrast to display:hide)
2.406. Semantics (correct headings)
We should discuss what would be the h1, h2, h3, h4 before we cut the HTML.
2.407. Img alt
User input for the alt value:
<img src="image.gif" alt="{{user input}}">
2.408. Optimization
https://developers.google.com/speed/pagespeed/ Google PageSpeed optimization techniques and recommendations (Minifiy CSS/JS, browser/server caching, sprites, 3rd party delivery, prioritize visible content, SPDY and etc…)
- Consider uploading and serving assets on another sub.subdomain (media.des.tudelft.nl) for faster media serving.
2.409. Robots.txt upload via ftp
2.410. Search engine friendly Breadcrumbs markup
See https://schema.org/breadcrumb This is additional markup in the element, for better indexing by search engines.
2.411. No-www with www redirection (if not on subdomain)
(Not sure it's still relevant)
2.412. XML Sitemap
We should put sitemap.xml file on the root domain. See instructions here. We would like to have sitemap that includes both page and videos.
2.413. “Semantic” IDs and Classes for in tags for better event management via GoogleTagManager.
For example, if we have a "register now" button on the sidebar, please add like the following:
<a class="register-button">Register now</a>
So I'll be able to target individual elements with GTM.
2.414. Ability to inject third party code at the top of the <head>
I will need to add a JS code for A/B testing, at the top of the <head> section. This should be added on the page level.
(this cannot be done using google tag manager). This is needed for A/B testing software.
2.415. Connecting to Youtube API
Requirement for the next development round (after January). For better event tracking.
