검색 엔진이 부트 스트랩 탭에서 동적으로 생성 된 콘텐츠를 볼 수 있습니까?
index.php3 개의 부트 스트랩 탭 이있는 페이지가 있으며 각 탭에 대해 사용자가 클릭 한 후 콘텐츠를 생성합니다.
예를 들면 :
- 페이지가로드되면 첫 번째 탭에 대해서만 데이터베이스에서 데이터를 가져 오는 SQL 쿼리를 실행합니다.
- 사용자가 두 번째 탭을 클릭하면 데이터를 가져와 선택한 탭에 표시하는 쿼리를 실행합니다.
이 방법이 좋은가요? 이 모든 탭이 포함 된 페이지의 색인을 생성 할 때 Google도 모든 데이터를 볼 수 있습니까? 성능 문제로 인해 모든 데이터를 한 번에 가져오고 싶지 않습니다.
다음은 내 샘플 코드이므로 이것이 좋은 방법인지 알려주십시오.
index.php 파일:
<!DOCTYPE html>
<html>
<head>
<title>Tabs demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<?php $model = [
0 => ['title' => 'First item', 'content' => 'Some first content'],
1 => ['title' => 'Second item', 'content' => 'Some second content']
]; ?>
<?php foreach ($model as $data): ?>
<h3><?= $data['title'] ?></h3>
<p><?= $data['content'] ?></p>
<?php endforeach ?>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
검색 엔진이 두 번째 및 세 번째 탭 내용을 볼 수없는 것이 두렵습니다. 또는 적어도 그것들을 index.php 페이지와 관련시키지 않을 것입니다. 내가 잘못?
No, we (Google) won't see the content behind tabs iff the content under the tab is dynamically generated (i.e. not just hidden).
You can also see what we "see" using Fetch as Google in Search Console (former Webmaster Tools); read more about the feature in our post titled Rendering pages with Fetch as Google.
The best aproach is to design the website to work without javascript, and just replace all your anchor elements that work with ajax to pass a GET variable to your web controller, so it knows to return just the html to be inserted with javascript.
If you are using JS/AJAX, (I don't really see any, but I can't think of a better alternative) you are going to have a hard time getting Google to index your pages. Google has a good documentation on this that has helped me in the past on projects with similar goals.
https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
Is it really that big of a deal to not load the content until the tab is clicked? Unless you are working with an un-cacheable constantly updating database and massive HTML output that would create a long flash of unstyled content I would say splitting the tabs view code is somewhat trivial.
Maybe this can help:
If your problem is performance, it's maybe because you have strong DB queries or a shared server. If not, please ignore this.
When loading the whole page, put a "fake" HTML code in each tab. Try to build the HTML code shaped as the real code that is loaded when each tab is clicked. Put all of this inside an invisible DIV. Each time the page is loaded, put also some random data (maybe a 16-chars random-generated string). In this way I think Google will spider your data more frequently (this doesn't happen for static content).
Regards.
ReferenceURL : https://stackoverflow.com/questions/31637880/are-search-engines-going-to-see-my-dynamically-created-content-in-bootstrap-tabs
'Programing' 카테고리의 다른 글
| iframe에 pdf가있는 Internet Explorer에서 z-index가 작동하지 않음 (0) | 2020.12.25 |
|---|---|
| AlertDialog에 비해 DialogFragment의 장점 (0) | 2020.12.25 |
| 중첩 된 약속은 node.js에서 정상입니까? (0) | 2020.12.24 |
| 조건부 생성기 표현식의 예상치 못한 동작 (0) | 2020.12.24 |
| Python의 바이너리 버퍼 (0) | 2020.12.24 |