मुझे खोज इंजन द्वारा अनुक्रमित किए जाने वाले पाठ वाले चित्र कैसे प्राप्त होंगे?

20

मैं एक दोस्त के लिए एक छोटी सी पोर्टफोलियो वेबसाइट बना रहा हूं, और विज्ञापन और सभी में, वह मानक फ़ॉन्ट से नफरत करती है और कस्टम फ़ॉन्ट में लिखी गई हर चीज चाहती है।

जैसा कि सीएसएस फ़ॉन्ट-एम्बेडिंग वास्तव में पल के लिए एक विकल्प नहीं है, सभी ग्रंथों (सौभाग्य से, उनमें से बहुत से नहीं हैं) को छवियों पर रखा जाएगा।

मैं अब भी छवियों की सामग्री को कैसे अनुक्रमित कर सकता हूं? छोटे ग्रंथों (लिंक, मेनू, आदि ...) के लिए, मैंने पाठ को पूरी विशेषता में रखा, लेकिन कुछ समय के लिए, मुझे नहीं लगता कि यह समाधान है। मैं क्या कर सकता हूँ ? छवि के बगल में छिपे हुए div में पाठ डालें?

— Wookai
स्रोत

7

वेब फोंट एक विकल्प क्यों नहीं हैं? क्या यह एक पेशेवर पोर्टफोलियो है? यदि ऐसा है, तो $ 50 को शेल करें और एम्बेड करने योग्य वेब फोंट का एक अच्छा सेट प्राप्त करें। हेक, आप उसके साथ लागत को विभाजित कर सकते हैं और एक असीमित साइट लाइसेंस प्राप्त कर सकते हैं जिसे आप भविष्य की साइटों पर पुन: उपयोग कर पाएंगे। वहाँ भी मुफ्त वेब फोंट हैं जो काफी अच्छे हैं। यह बॉडी टेक्स्ट के लिए चित्रों का उपयोग करने से कहीं बेहतर है।

— लीज मेजेस्टे

+1 @ लेस वास्तव में, यही एकमात्र रास्ता है।

— वर्चुओसी मीडिया

खैर, यह एक विकल्प नहीं है क्योंकि यह प्रमुख ब्राउज़रों द्वारा समर्थित नहीं है, क्या यह है?

— वूकाई

1

हाँ यह है, सभी तरह से IE5.5 पर वापस ... नीचे मेरा जवाब पढ़ें :)

— ऑस्कर गोडसन

वाह, क्या आपदा है, यह एक अच्छा उदाहरण है कि क्यों सॉफ्टवेयर पेशेवर कभी अप्रचलित नहीं होंगे ... किसी को व्यवसायिक लोगों को दुखद गलतियां करने से रोकना होगा।

— मार्क रोजर्स

17

मज़ा आया!

नहीं, लेकिन वास्तव में, एम्बेड करने योग्य फोंट सभी मौजूदा ब्राउज़रों (एफएफ, क्रोम, सफारी, ओपेरा) और IE5.5 + पर काम करते हैं (हां, यह 90 के दशक से IE में काम कर रहा है।)

अपने TTF को यहां अपलोड करें: http://www.kirsle.net/wizards/ttf2eot.cgi

यह आपको कोड और 2 फाइलें वापस (एक टीटीएफ और फिर एक ईओटी [एम $ वेब फ़ॉन्ट]) वापस देगा। कॉपी, पेस्ट, अपलोड, किया। जीत!

और कृपया, कृपया, छवियों का उपयोग न करें :)

यदि आप फिर भी, अपना मार्कअप लिखते हैं जैसे कि आप छवियों का उपयोग नहीं करते हैं और फिर सभी तत्वों में पृष्ठभूमि चित्र जोड़ें और पाठ को छिपाने के लिए टेक्स्ट-इंडेंट: -9999px का उपयोग करें। लेकिन कृपया, बस एम्बेड करने योग्य फोंट का उपयोग करें। साथ ही, यदि आप क्लाइंट / मित्र हैं, तो वह एक प्राचीन ब्राउज़र का उपयोग करने वाला (शायद नहीं) होना चाहिए (मेरा मतलब है, वास्तव में प्राचीन, जैसे, IE4 ...)

