ฉันจะทำให้รูปภาพที่มีข้อความเป็นดัชนีโดยเครื่องมือค้นหาได้อย่างไร

ฉันกำลังสร้างเว็บไซต์ผลงานขนาดเล็กสำหรับเพื่อนและอยู่ในการโฆษณาและทั้งหมดเธอเกลียดแบบอักษรมาตรฐานและต้องการทุกสิ่งที่เขียนในแบบอักษรที่กำหนดเอง

เนื่องจากการฝังแบบอักษร CSS ไม่ใช่ตัวเลือกในขณะนี้ข้อความทั้งหมด (โชคดีที่มีไม่มาก) จะถูกวางเป็นรูปภาพ

ฉันจะยังคงมีการจัดทำดัชนีเนื้อหารูปภาพได้อย่างไร สำหรับข้อความขนาดเล็ก (ลิงก์เมนู ฯลฯ ... ) ฉันใส่ข้อความในแอตทริบิวต์ alt แต่สำหรับบางสิ่งนานฉันไม่คิดว่าเป็นวิธีแก้ปัญหา ฉันจะทำอย่างไร วางข้อความใน div ที่ซ่อนอยู่ถัดจากภาพหรือไม่

ฝังแบบอักษร!

ไม่ แต่แบบอักษรที่ฝังได้ทำงานได้กับเบราว์เซอร์ปัจจุบันทั้งหมด (FF, Chrome, Safari, Opera) และ IE5.5 + (ใช่แล้วมันทำงานได้ใน IE มาตั้งแต่ 90)

รับ TTF ของคุณอัพโหลดได้ที่นี่: http://www.kirsle.net/wizards/ttf2eot.cgi

มันจะให้รหัสและ 2 ไฟล์กลับ (a TTF และ EOT [M $ web font]) กลับมา คัดลอกวางอัปโหลดเสร็จแล้ว ชนะรับรางวัล!

และได้โปรดได้โปรดอย่าใช้ภาพ :)

อย่างไรก็ตามถ้าคุณเขียนมาร์กอัปของคุณราวกับว่าคุณไม่ได้ใช้ภาพแล้วเพิ่มภาพพื้นหลังให้กับองค์ประกอบทั้งหมดและใช้การเยื้องข้อความ: -9999px เพื่อซ่อนข้อความ แต่โปรดใช้แบบอักษรที่ฝังได้ นอกจากนี้หากคุณเป็นลูกค้า / เพื่อนเป็นช่างภาพเธออาจจะ (ไม่ควร) ใช้เบราว์เซอร์โบราณ (ฉันหมายถึงโบราณจริงๆเหมือน IE4 ... )

นอกจากว่าเธอจะขายแบบอักษรของเธอเองในเว็บไซต์นี้ฉันคิดว่าคุณทั้งสองสามารถทำงานได้มากขึ้นกับการฝัง CSS (ใช่ฉันอ่านแล้วนี่ไม่ใช่ตัวเลือกสำหรับคุณตอนนี้ แต่ฉันขอยืนยัน)

หากกรณีที่เป็นงานกราฟิกที่หนักกว่าแบบอักษร (สีไล่ระดับสี, การจัดตำแหน่งบิด, เงา, ลายนูน, แกะสลัก ... ) ทำให้เป็นไปไม่ได้จริงๆที่จะแสดงตัวเลือก CSS ตามที่เธอต้องการจากนั้นฉันขอแนะนำให้ทำต่อไปนี้:

ใช้รูปภาพผ่าน CSS (อาจเป็นสไปรต์) และซ่อนตัวยึดข้อความด้วย text-ident HTML

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

CSS

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

นี่เป็นเทคนิคหนึ่ง ใช่ฉันรู้ว่า Google สามารถลงโทษได้ แต่คุณรู้ไหมฉันไม่เคยได้ยินเกี่ยวกับไซต์เดียวที่ถูกลงโทษโดยใช้สิ่งนี้

อีกวิธีหนึ่งคือการใช้แท็ก img ภายในแท็ก anchor พร้อมกับข้อความจากนั้นใช้ CSS เพื่อซ่อนข้อความและแก้ไขตำแหน่ง img หากจำเป็น ตัวเลือกสุดท้ายนี้ช่วยให้คุณสามารถเพิ่ม alt, ชื่อ, longdesc to image, เพิ่มปริมาณข้อมูลและคุณภาพที่ถูกทำดัชนี

คุณสามารถไปได้ไกลกว่าด้วยตัวเลือกสุดท้ายนี้และหาทางออกที่ดีกว่าและสดใหม่: ใช้แท็กรูปพร้อมใช้งานสำหรับ HTML5 พร้อมกับ figcaption ความคิดคือการยึดเหนี่ยว -> รูป -> img + figcaption

Figcaption จะทำให้บทบาทของสมอข้อความและคุณสามารถใช้ CSS เพื่อซ่อน

ทีนี้ 3 คำตอบ เลือกหนึ่ง. ฉันจะไปกับคนสุดท้าย

yuck เธอต้องการที่จะแก้ไขปัญหาแบบอักษรของเธอในขณะที่เธอกำลังฆ่าการเข้าถึงเว็บไซต์ของเธอและเป็นสาเหตุของปัญหาอื่น ๆ เช่นชะลอการแสดงผลหน้าเว็บของเธอ ฯลฯ

ต้องบอกว่าคุณสามารถลองเพิ่มlongdescคุณสมบัติให้กับภาพของคุณ มันยากที่จะบอกว่ามีน้ำหนักเท่าใดหากมีเครื่องมือค้นหามอบให้ แต่อาจมีค่ามากกว่าศูนย์

ในขณะที่เว็บฟอนต์นั้นค่อนข้างมาตรฐานในทุกเบราว์เซอร์ที่สำคัญทั้งหมดในตอนนี้

Google มีapi เว็บฟอนต์และไดเรคทอรี่แบบอักษรที่ดีเพื่อช่วยคุณที่นี่มีประโยชน์

การใช้รูปภาพถึงแม้จะมีแท็ก alt เป็นวิธีเดียวที่จะทำให้คุณไปยังหน้าอื่น ๆ ในไซต์นั้นไม่ได้ทำให้ Google มีความชัดเจนอย่างแท้จริง

ทางออกที่ดีที่สุดของคุณคือการโน้มน้าวใจเพื่อนของคุณว่าคุณต้องการลิงค์ข้อความในหน้าหรือเว็บไซต์เพื่อแก้ไขปัญหา ตัวอย่างเช่นหากคุณสามารถตั้งค่าหน้าแผนผังไซต์ด้วยลิงก์ข้อความทั้งหมดหรือวางลงในแต่ละหน้าพร้อมลิงก์ข้อความทั้งหมดที่ควรใช้ จะไม่ทำให้เกิดความเสียหายใด ๆ ที่มีนอกเหนือไปจากภาพลิงค์

ฉันขอแนะนำไม่ให้ใช้ลิงก์ที่ซ่อนอยู่ในขณะที่ Google สามารถดูสิ่งนี้ว่าเป็นสามานย์และลดอันดับของเว็บไซต์ของคุณหรือทำเครื่องหมายว่าเป็นสแปม

ตามที่คนอื่นแนะนำคุณไม่ต้องไปกับแบบอักษร "ปลอดภัยสำหรับเว็บ" ตอนนี้มีเทคนิคการแทนที่แบบอักษรมากมายที่สามารถใช้ได้ในลักษณะข้ามเบราว์เซอร์ สำหรับภาพรวมที่ดีเช็คเอาท์: คู่มือ Font วิธีการเปลี่ยนเว็บออกแบบ คุณไม่ต้องยอมแพ้กับ SEO หรือหันไปทำ SEO รูปภาพ คุณสามารถมีเค้กของคุณและกินมันด้วย

ฉันเคยทำเช่นนี้กับภาพพื้นหลังและช่วงซ้อนกันที่ซ่อนอยู่ ดูดีสำหรับเบราว์เซอร์ข้อความและเครื่องมือค้นหาและมีแบบอักษรที่กำหนดเองสำหรับเบราว์เซอร์ที่สมบูรณ์ยิ่งขึ้น

HTML:

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS:

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

เอาท์พุท:

เห็นในการกระทำ

ไม่มีการ จำกัด จำนวนข้อความที่คุณสามารถแทนที่ด้วยวิธีนี้ (แท็กที่เหมาะสมและสไตล์ที่ซ่อนอยู่ในรูปแบบสมาร์ท) แต่แบบอักษรที่กำหนดเองที่ลูกค้าต้องการใช้นั้นมีแนวโน้มที่จะอ่านได้น้อยกว่าแบบอักษรเว็บทั่วไปทั้งหมด คุณควรลองพูดคุยกับเธอจริงๆ

sFIR อาจใช้งานได้ตามวัตถุประสงค์นี้ แต่การใช้มันจะต้องใช้ทรัพยากรอย่างมากในฝั่งไคลเอ็นต์และอาจมีความยุ่งยากหากคุณจำเป็นต้องฝังลิงก์ในข้อความ

1. เพียงแค่ใช้อักษรบนเว็บ เบราว์เซอร์ใด ๆ ก็ตามจะแสดงอย่างถูกต้อง (ถ้าคุณใส่ไว้ในรูปแบบอื่น) เพียงโฮสต์พวกเขาเป็นไฟล์ปกติ (ซึ่งพวกเขาเป็น) นี่คือการสอนที่ดีจริงๆ ข้อดีอีกข้อหนึ่ง: คุณไม่จำเป็นต้องคิดวิธีหลอกลวง Google

2. sIFR , Cufón , FLIRหรือสไปรต์รูปภาพอื่น ๆ - นั่นเป็นปูแบบวัวโบราณที่ถูกคิดค้นขึ้นมาด้วยเหตุผลที่ไม่ทราบ;) อย่าใช้สิ่งนั้น

3. ข้อความจำนวนมากที่พิมพ์ลงบนภาพสองสามภาพคือ:

   • เวลาโหลดนาน
   • anti-seo (แน่นอนว่าคุณสามารถใช้การปิดบังและให้บริการเนื้อหาที่แตกต่างกับ google bot และผู้ใช้ แต่มันทำงานได้มากขึ้นและมีการทดสอบและมีความเสี่ยง [เจ้าของเว็บไซต์คู่แข่งอาจบอกคุณเกี่ยวกับ google:])

ลองใช้ไลบรารีtypeface.js ! คุณสามารถใช้แบบอักษร TrueType หรือ OpenType แบบกำหนดเองใด ๆ เพียงแค่รวมไลบรารีไว้ที่ด้านบนของหน้าของคุณและให้คลาสพิเศษแบบอักษรองค์ประกอบของคุณ ฟรี, โอเพ่นซอร์ส, ข้ามแพลตฟอร์มและเสิร์ชเอนจิ้นจะเห็นข้อความของคุณด้วย ไม่จำเป็นต้องใช้รูปภาพ ไลบรารีจัดการสิ่งเหล่านั้นทั้งหมดและคุณเพียงแค่ออกแบบมันเหมือนหน้าเว็บทั่วไป

ตัวเลือกที่ยอดเยี่ยมมากมายที่นี่สำหรับคำตอบ ดูเหมือนกระรอกตัวอักษร (http://www.fontsquirrel.com/fontface/generator) สมควรได้รับการกล่าวถึง และใช่ API ของ Google ก็ยอดเยี่ยมเช่นกัน

สำหรับการทดแทนภาพส่วนตัวผมขอแนะนำให้ขยายในองค์ประกอบด้วยภาพที่เป็นพื้นหลังของผู้ปกครองของช่วง แต่แทนที่จะแสดง: ไม่มีในช่วงตำแหน่ง: ปิดหน้าจอแน่นอน ด้วยวิธีนี้ผู้อ่านหน้าจอยังคงได้รับเนื้อหานั้น

ดูเหมือนว่าฉันจะจำการย้ายหน้าจอออกเพื่อชนะการเยื้องได้

แต่สองครั้งก็ใช่ - ฝังแบบอักษรเหล่านั้น

ใช้หนึ่งในชุด font-face จากอักษรกระรอก ชุดนี้มีรูปแบบตัวอักษร 4 แบบและ CSS ที่ถูกต้องที่จำเป็นในการใช้ ใช้งานได้กับเบราว์เซอร์ที่ทันสมัยและใน IE รุ่นเก่าด้วย

สร้างเว็บไซต์ด้วยภาพ จากนั้นในอีกไม่กี่เดือนข้างหน้าเมื่อเธอกลับมาบ่นว่าไม่ได้ถูกพบโดยเครื่องมือสร้างเว็บไซต์ใหม่ด้วยข้อความและคิดค่าธรรมเนียมอีกครั้ง!