Note: You are viewing the development version of Schema.org. See how we work for more details.

beforeMedia

A Schema.org Property
A media object representing the circumstances before performing this direction.

Values expected to be one of these types

Used on these types

Examples

Example 1
Copied
Example notes or example HTML without markup.
  1. <div>
  2.   <strong><span>Change a Flat Tire</span></strong>
  3.   <div>About <span>$20</span></div>
  4.   <div>About <span>30 minutes</span></div>
  5.   <div>Necessary Items:</div>
  6.   <div>Spare tire</div>
  7.   <div>Lug wrench</div>
  8.   <div>Jack</div>
  9.   <div>Wheel wedges</div>
  10.   <div>Flares</div>
  11.   <div id="steps">
  12.     <div>Preparation</div>
  13.     <div>
  14.       <div>
  15.         Turn on your hazard lights and set the flares.
  16.       </div>
  17.       <div>
  18.         You're going to need space and want to be visible.</div>
  19.       <div>
  20.         <div>
  21.           Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.
  22.         </div>
  23.         <div>
  24.           You don't want the car to move while you're working on it.
  25.         </div>
  26.       </div>
  27.     </div>
  28.   </div>
  29.   <div id="steps">
  30.     <div>Raise the car</div>
  31.     <div>
  32.       <div>
  33.         <span><img alt="image showing positioning of jack" src="position-jack.jpg" /></span>
  34.         Position the jack underneath the car, next to the flat tire.
  35.       </div>
  36.     </div>
  37.     <div>
  38.       <div>
  39.         <span><img alt="image showing car while still on the ground" src="car-on-ground.jpg" /></span>
  40.         Raise the jack until the flat tire is just barely off of the ground.
  41.         <span><img alt="image showing car raised by jack" src="car-raised.jpg" /></span>
  42.       </div>
  43.       <div>
  44.         It doesn't need to be too high.
  45.       </div>
  46.     </div>
  47.     <div>
  48.       <div>
  49.         Remove the hubcap and loosen the lug nuts.
  50.       </div>
  51.     </div>
  52.     <div>
  53.       <div>
  54.         Remove the flat tire and put the spare tire on the exposed lug bolts.
  55.       </div>
  56.     </div>
  57.     <div>
  58.       <div>
  59.         Tighten the lug nuts by hand.
  60.       </div>
  61.       <div>
  62.         Don't use the wrench just yet.
  63.       </div>
  64.     </div>
  65.   </div>
  66.   <div id="steps">
  67.     <div>Finishing up</div>
  68.     <div>
  69.       <div>
  70.         Lower the jack and tighten the lug nuts with the wrench.
  71.       </div>
  72.     </div>
  73.     <div>
  74.       <div>
  75.         Replace the hubcap.
  76.       </div>
  77.     </div>
  78.     <div>
  79.       <div>
  80.         Put the equipment and the flat tire away.
  81.       </div>
  82.     </div>
  83.   </div>
  84. </div>