— ऑस्कर गोडसन
स्रोत

1

धन्यवाद, मैंने वास्तव में सोचा था कि फ़ॉन्ट-एम्बेडिंग अभी तक समर्थित नहीं थी! मैं अपनी वेबसाइट एक कोशिश दे दूँगा!

— वूकाई

ज़रूर! आशा है कि यह मदद करता है: D

— ऑस्कर गोडसन 2

यह ध्यान दिया जाना चाहिए कि आप कॉपीराइट मुद्दों के कारण किसी भी फ़ॉन्ट का उपयोग नहीं कर सकते हैं - पहले लाइसेंस की शर्तों की जांच करें!

— असंतुष्टगीतगट

6

जब तक वह इस वेबसाइट पर अपने खुद के फोंट बेच रही है, मुझे लगता है कि आप दोनों सीएसएस एम्बेडिंग पर अधिक काम कर सकते हैं (हाँ, मैंने पढ़ा है कि यह अब आपके लिए कोई विकल्प नहीं है, लेकिन मैं जोर देता हूं)।

यदि मामला फोंट (ग्रेडिएंट कलर्स, ट्विस्टेड अलाइनमेंट, ग्लोसिंग, एम्बॉसिंग, एनग्रेविंग ...) पर भारी ग्राफिक काम है, तो उसे थोरुग सीएसएस विकल्पों को प्रस्तुत करना असंभव है, क्योंकि उसे ज़रूरत है, तो मैं निम्नलिखित करने की सलाह दूंगा:

CSS (शायद एक प्रेत) के माध्यम से छवियों का उपयोग करें, और पाठ-पहचान के साथ लंगर पाठ को छिपाएं। एचटीएमएल

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

सीएसएस

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

यह एक तकनीक है। हाँ, मुझे पता है, Google उसे सज़ा दे सकता है, लेकिन आप जानते हैं, मैंने कभी भी इसके इस्तेमाल से दंडित किसी एक साइट के बारे में नहीं सुना।

एक और तरीका होगा पाठ के साथ एंकर टैग ALONG के अंदर img टैग का उपयोग करना, और फिर पाठ को छिपाने के लिए CSS का उपयोग करना और यदि आवश्यक हो तो सही स्थिति img का उपयोग करना। यह अंतिम विकल्प आपके ऑल्ट, टाइटल, लॉन्गडेस्क को इमेज में जोड़ने की संभावना देता है, सूचना की मात्रा और गुणवत्ता को अनुक्रमित करता है।

आप इस अंतिम विकल्प के साथ और भी बेहतर और ताजा समाधान के लिए जा सकते हैं: अंजीर के साथ HTML5 के लिए उपलब्ध आंकड़ा टैग का उपयोग कर। विचार एंकर-> फिगर-> img + अंजीर है।

फिगंर एंकर टेक्स्ट भूमिका करेगा और आप इसे छिपाने के लिए सीएसएस का उपयोग कर सकते हैं।

खैर, 3 समाधान। एक चुनें। मैं आखिरी के साथ जाऊँगा।

— डेव
स्रोत

उत्तर देने के लिए आपका धन्यवाद ! आपके समाधान वास्तव में दिलचस्प हैं, खासकर पिछले एक।

— वूकाई

5

छी। उसे वास्तव में अपने फ़ॉन्ट मुद्दों पर जाने की आवश्यकता है क्योंकि वह अपनी साइट की पहुंच को मार रहा है और अन्य सभी प्रकार के मुद्दों को जन्म दे रहा है जैसे उसके पृष्ठों के प्रतिपादन को धीमा करना, आदि।

यह कहते हुए कि आप longdescअपनी छवियों में विशेषता जोड़ने का प्रयास कर सकते हैं। यह कहना मुश्किल है कि कितना वजन है, यदि कोई है, तो खोज इंजन इसे देते हैं लेकिन यह शायद तब शून्य है।

— जॉन कोंडे
स्रोत

