การแทนที่ข้อความ H1 ด้วยภาพโลโก้: วิธีที่ดีที่สุดสำหรับ SEO และการเข้าถึง?

ดูเหมือนว่ามีเทคนิคที่แตกต่างกันออกไปดังนั้นฉันหวังว่าจะได้คำตอบที่ "ชัดเจน" ในเรื่องนี้ ...

ในเว็บไซต์เป็นเรื่องธรรมดาที่จะต้องสร้างโลโก้ที่เชื่อมโยงไปยังหน้าแรก ฉันต้องการทำสิ่งเดียวกันในขณะที่ปรับให้เหมาะสมที่สุดสำหรับเครื่องมือค้นหาโปรแกรมอ่านหน้าจอ IE 6+ และเบราว์เซอร์ที่ปิดใช้งาน CSS และ / หรือรูปภาพ

ตัวอย่างที่หนึ่ง:ไม่ใช้แท็ก h1 ไม่ดีสำหรับ SEO ใช่ไหม

<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 แสดงเมื่อรูปภาพและ / หรือ css ถูกปิด

<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 ในคำตอบของคุณ

คุณไม่มีตัวเลือก:

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

หัวข้อใน href และ img ถึง h1 นั้นสำคัญมาก!

ฉันทำเหมือนส่วนใหญ่ด้านบน แต่ด้วยเหตุผลการเข้าถึงฉันต้องสนับสนุนความเป็นไปได้ของภาพที่ถูกปิดการใช้งานในเบราว์เซอร์ ดังนั้นแทนที่จะเยื้องข้อความจากลิงค์นอกหน้าฉันครอบคลุมโดยการวางตำแหน่งอย่าง<span>เต็มความกว้างและความสูงของ<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 */  }

หากเหตุผลการช่วยการเข้าถึงมีความสำคัญให้ใช้ตัวแปรตัวแรก (เมื่อลูกค้าต้องการดูภาพที่ไม่มีสไตล์)

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

ไม่จำเป็นต้องปฏิบัติตามข้อกำหนด SEO ในจินตนาการเนื่องจากโค้ด 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 และแฮ็กอื่น ๆ ทั้งหมดออกเนื่องจากไม่สอดคล้องกับภารกิจ พวกเขาอาจมีประโยชน์ในบางกรณีเท่านั้น

การตีอย่างช้า ๆ ที่นี่ แต่ไม่สามารถต้านทานได้

คุณเป็นคำถามที่มีข้อบกพร่องครึ่ง ให้ฉันอธิบาย:

ในช่วงครึ่งแรกของคำถามของคุณการเปลี่ยนรูปภาพเป็นคำถามที่ถูกต้องและความคิดเห็นของฉันคือโลโก้ภาพที่เรียบง่าย แอตทริบิวต์ alt; และ CSS สำหรับการวางตำแหน่งก็เพียงพอแล้ว

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

โลโก้ไม่ได้เป็นหัวเรื่องหลักหรือแม้กระทั่งมุ่งหน้าเลยและการใช้องค์ประกอบ H1 เพื่อทำเครื่องหมายโลโก้ในแต่ละหน้าของเว็บไซต์ของคุณจะทำอันตรายเล็กน้อย (ดีกว่า) สำหรับการจัดอันดับของคุณ ความหมายหัวเรื่อง (H1 - H6) มีความเหมาะสมสำหรับดีเพียงว่า: หัวเรื่องและหัวเรื่องย่อยสำหรับเนื้อหา

