Frontend
1.0.0
1.0.0
  • Introduction
  • Project Guidelines
    • INTRODUCTION
    • PROJECT SETUP
      • Frameworks
      • Static type checking
      • Code Quality Tools
      • Enforcing good practices
      • Testing
      • Code versioning flow
      • Continuous Integration & Delivery
      • Isolated component development
    • EFFECTIVE AND CONSISTENT WORKFLOW
      • Code structure, architecture
      • Code versioning and review flow
      • Testing
      • Continuous Integration & Delivery
      • Dependency checking
      • Project Management Tools
      • Communication
    • THE QUALITY OUTPUT
      • Great UX/UI
        • Design & User Experience
        • SEO, SMO
      • Accessibility
        • Introduction
        • Why a11y?
        • Fundamentals
        • A11y in STRV
          • Share Knowledge
          • Project Life Cycle
          • A11y culture
      • Performance
        • Bundle Size
        • Deployment
        • Audits & Reports
      • Stability
        • Documentation
        • Analytics & Error Tracking
        • Quality Assurance
      • Security
    • FINAL WORDS
    • ACKNOWLEDGEMENT
Powered by GitBook
On this page
  • Using the right semantics
  • Structured data
  • Useful links:

Was this helpful?

  1. Project Guidelines
  2. THE QUALITY OUTPUT
  3. Great UX/UI

SEO, SMO

PreviousDesign & User ExperienceNextAccessibility

Last updated 5 years ago

Was this helpful?

Search Engine Optimization (SEO) is a well-known term in frontend development. It’s all about metatags, descriptions, titles and semantic markups.

The lesser-known SMO stands for Social Media Optimization. Think of any social network (the most common are Facebook and Twitter) where your users can share your website. You need to set up the appropriate meta tags for these networks, too.

Using the right semantics

A valid, semantically-oriented HTML structure is essential if we want search engines to understand our page as much as possible. Therefore, certain rules should be met:

  • To properly split document content into logical pieces, always use HTML tags for content sectioning, such as <article>, <nav>, <header>, <main>, <footer>, <section>, <aside>.

  • Always use HTML tags that correspond with their content, e.g. <ul> or <ol> for lists etc. Never use semantically irrelevant tags just to achieve the desired appearance, e.g. using <table> to create a list of thumbnails for gallery is wrong, use <ul> with proper styling instead.

  • Make sure that the structure of headings reflects your content. You can quickly check and validate you current heading structure with a .

Structured data

Structured data is a part of vocabulary, which is a part of the concept. Its vision is to create a Web of linked data with the help of technologies that will enable people to create data stores on the Web, build vocabularies, and write rules for handling data. It is a standardized format for providing information about a page and classifying the page content. That means that by adding structured data to our page, we provide more accurate and targeted metadata about our content, which would otherwise be difficult or even impossible to get by automated machine-processing of our HTML content. This way we can help search engines understand our content better. One of the benefits is that Google and some other search engines can use this extra information to show customized search results, called rich results. Google supports various rich result types based on the type of our content. The full list of supported types with examples can be found at

Useful links:

  • – experiment and check if your structured data have all required properties

  • – debugging with real data after deployment

  • – full list of supported rich result types with examples

Chrome extension
Schema.org
Semantic web
Google Search Handbook
Structured Data Testing Tool
Google Search Console
Google Search Handbook
Case Studies
Slides from Frontend Meeting's presentation