هل يمكنني إضافة microdata من HTML5 إلى موقع صارم XHTML وما زلت متوافقًا؟

https://stackoverflow.com/questions/3659778

01-10-2019
|

سؤال

لقد حصلت على موقع مشفر في XHTML 1.0 صارمة. أرغب في استخدام microdata الجديد لإضافة فتات الخبز إلى موقعي (لذا ستفهمهم Google).

يبدو أن فتات الخبز غير المميزة غير الميكرودية تبدو مثل هذا:

<ul>
  <li><a href="...">Level 1</a></li>
  <li><a href="...">Level 2</a></li>
  <li><a href="...">Level 3</a></li>
</ul>

وفقًا لـ Google ، لتمييز فتات الخبز باستخدام microdata ، يمكنك تمديد الكود أعلاه مثل هذا:

<ul>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="..." itemprop="url">
      <span itemprop="title">Level 1</span>
    </a>
  </li>
  ...
</ul>

ولكن هذا غير صالح XHTML 1.0 صارمة.

ماذا علي أن أفعل؟
هل يجب أن أتجاهل صراعات التحقق من الصحة؟
هل يجب أن أكتب itemscope="itemscope" بدلا من مجرد itemscope (سيكون هذا XML صالحًا ، لكن لا يزال غير صالح XHTML)؟
هل يجب أن أقوم بتغيير Doctype إلى HTML5 بدلاً من XHTML 1.0 صارمة؟

أريد أن يعمل هذا طوال الطريق إلى IE6!

من فضلك النصيحة :)

المحلول

نعم ، إذا كنت تريد استخدامها itemscope في XHTML ، ستحتاج إلى الكتابة itemscope="itemscope" واستخدام XHTML5 (نفس doctype مثل HTML5 ، ولكن بناء الجملة XML).

itemscope غير مدرج في W3 HTML5 ، ولكن موجود في إصدار Whatwg ، لذلك قد لا يزال التحقق من الصحة يمثل صعوبة. يبدو أن هناك بعض الحجة السياسية في هذه المسألة ، التي لم أتابعها لأنها تبدو مملة إلى حد ما.

في الوقت الحالي ، إذا كنت ترغب في استخدام تعليقات Breadcrumb بتنسيق مستندات نهائي ، يمكنك استخدام RDFA بدلاً من ذلك: الاقتراح البديل (ولكن الأقدم) ، وهو ما تدور حوله الوسيطة ، واستخدام Doctype الحالي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

نصائح أخرى

منذ أن قررت محركات البحث الرئيسية schema.org في يونيو الماضي (2011) كما ال طريقة للقيام بمقتطفات غنية ، أصبح هذا السؤال أكثر أهمية بكثير رؤية XHTML5 ليس لديها بعد DTD عاملة (راجع للشغل ، http://www.html5dtd.org/ يعمل على XHTML5 DTD وقد يكون جاهزًا عندما تقرأ هذا ، إذا تجاهل ما أنا على وشك قوله). وما الذي أنا على وشك قوله يلخص صفحة وضعت في http://www.nedprod.com/programs/portable/xhtmlwithhtml5microdata/ قبل بضعة أسابيع ، ولديه المزيد من التفاصيل بما في ذلك العرض التجريبي الغني إذا كنت تريد ذلك.

كنت بحاجة إلى توسيع XHTML 1.x صارمة مع schema.org/html5 microdata والحصول على كل شيء للتحقق من صحة بشكل صحيح لتحديث Nedprod ، و Microsoft تعبير Web له ميل عرضي لتناول أجزاء من HTML IT IT عندما تكون البركان. ومن هنا قمت بإنشاء هذه DTDs التي تمد XHTML 1.0 القياسية:

ليستخدم، خذ نسخة من DTD المطلوب (لا تستخدم الأصل من Nedprod ، لا يمكنني تحمل النطاق الترددي) واستخدامه على النحو التالي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">

أو ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">

... أو على الأرجح ، تجاوز DTD المستخدمة للتحقق من صحة إعداد XML الخاص بك.

راجع للشغل ، إليك شيء مثير للاهتمام ، وأنا أدرج هذا فقط لأنه من المفيد معرفة عند الإجابة على السؤال. أنا صادق على الله اعتقد أن استخدام Doctypes أعلاه سوف يستدعي وضع المراوغات عند تقديم. تبين ، لدهشتي العظيمة ، أن IE8 و Chrome 14 و Firefox 5 و Opera 11.50 كلها تجعل مثل هذا doctype في وضع المعايير. من كان يظن! لذلك يمكنك ، إذا أردت ذلك ، تحميل صفحات XHTML الخاصة بك على الإنترنت العام باستخدام Doctype المخصص والمتصفحات الأحدث على الأقل سيفعل الشيء الصحيح.

أمل أن هذا يساعد شخصاما،
نايل

مثال على HTML 5 صالح

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
    <div itemscope="" itemtype="http://schema.org/MediaObject">
        <div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
           <meta itemprop="name" content="Breast Augmentation Video Diary">
           <meta itemprop="duration" content="PT12M54S">
           <meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
           <meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
           <meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&amp;v=BwPN6eCpxTk">
           <meta itemprop="uploadDate" content="2010-11-09">
           <iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&amp;autohide=1&amp;modestbranding=1&amp;showinfo=0"></iframe>
           <span itemprop="description">Video Diary</span>
        </div>
   </div>
</body>
</html>

وجدت هذه الروابط مفيدة:
- http://support.google.com/webmasters/bin/answer.py؟hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/

استخدم ال application/ld+json نوع MIME و مولد microdata لتحويل الترميز إلى البيانات:

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>microdata.xhtml</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    </head>
    <body>
      <div>
      <script type="application/ld+json">
      {"items": [{
        "type": ["https://schema.org/breadcrumb"],
        "properties":{ 
        "url": ["..."],
        "title": ["Level 1"]
        }
       }]
      }
      </script>
      </div>
    </body>
    </html>

أو أ data:uri في علامة كائن:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>microdata.xhtml</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    </head>
    <body>
      <div>
        <object data="data:text/html;charset=utf-8;base64,PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==">

          <?microdata
          <ul>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
             <a href="..." itemprop="url">
               <span itemprop="title">Level 1</span>
             </a>
            </li>
          </ul>
          ?>

        </object>
      
        <!--[if lt IE 8]>
        <object data="mhtml://#foo">

          <?microdata
          <ul>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
             <a href="..." itemprop="url">
               <span itemprop="title">Level 1</span>
             </a>
            </li>
          </ul>
          ?>
          <div id="foo">
              PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==
          </div>
       </object>
       <![endif]-->
      </div>
    </body>
    </html>

أريد أن يعمل هذا طوال الطريق إلى IE6!

استخدم ال application/xhtml+xml XSLT Shim لدعم IE6 وتوسيعها للحصول على نسخة من العلامات.

مراجع

حاول التحقق من صحة بعض صفحات Google ... فهي لا تتحقق. التحقق من الصحة هو أداة رائعة ، ولكن لا شيء أكثر من ذلك ، على الرغم من أنني أشيد بتصميمك. إذا كنت قلقًا بشأن التحقق من الصحة ، فسأتحول إلى HTML5.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow