concern
When using the Tabs element, you may encounter performance issues if you add a large number of elements (such as the Loop Grid or Loop Carousel elements) or many elements (such as creating almost the entire page's content in each tab).
![图片[1]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052913560210.png)
These issues include:
- Front-end performance issues (slow loading pages).
- Performance issues in the Elementor editor (difficulty in manipulating the editor).
Another issue is that if you use JavaScript-dependent elements in the tab content, they may not display properly. For example, if you use a circular rotation in any tab other than the first one,Gallery Pro Elementsor other elements that depend on JS, you may encounter an error.
These problems can be avoided by the methods in this tutorial.
vantage
- performance enhancement: Avoid performance issues on the front-end and in the editor.
- SEO optimization: Each tab content will be a separate page with separate
and meta-description, and no content will use display, which has a positive impact on SEO.
Applicable Scenarios
- When tabs contain a lot of content
- When there are JavaScript-dependent elements in a tab
- When SEO is a priority (i.e. when tab content is important for SEO)
Pseudo-tagging on popular websites
"Pseudo-tagging" is a popular choice for some popular websites, such as Google:
![图片[2]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052912492981.png)
All of these act like tag titles, but are actually links to other pages. This is a widely used design pattern.
Creating pseudo-labels
utilizationNav Menu elementReplace it. Then.Link the menu item to a different page corresponding to the "labeled content".
Creating pseudo-labels
Create page
First, create a new page for each tab content.
![图片[3]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052912575053.png)
Doing so improves performance and prevents errors.
Next, name and publish these pages.
Creating menus
Then, go to the WordPress dashboard and click in order on "exterior condition" > "menu", click on " create a new menu"Create a new navigation menu.
![图片[4]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052912590947.png)
Then, add all the pages you just created to that menu and click "save (a file etc) (computing)".
![图片[5]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052913021020.png)
Creating one-page templates
To make sure all the "tabs" are consistent, we will create a single page template.
This template can link to certain posts or custom post type (CPT) archives.
Steps:
- Go to the WordPress backend and click on "templates" > "Theme builder".
![图片[6]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052913115257.png)
- Click on "Add new one-page template".
![图片[7]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052913302152.png)
Adding WordPress Menu Elements
![图片[8]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052516340665.png)
- Creating menus::
- Log in to the WordPress dashboard.
- Go to Appearance > Menu.
- Click on "Create New Menu", name the menu and click on the "Create Menu" button.
- In the menu items on the left, select the page, article, category or custom link you want to add to the menu and click the "Add to Menu" button.
- You can drag the menu items to adjust the order. When finished, click "Save Menu".
- Adding a menu to a page::
- Go to Pages > All Pages, find the page you want to add a menu to, and click Edit.
- If the classic editor is used:
- In the page editor, select a text widget or add the shortcode directly to the page content
[menu id="menu_id"]
whichmenu_id
is the ID of the menu you created. - Using the Elementor builder
- Open the Elementor editor and find the "Navigation Menu" widget.
- Drag the Navigation Menu widget to the appropriate place on the page.
- In the left panel, select the menu you just created.
- In the page editor, select a text widget or add the shortcode directly to the page content
![图片[9]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052913305439.png)
- Customized menu styles(Optional):
- If you need to customize the menu style, you can set it in the theme customizer.
- Go to Appearance > Customize > Additional CSS and add custom CSS code as needed.
Adding HTML Elements
- Open the Elementor editor and find the "HTML" widget.
- Drag the "HTML" widget to the top of the navigation menu element on the page.
![图片[10]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052913345449.png)
Find a section of code similar to the following and replace it with that code. The styling has been adjusted to be the same as in the demo above, which saves time in changing all the CSS.
<div class="custom-html">
<!-- 您的自定义HTML代码 -->
<style>
/* 添加您自定义的CSS样式 */
.custom-html {
/* 示例样式 */
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
</style>
<!-- 示例内容 -->
<p>This is a sample HTML element that sits on top of the navigation menu element.</p>
</div>
It may be necessary to browse the CSS below and adjust it as needed.
Now, tweak the container (which should contain HTML elements and WordPress menu elements) until it has the perfect style you want.
Add where needed "Content of the post"Element. That is."Tagged content"Display location.
![图片[11]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052913471791.png)
Publish your one-page template andSet conditions so that all "tabs" have itThe
Add Content
Now all that's left to do is to go to each of the "tabs" and add the content you need to them.
Summary:
![图片[12]-提升WordPress网站性能和SEO的伪标签使用指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024052915042897.jpg)
How to optimize the performance and SEO of your WordPress website by using pseudo-tabs instead of Tabs elements?This post explains ways to create pseudo-tabs, including creating new pages, setting up navigation menus, and adding custom HTML elements. This technique avoids performance issues in the front-end loading and editor, ensures that JavaScript elements are displayed correctly, and improves SEO with a separate page structure. It also explains how to create one-page templates to maintain consistency and optimize tab content. By implementing these steps, you can significantly improve your website's user experience and search engine rankings.
Link to this article:https://www.361sale.com/en/10758The article is copyrighted and must be reproduced with attribution.
No comments