ใน HTML5 อนุญาตให้มีหัวเรื่องได้มากกว่าหนึ่งหัวข้อต่อหน้า แต่โลโก้ไม่ควรได้รับหนึ่งในนั้น โลโก้ของคุณซึ่งอาจเป็นวิดเจ็ตสีเขียวเลือนและข้อความบางส่วนอยู่ในรูปภาพออกไปด้านข้างของส่วนหัวด้วยเหตุผล - เป็นประเภท "ตราประทับ" ไม่ใช่องค์ประกอบลำดับชั้นเพื่อจัดโครงสร้างเนื้อหาของคุณ แรก (ไม่ว่าคุณจะใช้มากขึ้นอยู่กับลำดับชั้นหัวข้อของคุณ) H1 ของแต่ละหน้าของเว็บไซต์ของคุณควรพาดหัวเรื่องของมัน หัวเรื่องหลักของหน้าดัชนีของคุณอาจเป็น 'แหล่งที่ดีที่สุดสำหรับวิดเจ็ตสีเขียวเลือนใน NYC' หัวเรื่องหลักในหน้าอื่นอาจเป็น 'รายละเอียดการจัดส่งสำหรับวิดเจ็ตฟัซซี่ของเรา' ในหน้าอื่นอาจเป็น 'เกี่ยวกับ Bert's Fuzzy Widgets Inc. ' คุณได้รับความคิด

หมายเหตุด้านข้าง: เป็นเรื่องที่น่าเหลือเชื่ออย่าดูที่แหล่งที่มาของพื้นที่เว็บของ Google เพื่อดูตัวอย่างของมาร์กอัปที่ถูกต้อง นี่คือการโพสต์ทั้งหมดแก่ตัวเอง

ในการรับ "SEO มูลค่า" สูงสุดจาก HTML และองค์ประกอบต่างๆลองดูรายละเอียด HTML5และทำการตัดสินใจมาร์กอัปตามความหมาย (HTML) และมูลค่าต่อผู้ใช้ก่อนเครื่องมือค้นหาและคุณจะประสบความสำเร็จกับคุณ SEO

ฉันคิดว่าคุณจะให้ความสนใจในการอภิปราย 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>

หลักสูตรนี้ขึ้นอยู่กับว่าการออกแบบของคุณใช้ชื่อหน้า แต่นี่เป็นจุดยืนของฉันในเรื่องนี้

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

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

คุณต้องการซ่อนชื่อเว็บไซต์หรือข้อความโปรดใช้การเยื้องข้อความเป็นค่าลบ อดีต

h1 a {
 text-indent: -99999px;
}

คุณพลาดหัวข้อใน<a>องค์ประกอบ

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

ฉันแนะนำให้ใส่ชื่อไว้ใน<a>องค์ประกอบเพราะลูกค้าต้องการทราบความหมายของภาพนั้น เนื่องจากคุณได้text-indentทำการทดสอบ<h1>ดังนั้นผู้ใช้ส่วนหน้าจึงสามารถรับข้อมูลของโลโก้หลักขณะที่พวกเขาวางเมาส์บนโลโก้

W3C ทำอย่างไร

เพียงแค่ได้ดูดูที่https://www.w3.org/ รูปภาพมี a 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;
}

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

ฉันชอบใช้ดัชนี az ซ่อน h1 สำหรับแต่ละหน้าเพราะ SEO h1 ที่ดีที่สุดมักจะไม่ดีที่สุดสำหรับการขายหรือค่าความงาม

วิธีใหม่ (Keller) ควรปรับปรุงความเร็วผ่านวิธี -9999px:

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

แนะนำที่นี่: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

ฉันไม่รู้ แต่นี่เป็นรูปแบบที่ใช้ ...

<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>

เรียบง่ายและไม่ได้ทำให้ไซต์ของฉันเป็นอันตรายเท่าที่ฉันเห็น คุณสามารถ css ได้ แต่ฉันไม่เห็นมันโหลดเร็วขึ้น

เพื่อเหตุผล SEO:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>

หลังจากอ่านวิธีการแก้ปัญหาข้างต้นฉันใช้วิธีแก้ปัญหา CSS Grid

1. สร้าง div ที่มีข้อความ h1 และรูปภาพ
2. จัดวางรายการทั้งสองไว้ในเซลล์เดียวกันและทำให้ทั้งคู่อยู่ในตำแหน่งที่ค่อนข้างเหมาะสม
3. ใช้เทคนิค zeldman.comเก่าเพื่อซ่อนข้อความโดยใช้คุณสมบัติการเยื้องข้อความการเว้นวรรคและการโอเวอร์โฟลว์

<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>

.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

<h1><a href="/" title="Some title">Name</a></h1>

h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}

<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>

#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}