Menggunakan markup logo Schema.org dengan gambar SVG

8

Saya telah membuat logo yang luar biasa dan saya menyimpannya dalam format AI dan SVG. Saya ingin menggunakan file SVG di situs karena logo akan muncul berkali-kali di seluruh situs dan akan lebih baik daripada menyimpan logo dalam format PNG dan memiliki permintaan sisi server yang tidak perlu. Sekarang, ini bekerja sangat baik menggunakan:

<svg id="my-logo" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g transform="scale(0.1)">
    <image x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
  </g>
</svg>

Sekarang masalah muncul ketika menggunakan logomarkup Schema.org . Menggunakan:

<svg itemscope itemtype="http://schema.org/Organization" id="my-logo" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g transform="scale(0.1)">
    <image itemprop="logo" x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
  </g>
</svg>

Seperti yang saya harapkan gagal validasi W3C dan saya disambut dengan pesan kesalahan berikut:

Atribut itemscope tidak diizinkan pada elemen svg pada titik ini.

Atribut tipe barang tidak diizinkan pada elemen svg pada titik ini.

Atribut itemprop tidak diizinkan pada elemen gambar pada saat ini.

Sekarang saya tahu bahwa validasi W3C bukan hal yang penting tetapi saya lebih suka memiliki solusi yang memuaskan Google dan W3C.

Saya yakin bahwa beberapa guru W3C akan dapat mengarahkan saya ke arah yang benar, saya akan perfer untuk tidak menggunakan DATA URI jika memungkinkan karena saya tahu itu bisa menjadi salah satu solusi tetapi perbaiki saya jika saya salah atau tidak DATA URI tidak bisa dilewati.

— Simon Hayter
sumber

7

Microdata hanya dapat digunakan pada elemen HTML seperti yang didefinisikan oleh HTML5. Menurut HTML5, svgelemen tersebut tidak ada dalam namespace HTML. Spesifikasi HTML WHATWG secara eksplisit menyebutkan bahwa Microdata tidak berfungsi svg(dikutip pada 2014-01-02):

Saat ini, itemscope, itemprop, dan atribut microdata lainnya hanya ditetapkan untuk elemen HTML. Ini berarti bahwa atribut dengan nama literal " itemscope", " itemprop", dll, tidak menyebabkan pemrosesan mikrodata terjadi pada elemen di ruang nama lain, seperti SVG.

(a) Anda bisa menambahkan divelemen yang tidak berarti :

<div itemscope itemtype="http://schema.org/Organization">
  <div itemprop="logo">
    <svg>…</svg>
  </div>
</div>

Pengurai Microdata akan memahami bahwa konten divelemen dengan logoproperti berisi logo organisasi. Tetapi karena svgelemen tersebut bukan bagian dari HTML, tidak ada aturan yang ditetapkan untuk mendapatkan nilai yang benar (= URL gambar) darinya. Jadi sangat tidak mungkin parser Microdata dapat melakukan sesuatu dengan informasi ini (misalnya, menunjukkan logo dalam konteks yang berbeda).
Perhatikan bahwa menggunakan itemproppada divelemen menghasilkan nilai string , yang bukan yang diharapkan Schema.org untuk logoproperti.

(B) Anda dapat menggandakan informasi dengan "tersembunyi" link:

<div itemscope itemtype="http://schema.org/Organization">
  <svg>…</svg>
  <link itemprop="logo" href="logo.svg" />
</div>

(c) Anda bisa menggunakan imgelemen (menurut caniuse.com menggunakan file SVG diimg memiliki lebih banyak dukungan daripada menggunakan SVG inline di HTML5 ):

<div itemscope itemtype="http://schema.org/Organization">
  <img itemprop="logo" src="logo.svg" alt="ACME Inc." />
</div>

(d) Mungkin Anda bisa menggunakan RDFa Lite sebagai gantinya , tapi saya tidak yakin apakah itu berfungsi untuk ruang nama "campuran". Tetapi untuk SVG 1.2 Tiny, RDFa dapat digunakan dalam metadataelemen .

— unor
sumber

jawaban yang bagus Masalah dengan menggunakan tag img adalah tidak skala yang baik, atau setidaknya dalam tes saya mengubah ukuran menggunakan width: height:tag img memiliki efek yang tidak diinginkan. Saya akan mencobanya lagi .... akan merepotkan jika harus menggunakan png sprite karena ini akan menambah 100kb vs 2kb.

— Simon Hayter

2

Anda cukup merujuk ke logo Anda melalui tag meta / tautan seperti yang disarankan dalam dokumentasi resmi: http://schema.org/docs/gs.html#advanced_missing

<!-- schema.org item wrapper -->
<div itemscope itemtype="http://schema.org/Organization">
  <!-- This is Your original SVG markup -->
  <svg id="my-logo" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g transform="scale(0.1)">
     <image x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
   </g>
  </svg>
  <!-- schema.org itemprop markup -->
  <link itemprop="logo" content="my-logo.svg" />
</div>

Sunting : Diubah dari <meta>menjadi <link />seperti yang disarankan oleh unor.

— Peta Sittek
sumber

Anda harus menggunakanlink alih-alih metajika nilainya adalah URI (yang saya sarankan di bagian (b) dari jawaban saya ).

— unor

2

Alternatif lain adalah menyimpan gambar Anda sebagai .svgfile. Anda dapat menggunakan editor teks apa saja untuk membuat file ini dan menempelkannya di markup SVG Anda. Kemudian pasang markup seperti yang akan Anda lakukan untuk a .pngatau .jpg:

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/">Home</a>
  <img itemprop="logo" src="http://www.example.com/logo.svg" />
</div>

— Stephen Ostermiller
sumber