खैर, पहुँच के लिए यहाँ टैग पूरी तरह से नहीं हैं? हालांकि लॉन्गडेस्क टिप के लिए धन्यवाद, मुझे इसके अस्तित्व की जानकारी नहीं थी।

— वूकाई

1

+1, ग्राहक को शिक्षित करने के अवसर की तरह लगता है कि उसके आदर्श फोंट को आदर्श परिणाम कैसे नहीं मिलेंगे ... हालांकि, दुर्भाग्य से, कुछ क्लाइंट यह स्वीकार करने के लिए अत्यधिक प्रतिरोधी हैं कि HTML डॉक्स को कैसे काम करना है।

— danlefree

3

जबकि वेब फोंट अब सभी प्रमुख ब्राउज़रों में बहुत अधिक मानक हैं, लेकिन विभिन्न फ़ॉन्ट प्रारूपों के क्रॉस ब्राउज़र पेचीदगियों का पता लगाना मुश्किल हो सकता है।

Google यहां एक अच्छा वेब फ़ॉन्ट एपीआई और फ़ॉन्ट निर्देशिका प्रदान करता है जो आपको उपयोगी लग सकता है।

— फिल मंडेर
स्रोत

2

साइट के अन्य पृष्ठों पर पहुंचने के लिए आपके एकमात्र तरीके के रूप में भी छवियों का उपयोग करना वास्तव में Google को बहुत अधिक स्पष्टता प्रदान करने वाला नहीं है।

आपकी सबसे अच्छी शर्त यह है कि आप अपने मित्र को समझाएं कि समस्या को हल करने के लिए आपको पृष्ठ या साइट पर कहीं पाठ लिंक की आवश्यकता है। उदाहरण के लिए यदि आप सभी पाठ लिंक के साथ साइटमैप पेज सेटअप करने में सक्षम हैं या काम करने वाले सभी टेक्स्ट लिंक के साथ प्रत्येक पृष्ठ पर एक ड्रॉप डाउन। यह लिंक छवियों के अलावा है कि किसी भी नुकसान का कारण नहीं होगा।

मैं सुझाव दूंगा कि छिपे हुए लिंक का उपयोग न करें क्योंकि Google इसे नापाक होने के रूप में देख सकता है और आपकी साइट की रैंक को कम कर सकता है या इसे स्पैम के रूप में चिह्नित कर सकता है।

— बेन हॉफमैन
स्रोत

मैं निश्चित रूप से एक साइटमैप सेट करूंगा, लेकिन यह सामग्री अनुक्रमण समस्या को ठीक नहीं करेगा ...

— वूकाई

@wookai - Google छवि को अनुक्रमित करेगा यह सिर्फ उनके बारे में उतना नहीं जान सकता है। इसलिए यदि आपके पास प्रत्येक लिंक में पूर्ण पाठ वाला एक साइटमैप पेज है तो यह Google को आपकी साइट के पृष्ठों के बारे में अधिक जानकारी देगा।

— बेन हॉफमैन

2

जैसा कि दूसरों ने सुझाव दिया है, आपको मानक "वेब-सुरक्षित" फोंट के साथ जाने की ज़रूरत नहीं है। अब कई फ़ॉन्ट प्रतिस्थापन तकनीक उपलब्ध हैं जो क्रॉस-ब्राउज़र तरीके से काम करेंगे। एक अच्छे अवलोकन के लिए, देखें: वेब डिज़ाइनर की गाइड टू फॉन्ट रिप्लेसमेंट मेथड्स । आपको SEO करने या इमेज SEO का सहारा लेने की जरूरत नहीं है। आप अपना केक ले सकते हैं और इसे भी खा सकते हैं।

— पुण्यसूसी मीडिया
स्रोत

2

मैं बैकग्राउंड इमेज और हिडन नेस्टेड स्पैन के साथ ऐसा करता था। पाठ ब्राउज़र और खोज इंजन के लिए बहुत अच्छा लगता है, और अमीर ब्राउज़रों के लिए कस्टम फोंट हैं।

HTML:

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

सीएसएस:

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

आउटपुट:

नर्क ऑन व्हील्स में आपका स्वागत है

इसे एक्शन में देखें ।

वास्तव में पाठ की मात्रा की कोई सीमा नहीं है जिसे आप इस विधि से बदल सकते हैं (स्मार्ट तरीके से उपयुक्त टैग और छिपी हुई शैली), लेकिन ईमानदारी से आपके ग्राहक जिस कस्टम फ़ॉन्ट का उपयोग करना चाहते हैं, वह आम वेब फोंट की तुलना में बहुत कम पठनीय है। आपको सच में उससे बात करने की कोशिश करनी चाहिए।

— अन्निका बैकस्ट्रॉम
स्रोत

क्या आपने पाठ ब्राउज़रों पर इसका परीक्षण किया है? मुझे पता है कि कई स्क्रीन रीडर display: noneपाठ को अनदेखा करते हैं, और मुझे लगता है कि पाठ केवल ब्राउज़र भी करते हैं।

— लेसे मेजेस्टे

दोनों lynxऔर linksपाठ प्रदर्शित करते हैं। अगर यह स्क्रीन पाठकों के साथ एक समस्या है, तो मैं उपयोग करूंगा h1 span { position: absolute; left: -9999px; }। मेरे पास परीक्षण के लिए स्क्रीन रीडर काम नहीं है, हालाँकि।

— अन्निका बैकस्ट्रॉम

मुझे लगता है कि आप सही हैं, लेकिन ध्यान रखें कि यह अधिकांश स्क्रीन पाठकों पर काम नहीं करेगा: css-discuss.incutio.com/wiki/Screenreader_Visibility इसके अलावा, मैं विंडोज़ पर परीक्षण के लिए NVDA का उपयोग करता हूं। यदि आप इसे देखना चाहते हैं तो यह एक FOSS स्क्रीन रीडर है।

— लेज़े मेजेस्टे

1

sFIR इस उद्देश्य के लिए काम कर सकता है , लेकिन इसका उपयोग क्लाइंट की ओर से संसाधन-गहन होगा और अगर आपको पाठ में लिंक एम्बेड करने की आवश्यकता है तो यह मुश्किल हो सकता है।

— danlefree
स्रोत

1

फिर भी, यह बॉडी टेक्स्ट के रूप में छवियों से 100% बेहतर है। यह शायद कम से कम पेशेवर चीजों में से एक है जो आप एक वेबसाइट पर कर सकते हैं - कोई हाइलाइटिंग, कोई कॉपी-एंड-

— पेस्टिंग

1

बस webfonts का उपयोग करें । वस्तुतः कोई भी ब्राउज़र उन्हें सही ढंग से प्रदर्शित करेगा (यदि आप उन्हें वैकल्पिक स्वरूपों में रखते हैं)। बस उन्हें एक नियमित फाइल के रूप में होस्ट करें (जो वे हैं)। यहाँ वास्तव में अच्छा ट्यूटोरियल है । एक और फायदा: आपको यह सोचने की ज़रूरत नहीं है कि Google को कैसे ट्रिक करें
sIFR , Cufón , FLIR या अन्य छवि स्प्राइट्स - यह वास्तव में पुरानी शैली का बुल-केकड़ा है जिसे अज्ञात कारणों से खोजा गया था;) इसका उपयोग न करें।
बहुत कुछ पाठ एक जोड़े की छवियों में टाइप किया गया है:
- लंबे लोड समय
- एंटी-सेओ (बेशक आप गूगल बॉट और उपयोगकर्ता के लिए क्लोकिंग का उपयोग कर सकते हैं और विभिन्न सामग्रियों की सेवा कर सकते हैं, लेकिन यह सिर्फ अधिक काम और परीक्षण है और यह भी जोखिम भरा है [प्रतिद्वंद्वी साइट के मालिक आपको Google पर बता सकते हैं:])

— एलेक्स बोल्तोव
स्रोत

1

