it-swarm.asia

استبدال النص H1 مع صورة الشعار: أفضل طريقة لكبار المسئولين الاقتصاديين وسهولة الوصول؟

يبدو أن هناك بعض الأساليب المختلفة ، لذلك كنت آمل أن أحصل على إجابة "نهائية" حول هذا ...

على موقع الويب ، من الممارسات الشائعة إنشاء شعار يرتبط بالصفحة الرئيسية. أريد أن أفعل نفس الشيء ، مع تحسين أفضل لمحركات البحث وقارئات الشاشة و IE 6+ والمتصفحات التي عطلت CSS و/أو الصور.

مثال واحد: لا يستخدم علامة h1. ليست جيدة لكبار المسئولين الاقتصاديين ، أليس كذلك؟

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

المثال الثاني: وجدت هذا في مكان ما. يبدو أن CSS متطفل قليلاً.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

المثال الثالث: نفس HTML ، نهج مختلف باستخدام المسافة البادئة للنص. هذا هو نهج "Phark" لاستبدال الصورة.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

المثال الرابع: طريقة Leahy-Langridge-Jefferies . يعرض عند إيقاف تشغيل الصور و/أو المغلق.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

ما هي الطريقة الأفضل لهذا النوع من الأشياء؟ يرجى تقديم HTML و CSS في إجابتك.

228
Andrew

أنت تفتقد الخيار:

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

العنوان في href و img إلى h1 مهم جدًا جدًا!

209
Rahul

أفعل ذلك غالبًا مثل المذكور أعلاه ، ولكن لأسباب تتعلق بإمكانية الوصول ، أحتاج إلى دعم إمكانية تعطيل الصور في المستعرض. لذا ، بدلاً من وضع مسافة بادئة للنص من الرابط خارج الصفحة ، أغطيه عن طريق تحديد موقع <span> </code> تمامًا على العرض والارتفاع الكامل لـ <a> واستخدام z-index لوضعه أعلى نص الارتباط في ترتيب التكديس.

السعر فارغ <span> واحد ، لكنني على استعداد للحصول عليه هناك لشيء مهم مثل <h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>
#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }
17
Rob Knight

إذا كانت أسباب إمكانية الوصول مهمة ، فاستخدم المتغير الأول (عندما يرغب العميل في رؤية الصورة بدون أنماط)

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

لا حاجة لتتوافق مع متطلبات مُحسّنات محرّكات البحث التخيلية ، لأن شفرة HTML أعلاه لها بنية صحيحة ويجب أن تقرر فقط هل هذا مناسب لك للزائرين.

كما يمكنك استخدام البديل مع رمز HTML أقل

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>
/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

يرجى ملاحظة أنني قد أزلت جميع أنماط CSS الأخرى والخارقة لأنهم لم يتوافقوا مع المهمة. قد تكون مفيدة في حالات معينة فقط.

11
se_pavel

الرنين في وقت متأخر قليلا هنا ، ولكن لا يمكن أن تقاوم.

أنت سؤال نصف معيب. دعني أشرح:

النصف الأول من سؤالك ، عند استبدال الصورة ، هو سؤال صالح ورأيي أنه بالنسبة للشعار ، صورة بسيطة ؛ سمة بديل ؛ و CSS لوضعها كافية.

في النصف الثاني من سؤالك ، حول "قيمة مُحسّنات محرّكات البحث" الخاصة بشعار H1 هو أسلوب خاطئ لتحديد العناصر التي يجب استخدامها لأنواع مختلفة من المحتوى.

الشعار ليس عنوانًا أساسيًا ، أو حتى عنوانًا على الإطلاق ، واستخدام عنصر H1 لترميز الشعار في كل صفحة من صفحات موقعك سيؤدي إلى ضرر (طفيف) أكثر مما ينفع التصنيف العالمي. بشكل جوهري ، تكون العناوين (H1 - H6) مناسبة لـ ، جيدًا ، تمامًا: العناوين والعناوين الفرعية للمحتوى.

في HTML5 ، يُسمح بأكثر من عنوان واحد لكل صفحة ، لكن الشعار لا يستحق أحدهما. شعارك ، الذي قد يكون عنصر واجهة مستخدم أخضر غامض وبعض النص في صورة على جانب الرأس لسبب ما - إنه نوع من "الطابع" ، وليس عنصرًا هرميًا لتنظيم المحتوى الخاص بك. أول (ما إذا كنت تستخدم أكثر يعتمد على التسلسل الهرمي العنوان الخاص بك) H1 من كل صفحة من صفحات موقعك يجب أن عنوان موضوعه. قد يكون العنوان الرئيسي الرئيسي لصفحة الفهرس هو "أفضل مصدر للأدوات الخضراء المشوشة في مدينة نيويورك". قد يكون العنوان الرئيسي في صفحة أخرى هو "تفاصيل الشحن للعناصر المشوشة الخاصة بنا". في صفحة أخرى ، قد يكون "About Bert's Fuzzy Widgets Inc.". انت وجدت الفكرة.

ملاحظة جانبية: لا تصدق كما تبدو ، لا تنظر إلى مصدر خصائص الويب المملوكة لشركة Google للحصول على أمثلة عن العلامات الصحيحة. هذا هو كل وظيفة في حد ذاته.

للحصول على "قيمة SEO" بأكبر قدر من HTML وعناصره ، ألقِ نظرة على مواصفات HTML5 ، واتخذ قرارات الترميز استنادًا إلى دلالات (HTML) والقيمة للمستخدمين قبل محركات البحث ، وستكون لديك نجاح أفضل مع كبار المسئولين الاقتصاديين الخاص بك.

3
Mattypants

أعتقد أنك ستكون مهتمًا بنقاش H1 . إنه نقاش حول ما إذا كنت تريد استخدام عنصر h1 لعنوان الصفحة أم للشعار.

أنا شخصياً أذهب مع اقتراحك الأول ، وهو شيء على هذا النحو:

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

بالطبع هذا يعتمد على ما إذا كان التصميم الخاص بك يستخدم عناوين الصفحات ولكن هذا هو موقفي من هذه المشكلة.

3
Ross
<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

كان هذا هو الخيار الجيد لكبار المسئولين الاقتصاديين لأن SEO تعطي أولوية عالية للعلامة H1 ، ويجب أن يكون داخل موقعك h1 اسم موقعك. باستخدام هذه الطريقة إذا قمت بالبحث في اسم الموقع في مُحسّنات محرّكات البحث ، فسيظهر شعار موقعك أيضًا.

تريد إخفاء اسم الموقع OR نصًا ، الرجاء استخدام مسافة بادئة للنص في قيمة سالبة. السابق

h1 a {
 text-indent: -99999px;
}
2
Vishal Gupta

فاتتك العنوان في عنصر <a>.

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

أقترح وضع العنوان في عنصر <a> لأن العميل سيرغب في معرفة معنى هذه الصورة. نظرًا لأنك قمت بتعيين text-indent لاختبار <h1> لذلك ، يمكن لهذا المستخدم النهائي الحصول على معلومات عن الشعار الرئيسي أثناء التمرير على الشعار.

2
30ml

نقطة واحدة لم تطرق إليها أي شخص هي أن السمة h1 يجب أن تكون خاصة بكل صفحة وأن استخدام شعار الموقع سيؤدي إلى تكرار H1 بشكل فعال في كل صفحة من صفحات الموقع.

أحب استخدام مؤشر z المخفي h1 لكل صفحة لأن أفضل SEO h1 غالبًا ما لا يكون الأفضل للمبيعات أو القيمة الجمالية.

1
DFA

كيف يفعل W3C؟

ببساطة إلقاء نظرة على https://www.w3.org/ . تحتوي الصورة على z-index:1 ، النص موجود ولكن خلفه بسبب z-index:0 مقترنًا بـ position: absolute;

HTML الأصلي:

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

CSS الأصلي:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}
0
Sebastien Horin

من المفترض أن تعمل طريقة جديدة (Keller) على تحسين السرعة على طريقة -9999 بكسل:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

الموصى بها هنا: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

0
coral_sea

أنا لا أعرف ولكن هذا هو الشكل الذي استخدمته ...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

بسيط ولم يحدث أي ضرر لموقعي بقدر ما أستطيع رؤيته. هل يمكن أن المغلق ولكن لا أرى أنه يتم تحميل أسرع.

0
Taswiz

أعتقد أن المثال الأول أكثر من كاف حيث سيتم عرض نص بديل في حالة تعطيل الصور. يساعد هذا أيضًا محركات البحث على معرفة موقعك.

تحديث: يبدو أنني كنت مخطئا. تحقق هذا المادة .

0
Shoban