Basic SEO for Web Developers Part 3



  • 1. Important Social Metadata

    • Sample Meta Tag Template: "Article"

    • Place this data between the <head> tags of your website

      <!-- Open Graph data -->
      <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article:     http://ogp.me/ns/article#">
      
      <meta property="og:title" content="Your Title Here" />
      <meta property="og:type" content="article" />
      <meta property="og:url" content="https://example.com/" />
      <meta property="og:image" content="https://example.com/image.jpg" />
      <meta property="og:description" content="Your Description Here" />
      <meta property="og:site_name" content="Your Site Name, i.e. Moz" />
      <meta property="fb:app_id" content="Your FB_APP_ID" />
      
      <!-- Twitter Card data -->
      <meta name="twitter:card" content="summary">
      <meta name="twitter:site" content="Your @publisher_handle">
      <meta name="twitter:title" content="Your Page Title">
      <meta name="twitter:description" content="Your Page description less than 200 characters">
      <meta name="twitter:creator" content="Your @author_handle">
      
      <!-- Twitter Summary card images must be at least 120x120px -->
      <meta name="twitter:image" content="https://example.com/image.jpg">
      
    • Social Metadata Best Practices
      i. Default to Open Graph

      • Facebook
      • Twitter
      • Google+
      • LinkedIn
      • Pinterest

      ii. Optimal Image Sizing

      • Choose large images over small
      • Twitter
        • Minimum 120 x 120px
        • No larger than 1MB
      • Facebook
        • Minimum 200 x 200px
        • Over 1200 x 630px recommended

    2. Rich Snippets and Structured Data

    • Enhance search results and help machines to understand your content
    • Common Vocabularies
    • Popular Formats
      • Microdata
      • RDFa
      • JSON-LD
    • Breadcrumbs
      <ol itemscope itemtype="http://schema.org/BreadcrumbList">
          <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="https://example.com/widgets">
                  <span itemprop="name">Widgets</span>
              </a>
              <meta itemprop="position" content="1" />
          </li>
         ›<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="https://example.com/widgets/large"> 
                 <span itemprop="name">Large Widgets</span>
              </a>
              <meta itemprop="position" content="2" />
          </li>
      </ol>
      
    • Reviews
      <div itemscope itemtype="http://schema.org/Review">
          <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Book">
              <span itemprop="name">The Art of SEO</span>
          </div>
          <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
              <span itemprop="ratingValue">5</span>
          </span>
          stars -  <b>"<span itemprop="name">A good read.</span>" </b>
          <span itemprop="author">Roger Mozbot</span>
          <span itemprop="reviewBody">The Art of SEO is a good book.</span>
      </div>
      
    • Common Structured Data Uses
      • Events
      • Business Information
      • People
      • Mobile Apps
      • Recipes
      • Media Content
      • Contact Data
      • Email Markup



  • Node.js

    Thanks @dev_lak 😍


  • Web Development

    thanks @dev_lak