उत्तरदायी पृष्ठ

Question

के लिए डुप्लिकेट सामग्री से बचें मैं वर्तमान में उत्तरदायी डिजाइन से निपटने वाली परियोजना पर काम कर रहा हूं, और संपूर्ण लेआउट HTML और CSS का उपयोग करके हासिल किया जाना चाहिए। मुझे जावा स्क्रिप्ट का उपयोग करके, सामग्री को डुप्लिकेट किए बिना, एक कॉलम लेआउट से दूसरी सामग्री में स्थानांतरित करना संभव है, लेकिन HTML और CSS का उपयोग करके वही प्राप्त करने योग्य है? उदाहरण के लिए

लें जिसके बाद डेस्कटॉप डिजाइन

--page------------------- 
| -------- -------- | 
| |div 1 | | div 2| | 
| -------- -------- | 
------------------------- 

लेकिन तब डिजाइनर मोबाइल डिजाइन पर div2 नीचे करने के लिए ले जाया गया है div1 पर इस तरह प्रस्तुत करना होगा।

--page-------- 
| -------- | 
| |div 2 | | 
| -------- | 
| -------- | 
| |div 1 | | 
| -------- | 
-------------- 

स्पष्ट रूप से ब्लॉक स्तर तत्वों का ढेर प्राकृतिक तरीका आसपास के विपरीत तरीके है।

--page------------------- 
| -------- -------- | 
| |div 1 | | div 2| | <--- shown on desktop 
| -------- -------- | 
| --------    | 
| |div 1 |    | <--- hidden on desktop 
| --------    | 
------------------------- 

--page-------- 
| -------- | 
| |div 1 | | <--- hidden on mobile 
| -------- | 
| -------- | 
| |div 2 | | <--- shown on mobile 
| -------- | 
| -------- | 
| |div 1 | | <--- shown on mobile 
| -------- | 
-------------- 

उपर्युक्त का उपयोग करके, div1 की सामग्री डुप्लिकेट की गई है। एसईओ के लिए यह बुरा है? स्पष्ट रूप से यह इष्टतम नहीं है क्योंकि सामग्री डीओएम आदि में दो बार दिखाई देती है, इसलिए गति प्रभावित होती है (यद्यपि संभवतः नगण्य)।

क्या कोई अन्य समाधान है जिसे मैं कार्यान्वित कर सकता हूं जो जावास्क्रिप्ट आधारित नहीं है जो इस मुद्दे को कम कर सकता है?

कोई सलाह बहुत सराहना की जाएगी।

Answer 1

यदि divs एक अनुमानित आकार (उदाहरण के लिए 50em) हैं तो आप उन्हें position: relative और नकारात्मक top मानों से ऑफ़सेट कर सकते हैं। यह आपको मार्कअप बदलने के बिना एक पुनर्नवीनीकरण प्रवाह की उपस्थिति देने देगा।

उदाहरण के लिए:

#div1 { 
    float: left 
    clear: both; 
    height: 50em; 
    position: relative; 
    top: 50em; 
} 

#div2 { 
    float: left 
    clear: both; 
    height: 50em; 
    position: relative; 
    top: -50em; 
} 

प्लेस है कि एक मीडिया क्वेरी के अंदर और यह आप परिणाम आप चाहते हैं दे देंगे।

Answer 2

डुएल सामग्री एक मुद्दा है जो निश्चित रूप से टाल दिया जाता है। और हमें हमेशा तत्व बनाना चाहिए जो सीएमएस सामग्री की अनुमति देने के लिए कोई ऊंचाई हो सकता है।

मैं सुझाव देंगे मार्क-अप आदेश होना चाहिए:

--page-------- 
| -------- | 
| |div 2 | | 
| -------- | 
| -------- | 
| |div 1 | | 
| -------- | 
-------------- 

... के रूप में डिजाइनर मोबाइल लेआउट में निर्दिष्ट करता है। चौड़ाई ऊंचाई से अधिक जानकार होती है, इसलिए डेस्कटॉप पर, आप अपनी स्थिति बदलने के लिए "पुराना स्विचारू" कर सकते हैं। Clearfix निहित है। डेस्कटॉप पर उदाहरण के लिए:

.div1, .div2 { 
    float: left; 
    position: relative; 
    width: 200px; 
} 
.div2 { 
    right: -200px; 
} 
.div1 { 
    left: -200px; 
} 

... जो आप इस लेआउट देना चाहिए:

--page------------------- 
| -------- -------- | 
| |div 1 | | div 2| | 
| -------- -------- | 
------------------------- 

(मैं इस कोड की जाँच नहीं की है - सभी संभावनाओं में मैं अपने अधिकार मिल गया और मिश्रित छोड़ दिया है अप)

क्या यह समझ में आता है?

Answer 3

एसईओ के लिए डुप्लिकेट सामग्री उत्तरदायी पृष्ठों के साथ एक वास्तविक समस्या है यदि आप तत्व छुपा रहे हैं और छिपा रहे हैं। कोड अभी भी डीओएम में प्रस्तुत किया गया है और यदि खोज इंजन कोड देख सकते हैं (भले ही उपयोगकर्ता आउटपुट नहीं देख पा रहा हो) फिर भी यह आपके खिलाफ गिना जाएगा। ऊपर दिए गए उत्तरों में से कोई भी इसके लिए एक वास्तविक समाधान प्रदान नहीं करता है, और काफी ईमानदार होने के लिए मैं या तो इस बिंदु पर नहीं कर सकता।

मैं वास्तव में डोम से जावास्क्रिप्ट के साथ तत्वों को हटाने की ओर बढ़ रहा हूं, लेकिन यह बेहद गन्दा हो जाता है और यह आदर्श भी नहीं है।

उपर्युक्त मीडिया क्वेरी उत्तर इस तथ्य को नहीं बदलेगा कि आपके पास अभी भी डुप्लिकेट सामग्री के साथ डीओएम में HTML आउटपुट है।

Answer 4

मुझे पता है कि मुझे देर हो चुकी है, लेकिन मुझे उम्मीद है कि यह किसी और की मदद करेगा।

मैं इसे मोबाइल-पहले सोचकर हल कर दूंगा। #div1 मोबाइल संकल्प में दिखाया गया पहला होना चाहिए, और #div2 दूसरा वाला होना चाहिए।

तब मैं उन्हें दोनों तरफ सही कर दूंगा, इसलिए वांछित होने पर "पहला वाला" दाईं ओर दिखाया जाएगा।

यहाँ एक उदाहरण है (बेहतर जवाबदेही को देखने के लिए पूरे पृष्ठ में इसे देख):

* { box-sizing: border-box; } 
 
div { border: 1px solid gray; } 
 
#div1 { background: lightblue; } 
 
#div2 { background: yellow; } 
 
@media (min-width: 768px) { 
 
    div { 
 
    display: inline-block; 
 
    width: 50%; 
 
    float: right; 
 
    } 
 
}

<div id="div1"> 
 
    <p>This div will be shown on top on mobile resolutions, and will be in the right in any other resolution!</p> 
 
    <p>We could say it will be a main content holder in mobile, and secondary in desktop</p> 
 
</div> 
 
<div id="div2"> 
 
    <p>This div will be shown on bottom on mobile resolutions, and will be in the left in any other resolution!</p> 
 
    <p>We could say it will be a main content holder in desktop, and secondary in mobile</p> 
 
</div>

Answer 5

• सीएसएस order संपत्ति flex बच्चों को पुन: व्यवस्थित करने के लिए इस्तेमाल किया जा सकता।
• बूटस्ट्रैप 4 ने कुछ (उत्तरदायी) फ्लेक्स उपयोगिताओं को पेश किया है जिनका उपयोग आप फ्लेक्स बच्चों के क्रम को बदलने के लिए कर सकते हैं।

<div class="row"> 
    <div class="col-sm-6 order-2 order-sm-1">div 1</div> 
    <div class="col-sm-6 order-1 order-sm-2">div 2</div> 
</div> 

ऊपर बूटस्ट्रैप आधारित टुकड़ा पर विचार करें। div 1 और div 2sm और उच्च (एमडी, एलजी, एक्सएल) डिवाइसों के लिए स्रोत ऑर्डर में दिखाई देते हैं जबकि div 2xs डिवाइस पर div 1 से पहले प्रकट होता है।