Typeface.js लाइब्रेरी का उपयोग करके देखें ! आप किसी भी कस्टम ट्रू टाइप या ओपन टाइप फ़ॉन्ट का उपयोग सिर्फ अपने पृष्ठ के शीर्ष पर लाइब्रेरी को शामिल करके और अपने विशेष-फ़ॉन्ट वाले तत्वों को एक विशेष वर्ग देने में कर सकते हैं। यह मुफ़्त है, खुला स्रोत है, प्लेटफ़ॉर्म है, और खोज इंजन आपके पाठ को भी देखेंगे। कोई चित्र आवश्यक नहीं; पुस्तकालय उस सब को संभालता है और आप बस इसे एक विशिष्ट वेबपेज की तरह डिजाइन करते हैं।

— Ricket
स्रोत

1

शानदार, लेकिन ज्यादातर मामलों में अत्यधिक अवैध। = P बहुत कम वाणिज्यिक फ़ॉन्ट हैं जो सीधे वेब पृष्ठों पर एम्बेड करने के लिए कानूनी हैं, भले ही आपने इसके लिए लाइसेंस खरीदा हो। मैं इस कारण का अंदाजा लगा रहा हूं कि टाइप फोंट आखिरकार वेब फोंट के लिए क्यों स्वीकार किए जाते हैं ताकि फॉन्ट को एम्बेड किया जाना अन्य प्रयोजनों के लिए (आसानी से) प्रयोग करने योग्य न हो। लेकिन यदि आप एक ओटीएफ या टीटीएफ फ़ॉन्ट अपलोड करते हैं, तो आपकी साइट पर आने वाले किसी भी व्यक्ति को एक प्रति मिल जाएगी, जो अब वे जो चाहें कर सकते हैं।

— लेसे मेजेस्टे

1

जवाब के लिए यहाँ बहुत सारे बढ़िया विकल्प। लगता है फ़ॉन्ट गिलहरी (http://www.fontsquirrel.com/fontface/generator) एक उल्लेख के हकदार हैं। और हाँ, Google फ़ॉन्ट API बहुत बढ़िया हैं।

छवि प्रतिस्थापन के लिए, व्यक्तिगत रूप से मैं एक तत्व में एक अवधि की सिफारिश करूँगा, छवि के साथ अवधि के माता-पिता की पृष्ठभूमि के रूप में। लेकिन प्रदर्शन के बजाय: स्पैन, पोजीशन पर कोई भी: स्क्रीन से इसे निरपेक्ष करता है। इस तरह से स्क्रीन पाठकों को अभी भी वह सामग्री मिलती है।

मुझे लगता है कि इंडेंट पर जीतना स्क्रीन से दूर जाना याद है, लेकिन शायद मुझे अपनी मूर्खतापूर्ण पैंट मिल गई है।

लेकिन डबल भी हाँ - उन फोंट एम्बेड।

— folktrash
स्रोत

ओह, और यहाँ sifr और cufon के खिलाफ मेरा वोट है।

— लोकट्रश

1

फ़ॉन्ट गिलहरी से फ़ॉन्ट -चेहरे किट में से एक का उपयोग करें । किट 4 विभिन्न फ़ॉन्ट प्रारूप प्रदान करता है और सही सीएसएस का उपयोग करने के लिए आवश्यक है। सभी आधुनिक ब्राउज़रों और विरासत IE संस्करणों में भी काम करता है!

— लेसे मेजेस्टे
स्रोत

0

छवियों के साथ साइट बनाएँ। फिर एक ओस के महीनों में जब वह वापस आती है तो इंजन द्वारा नहीं मिलने की शिकायत करते हुए पाठ के साथ साइट को फिर से बनाते हैं और एक और शुल्क लेते हैं!

— डेविड हेफर्नन
स्रोत

3

यह मेरे लिए थोड़ा गैर-जिम्मेदाराना लगता है, हालांकि ..

— जेफ एटवुड

ठीक है, फिर कैसे टेक्स्ट के लिए छवियों का उपयोग करके उसकी पसंदीदा वेबसाइट का क्लोन बनाने और क्लोन करने के लिए उसकी hostsफ़ाइल को संशोधित करने के लिए, और उसे 2 सप्ताह के लिए उस साइट का उपयोग करने के लिए मजबूर करें?

— लेजे मेजेस्टे

@ अच्छी तरह से, मैं सिर्फ एक छोटी सी जीभ-इन-गाल जा रहा था ......

— डेविड हेफ़रनैन