Example encoded as Microdata embedded in HTML.
  1. <div itemscope itemtype="https://schema.org/HowTo">
  2.   <strong><span itemprop="name">Change a Flat Tire</span></strong>
  3.   <div>About <span itemprop="estimatedCost" itemscope itemtype="https://schema.org/MonetaryAmount">
  4.     <meta itemprop="currency" content="USD"/>
  5.     <meta itemprop="value" content="20"/>
  6.   </span>$20</div>
  7.   <div>About <span itemprop="totalTime" content="PT30M">30 minutes</span></div>
  8.   <div>Necessary Items:</div>
  9.   <div itemprop="tool">Spare tire</div>
  10.   <div itemprop="tool" itemscope itemtype="https://schema.org/HowToTool">
  11.     <span itemprop="name">Lug wrench</span>
  12.     <img alt="image of a lug wrench" itemprop="image" src="lug-wrench.jpg"/>
  13.   </div>
  14.   <div itemprop="tool">Jack</div>
  15.   <div itemprop="tool" itemscope itemtype="https://schema.org/HowToTool">
  16.     <span itemprop="name">Wheel wedges</span>
  17.     <img alt="image showing wheel wedges" itemprop="image" src="wheel-wedges.jpg"/>
  18.   </div>
  19.   <div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
  20.     <span itemprop="name">Flares</span>
  21.     <img alt="image of flares" itemprop="image" src="flares.jpg"/>
  22.   </div>
  23.   <div itemprop="step" itemscope itemtype="https://schema.org/HowToSection">
  24.     <div itemprop="name">Preparation</div>
  25.     <meta itemprop="position" content="1"/>
  26.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  27.       <meta itemprop="position" content="1"/>
  28.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  29.         <meta itemprop="position" content="1"/>
  30.         <div itemprop="text">Turn on your hazard lights and set the flares.</div>
  31.       </div>
  32.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToTip">
  33.         <meta itemprop="position" content="2"/>
  34.         <div itemprop="text">You're going to need space and want to be visible.</div>
  35.       </div>
  36.     </div>
  37.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  38.       <meta itemprop="position" content="2"/>
  39.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  40.         <meta itemprop="position" content="1"/>
  41.         <div itemprop="text">Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.</div>
  42.       </div>
  43.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToTip">
  44.         <meta itemprop="position" content="2"/>
  45.         <div itemprop="text">You don't want the car to move while you're working on it.</div>
  46.       </div>
  47.     </div>
  48.   </div>
  49.   <div itemprop="step" itemscope itemtype="https://schema.org/HowToSection">
  50.     <div itemprop="name">Raise the car</div>
  51.     <meta itemprop="position" content="2"/>
  52.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  53.       <meta itemprop="position" content="1"/>
  54.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  55.         <meta itemprop="position" content="1"/>
  56.         <img alt="image showing positioning of jack" itemprop="duringMedia" src="position-jack.jpg" />
  57.         <div itemprop="text">Position the jack underneath the car, next to the flat tire.</div>
  58.       </div>
  59.     </div>
  60.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  61.       <meta itemprop="position" content="2"/>
  62.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  63.         <meta itemprop="position" content="1"/>
  64.         <div itemprop="beforeMedia" itemscope itemtype="https://schema.org/ImageObject">
  65.           <img alt="image showing car while still on the ground" itemprop="contentUrl" src="car-on-ground.jpg" />
  66.         </div>
  67.         <div itemprop="text">Raise the jack until the flat tire is just barely off of the ground.</div>
  68.         <div itemprop="afterMedia" itemscope itemtype="https://schema.org/ImageObject">
  69.           <img alt="image showing car raised by jack" itemprop="contentUrl" src="car-raised.jpg" />
  70.         </div>
  71.       </div>
  72.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToTip">
  73.         <meta itemprop="position" content="2"/>
  74.         <div itemprop="text">It doesn't need to be too high.</div>
  75.       </div>
  76.     </div>
  77.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  78.       <meta itemprop="position" content="3"/>
  79.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  80.         <meta itemprop="position" content="1"/>
  81.         <div itemprop="text">Remove the hubcap and loosen the lug nuts.</div>
  82.       </div>
  83.     </div>
  84.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  85.       <meta itemprop="position" content="4"/>
  86.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  87.         <meta itemprop="position" content="1"/>
  88.         <div itemprop="text">Remove the flat tire and put the spare tire on the exposed lug bolts.</div>
  89.       </div>
  90.     </div>
  91.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  92.       <meta itemprop="position" content="5"/>
  93.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  94.         <meta itemprop="position" content="1"/>
  95.         <div itemprop="text">Tighten the lug nuts by hand.</div>
  96.       </div>
  97.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToTip">
  98.         <meta itemprop="position" content="2"/>
  99.         <div itemprop="text">Don't use the wrench just yet.</div>
  100.       </div>
  101.     </div>
  102.   </div>
  103.   <div itemprop="step" itemscope itemtype="https://schema.org/HowToSection">
  104.     <div itemprop="name">Finishing up</div>
  105.     <meta itemprop="position" content="3"/>
  106.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  107.       <meta itemprop="position" content="1"/>
  108.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  109.         <meta itemprop="position" content="1">
  110.         <div itemprop="text">Lower the jack and tighten the lug nuts with the wrench.</div>
  111.       </div>
  112.     </div>
  113.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  114.       <meta itemprop="position" content="2"/>
  115.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  116.         <meta itemprop="position" content="1"/>
  117.         <div itemprop="text">Replace the hubcap.</div>
  118.       </div>
  119.     </div>
  120.     <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToStep">
  121.       <meta itemprop="position" content="3"/>
  122.       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
  123.         <meta itemprop="position" content="1"/>
  124.         <div itemprop="text">Put the equipment and the flat tire away.</div>
  125.       </div>
  126.     </div>
  127.   </div>
  128. </div>
