Metadata tags
This course covers the tags inside the HTML <head>, which never render on the page but control how it is found and shown elsewhere. It starts with charset, title and viewport, then moves to meta description, canonical links and meta robots for search engines. It explains Open Graph and Twitter Cards for link previews, favicons and icons across devices, and linking stylesheets and other resources. The final lesson assembles a complete, production-ready <head> in a Rails layout file.
What you'll learn
- ✓Why <head> content never renders and what it controls
- ✓Setting charset, title and viewport correctly and in the right order
- ✓Using meta description, canonical and robots tags for search engines
- ✓Controlling link previews with Open Graph and Twitter Cards
- ✓Serving favicons and icons for tabs, iOS and Android
- ✓Linking stylesheets in Rails and using rel values like preload and dns-prefetch
The part of the page nobody sees
The last course built a render tree from the DOM and the CSSOM. Elements with display: none are left out of it, though they still exist in the DOM. The <head> element is different in a more fundamental way: its children were never rendering candidates to begin with. A <title> or <meta> tag doesn't…
Read the full lesson free →Curriculum
7 lessonsThe part of the page nobody sees
Explains why <head> children never render and how one Rails layout shares them across every page.
The essential trio: charset, title, viewport
Covers meta charset, title and meta viewport, what each one controls, and what breaks without them.
Describing the page to search engines
Shows how meta description, canonical links and meta robots shape search snippets, indexing and duplicate URLs.
Open graph and Twitter cards: controlling link previews
Explains the Open Graph and Twitter tags that build link previews, including image size and absolute URLs.
Favicons and icons across devices
Covers favicon sizes, apple-touch-icon, the web app manifest, and how Rails serves icons from public.
Linking stylesheets and other resources
Explains why stylesheets go in <head>, how stylesheet_link_tag fingerprints files, and other rel values.
Putting it all together: a complete, production-ready <head>
Assembles every tag into one Rails layout <head> and lists ways to check that each part works.