h1 태그에 링크와 스팬이있는 두 줄

Simonski

나는 shopify 스토어가 있고, 제품 제목의 첫 번째 줄에 공급 업체 페이지에 대한 내부 링크가 있고 두 번째 줄에는 제품 제목이 있습니다.
나는 두 개의 라인을 넣어 유효한의 읽기 <br/><h1>(주문이 H1 제목을 사용하지에) 제목,하지만 나는 그것을 결합하려는 <a>링크 (1 라인)과 <span>다른 스타일링 (2 선). SEO 측면에서도 타당한가요? 도와 주셔서 감사합니다!!

<h1><a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a><br/><span class="product-single__title" itemprop="name">{{ product.title }}</span></h1>
존 P

유효하지만 필요하지 않습니다. 대신 br완전히 제거 할 수 있습니다 . 하위 노드 중 하나 또는 모두를display:block

.product-vendor-hyperlink{display:block;}
<h1><a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a><span class="product-single__title" itemprop="name">{{ product.title }}</span></h1>

또 다른 옵션은 제품 제목에 <header>전체 h1가중치를 부여 하고 헤더에있는 것과 관련된 공급 업체 링크를 유지 하려는 경우 태그 사용을 고려하는 것입니다 . 당신은 페이지 수준 또는 사용에 이것을 사용할 수 있습니다 sections, div등,하지만 li.

<header>  
  <a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a>
  <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
</header>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

h1과 h1을 모두 같은 줄에 렌더링하는 방법

분류에서Dev

h1 태그의 스팬 태그로 인해 줄 바꿈이 발생 함

분류에서Dev

h1을 같은 줄에 nav ul 중간에 두는 방법

분류에서Dev

tinymce는 줄 바꿈에서 해시 태그 '#'을 h1로 바꿉니다.

분류에서Dev

스팬 크기 문제가있는 H1 텍스트

분류에서Dev

H1 태그 내의 링크 색상이 변경되지 않는 이유는 무엇입니까?

분류에서Dev

같은 줄에 H1과 ul

분류에서Dev

두 텍스트 요소 <p>와 <h1> 사이의 수직 공간 제거

분류에서Dev

글꼴 패밀리 또는 글꼴 크기에 영향을주지 않고 <h1> 태그 적용

분류에서Dev

H1에서 배경을 줄이는 방법은 무엇입니까?

분류에서Dev

Linux의 파일 이름에서 <h1> 태그 추가

분류에서Dev

크롬에서만 h1과 겹치는 Div

분류에서Dev

두 개의 다른 헤더 (h2) 태그를 한 줄에 유지하는 방법은 무엇입니까?

분류에서Dev

쉘에서 두 태그 사이의 주석 줄

분류에서Dev

두 줄 사이에있는 줄 변경

분류에서Dev

조정 가능한 밑줄 두께와 글자와 밑줄 사이의 수직 공간이있는 CSS 여러 줄 링크

분류에서Dev

Selenium + Cucumber + Ruby의 H1 태그에서 텍스트를 얻는 방법

분류에서Dev

H1 HTML 태그에 공백이없는 것 같습니다.

분류에서Dev

특정 크기가 있는데 한 줄에 두 줄이 표시되는 이유

분류에서Dev

여는 태그와 닫는 태그가 스팬 여는 태그와 닫는 태그 사이에있는 경우 li 태그 교체

분류에서Dev

로고와 h1 제목은 html과 css를 사용하여 같은 줄에 나타납니다.

분류에서Dev

두 개의 특정 div 클래스 이름 아래에서 h1 요소 선택

분류에서Dev

태그 'h1'이 닫히지 않았습니다.

분류에서Dev

h1 태그 위로 이동할 때 깜박임

분류에서Dev

XSLT 2.0 : 선형 <h1 />-<h2 />-<h3 /> 태그 시스템에서 트리 구축

분류에서Dev

화면 크기에 관계없이 이미지를 h1 옆에 유지

분류에서Dev

콘텐츠 길이에 따라 <h1>-<h5> 태그의 너비를 제한하는 방법

분류에서Dev

링크 텍스트와 링크 줄 사이에 더 많은 공간을 추가하는 방법이 있습니까?

분류에서Dev

섹션 내에서 h1 태그

Related 관련 기사

  1. 1

    h1과 h1을 모두 같은 줄에 렌더링하는 방법

  2. 2

    h1 태그의 스팬 태그로 인해 줄 바꿈이 발생 함

  3. 3

    h1을 같은 줄에 nav ul 중간에 두는 방법

  4. 4

    tinymce는 줄 바꿈에서 해시 태그 '#'을 h1로 바꿉니다.

  5. 5

    스팬 크기 문제가있는 H1 텍스트

  6. 6

    H1 태그 내의 링크 색상이 변경되지 않는 이유는 무엇입니까?

  7. 7

    같은 줄에 H1과 ul

  8. 8

    두 텍스트 요소 <p>와 <h1> 사이의 수직 공간 제거

  9. 9

    글꼴 패밀리 또는 글꼴 크기에 영향을주지 않고 <h1> 태그 적용

  10. 10

    H1에서 배경을 줄이는 방법은 무엇입니까?

  11. 11

    Linux의 파일 이름에서 <h1> 태그 추가

  12. 12

    크롬에서만 h1과 겹치는 Div

  13. 13

    두 개의 다른 헤더 (h2) 태그를 한 줄에 유지하는 방법은 무엇입니까?

  14. 14

    쉘에서 두 태그 사이의 주석 줄

  15. 15

    두 줄 사이에있는 줄 변경

  16. 16

    조정 가능한 밑줄 두께와 글자와 밑줄 사이의 수직 공간이있는 CSS 여러 줄 링크

  17. 17

    Selenium + Cucumber + Ruby의 H1 태그에서 텍스트를 얻는 방법

  18. 18

    H1 HTML 태그에 공백이없는 것 같습니다.

  19. 19

    특정 크기가 있는데 한 줄에 두 줄이 표시되는 이유

  20. 20

    여는 태그와 닫는 태그가 스팬 여는 태그와 닫는 태그 사이에있는 경우 li 태그 교체

  21. 21

    로고와 h1 제목은 html과 css를 사용하여 같은 줄에 나타납니다.

  22. 22

    두 개의 특정 div 클래스 이름 아래에서 h1 요소 선택

  23. 23

    태그 'h1'이 닫히지 않았습니다.

  24. 24

    h1 태그 위로 이동할 때 깜박임

  25. 25

    XSLT 2.0 : 선형 <h1 />-<h2 />-<h3 /> 태그 시스템에서 트리 구축

  26. 26

    화면 크기에 관계없이 이미지를 h1 옆에 유지

  27. 27

    콘텐츠 길이에 따라 <h1>-<h5> 태그의 너비를 제한하는 방법

  28. 28

    링크 텍스트와 링크 줄 사이에 더 많은 공간을 추가하는 방법이 있습니까?

  29. 29

    섹션 내에서 h1 태그

뜨겁다태그

보관