Example encoded as RDFa embedded in HTML.
  1. <div vocab="https://schema.org/" typeof="HowTo">
  2.   <strong><span property="name">Change a Flat Tire</span></strong>
  3.   <div>About <span property="estimatedCost" typeof="MonetaryAmount">
  4.     <meta property="currency" content="USD"/>
  5.     <meta property="value" content="20"/>
  6.   </span>$20</div>
  7.   <div>About <span property="totalTime" content="PT30M">30 minutes</span></div>
  8.   <div>Necessary Items:</div>
  9.   <div property="tool">Spare tire</div>
  10.   <div property="tool" typeof="HowToTool">
  11.     <span property="name">Lug wrench</span>
  12.     <img alt="image of a lug wrench" property="image" src="lug-wrench.jpg"/>
  13.   </div>
  14.   <div property="tool">Jack</div>
  15.   <div property="tool" typeof="HowToTool">
  16.     <span property="name">Wheel wedges</span>
  17.     <img alt="image showing wheel wedges" property="image" src="wheel-wedges.jpg"/>
  18.   </div>
  19.   <div property="supply" typeof="HowToSupply">
  20.     <span property="name">Flares</span>
  21.     <img alt="image of flares" property="image" src="flares.jpg"/>
  22.   </div>
  23.   <div property="step" typeof="HowToSection">
  24.     <div property="name">Preparation</div>
  25.     <meta property="position" content="1"/>
  26.     <div property="itemListElement" typeof="HowToStep">
  27.       <meta property="position" content="1"/>
  28.       <div property="itemListElement" typeof="HowToDirection">
  29.         <meta property="position" content="1"/>
  30.         <div property="text">Turn on your hazard lights and set the flares.</div>
  31.       </div>
  32.       <div property="itemListElement" typeof="HowToTip">
  33.         <meta property="position" content="2"/>
  34.         <div property="text">You're going to need space and want to be visible.</div>
  35.       </div>
  36.     </div>
  37.     <div property="itemListElement" typeof="HowToStep">
  38.       <meta property="position" content="2"/>
  39.       <div property="itemListElement" typeof="HowToDirection">
  40.         <meta property="position" content="1"/>
  41.         <div property="text">Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.</div>
  42.       </div>
  43.       <div property="itemListElement" typeof="HowToTip">
  44.         <meta property="position" content="2"/>
  45.         <div property="text">You don't want the car to move while you're working on it.</div>
  46.       </div>
  47.     </div>
  48.   </div>
  49.   <div property="step" typeof="HowToSection">
  50.     <div property="name">Raise the car</div>
  51.     <meta property="position" content="2"/>
  52.     <div property="itemListElement" typeof="HowToStep">
  53.       <meta property="position" content="1"/>
  54.       <div property="itemListElement" typeof="HowToDirection">
  55.         <meta property="position" content="1"/>
  56.         <img alt="image showing positioning of jack" property="duringMedia" src="position-jack.jpg" />
  57.         <div property="text">Position the jack underneath the car, next to the flat tire.</div>
  58.       </div>
  59.     </div>
  60.     <div property="itemListElement" typeof="HowToStep">
  61.       <meta property="position" content="2"/>
  62.       <div property="itemListElement" typeof="HowToDirection">
  63.         <meta property="position" content="1"/>
  64.         <div property="beforeMedia" typeof="ImageObject">
  65.           <img alt="image showing car while still on the ground" property="contentUrl" src="car-on-ground.jpg" />
  66.         </div>
  67.         <div property="text">Raise the jack until the flat tire is just barely off of the ground.</div>
  68.         <div property="afterMedia" typeof="ImageObject">
  69.           <img alt="image showing car raised by jack" property="contentUrl" src="car-raised.jpg" />
  70.         </div>
  71.       </div>
  72.       <div property="itemListElement" typeof="HowToTip">
  73.         <meta property="position" content="2"/>
  74.         <div property="text">It doesn't need to be too high.</div>
  75.       </div>
  76.     </div>
  77.     <div property="itemListElement" typeof="HowToStep">
  78.       <meta property="position" content="3"/>
  79.       <div property="itemListElement" typeof="HowToDirection">
  80.         <meta property="position" content="1"/>
  81.         <div property="text">Remove the hubcap and loosen the lug nuts.</div>
  82.       </div>
  83.     </div>
  84.     <div property="itemListElement" typeof="HowToStep">
  85.       <meta property="position" content="4"/>
  86.       <div property="itemListElement" typeof="HowToDirection">
  87.         <meta property="position" content="1"/>
  88.         <div property="text">Remove the flat tire and put the spare tire on the exposed lug bolts.</div>
  89.       </div>
  90.     </div>
  91.     <div property="itemListElement" typeof="HowToStep">
  92.       <meta property="position" content="5"/>
  93.       <div property="itemListElement" typeof="HowToDirection">
  94.         <meta property="position" content="1"/>
  95.         <div property="text">Tighten the lug nuts by hand.</div>
  96.       </div>
  97.       <div property="itemListElement" typeof="HowToTip">
  98.         <meta property="position" content="2"/>
  99.         <div property="text">Don't use the wrench just yet.</div>
  100.       </div>
  101.     </div>
  102.   </div>
  103.   <div property="step" typeof="HowToSection">
  104.     <div property="name">Finishing up</div>
  105.     <meta property="position" content="3"/>
  106.     <div property="itemListElement" typeof="HowToStep">
  107.       <meta property="position" content="1"/>
  108.       <div property="itemListElement" typeof="HowToDirection">
  109.         <meta property="position" content="1">
  110.         <div property="text">Lower the jack and tighten the lug nuts with the wrench.</div>
  111.       </div>
  112.     </div>
  113.     <div property="itemListElement" typeof="HowToStep">
  114.       <meta property="position" content="2"/>
  115.       <div property="itemListElement" typeof="HowToDirection">
  116.         <meta property="position" content="1"/>
  117.         <div property="text">Replace the hubcap.</div>
  118.       </div>
  119.     </div>
  120.     <div property="itemListElement" typeof="HowToStep">
  121.       <meta property="position" content="3"/>
  122.       <div property="itemListElement" typeof="HowToDirection">
  123.         <meta property="position" content="1"/>
  124.         <div property="text">Put the equipment and the flat tire away.</div>
  125.       </div>
  126.     </div>
  127.   </div>
  128. </div>
Example encoded as JSON-LD in a HTML script tag.
  1. <script type="application/ld+json">
  2. {
  3.   "@context": "https://schema.org",
  4.   "@type": "HowTo",
  5.   "name": "Change a Flat Tire",
  6.   "estimatedCost": {
  7.     "@type": "MonetaryAmount",
  8.     "currency": "USD",
  9.     "value": "20"
  10.   },
  11.   "totalTime": "PT30M",
  12.   "tool": [
  13.     {
  14.       "@type": "HowToTool",
  15.       "name": "Spare tire"
  16.     },
  17.     {
  18.       "@type": "HowToTool",
  19.       "name": "Lug wrench",
  20.       "image": "lug-wrench.jpg"
  21.     },
  22.     {
  23.       "@type": "HowToTool",
  24.       "name": "Jack"
  25.     },
  26.     {
  27.       "@type": "HowToTool",
  28.       "name": "Wheel wedges",
  29.       "image": "wheel-wedges.jpg"
  30.     }
  31.   ],
  32.   "supply": {
  33.     "@type": "HowToSupply",
  34.     "name": "Flares",
  35.     "image": "flares.jpg"
  36.   },
  37.   "step": [
  38.     {
  39.       "@type": "HowToSection",
  40.       "name": "Preparation",
  41.       "position": "1",
  42.       "itemListElement": [
  43.         {
  44.           "@type": "HowToStep",
  45.           "position": "1",
  46.           "itemListElement": [
  47.             {
  48.               "@type": "HowToDirection",
  49.               "position": "1",
  50.               "text": "Turn on your hazard lights and set the flares."
  51.             },
  52.             {
  53.               "@type": "HowToTip",
  54.               "position": "2",
  55.               "text": "You're going to need space and want to be visible."
  56.             }
  57.           ]
  58.         },
  59.         {
  60.           "@type": "HowToStep",
  61.           "position": "2",
  62.           "itemListElement": [
  63.             {
  64.               "@type": "HowToDirection",
  65.               "position": "1",
  66.               "text": "Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat"
  67.             },
  68.             {
  69.               "@type": "HowToTip",
  70.               "position": "2",
  71.               "text": "You don't want the car to move while you're working on it."
  72.             }
  73.           ]
  74.         }
  75.       ]
  76.     },
  77.     {
  78.       "@type": "HowToSection",
  79.       "name": "Raise the car",
  80.       "position": "2",
  81.       "itemListElement": [
  82.         {
  83.           "@type": "HowToStep",
  84.           "position": "1",
  85.           "itemListElement": [
  86.             {
  87.               "@type": "HowToDirection",
  88.               "position": "1",
  89.               "duringMedia": "position-jack.jpg",
  90.               "text": "Position the jack underneath the car, next to the flat tire."
  91.             }
  92.           ]
  93.         },
  94.         {
  95.           "@type": "HowToStep",
  96.           "position": "2",
  97.           "itemListElement": [
  98.             {
  99.               "@type": "HowToDirection",
  100.               "position": "1",
  101.               "beforeMedia": {
  102.                   "@type": "ImageObject",
  103.                   "contentUrl": "car-on-ground.jpg"
  104.               },
  105.               "afterMedia": {
  106.                   "@type": "ImageObject",
  107.                   "contentUrl": "car-raised.jpg"
  108.               },
  109.               "text": "Raise the jack until the flat tire is just barely off of the ground."
  110.             },
  111.             {
  112.               "@type": "HowToTip",
  113.               "position": "2",
  114.               "text": "It doesn't need to be too high."
  115.             }
  116.           ]
  117.         },
  118.         {
  119.           "@type": "HowToStep",
  120.           "position": "3",
  121.           "itemListElement": [
  122.             {
  123.               "@type": "HowToDirection",
  124.               "position": "1",
  125.               "text": "Remove the hubcap and loosen the lug nuts."
  126.             }
  127.           ]
  128.         },
  129.         {
  130.           "@type": "HowToStep",
  131.           "position": "4",
  132.           "itemListElement": [
  133.             {
  134.               "@type": "HowToDirection",
  135.               "position": "1",
  136.               "text": "Remove the flat tire and put the spare tire on the exposed lug bolts."
  137.             }
  138.           ]
  139.         },
  140.         {
  141.           "@type": "HowToStep",
  142.           "position": "5",
  143.           "itemListElement": [
  144.             {
  145.               "@type": "HowToDirection",
  146.               "position": "1",
  147.               "text": "Tighten the lug nuts by hand."
  148.             },
  149.             {
  150.               "@type": "HowToTip",
  151.               "position": "2",
  152.               "text": "Don't use the wrench just yet."
  153.             }
  154.           ]
  155.         }
  156.       ]
  157.     },
  158.     {
  159.       "@type": "HowToSection",
  160.       "name": "Finishing up",
  161.       "position": "3",
  162.       "itemListElement": [
  163.         {
  164.           "@type": "HowToStep",
  165.           "position": "1",
  166.           "itemListElement": [
  167.             {
  168.               "@type": "HowToDirection",
  169.               "position": "1",
  170.               "text": "Lower the jack and tighten the lug nuts with the wrench."
  171.             }
  172.           ]
  173.         },
  174.         {
  175.           "@type": "HowToStep",
  176.           "position": "2",
  177.           "itemListElement": [
  178.             {
  179.               "@type": "HowToDirection",
  180.               "position": "1",
  181.               "text": "Replace the hubcap."
  182.             }
  183.           ]
  184.         },
  185.         {
  186.           "@type": "HowToStep",
  187.           "position": "3",
  188.           "itemListElement": [
  189.             {
  190.               "@type": "HowToDirection",
  191.               "position": "1",
  192.               "text": "Put the equipment and the flat tire away."
  193.             }
  194.           ]
  195.         }
  196.       ]
  197.     }
  198.   ]
  199. }
  200. </script>
Structured representation of the JSON-LD example.