1. Accordiondisplay Top Content On Your Website Page
2. Accordiondisplay Top Content On Your Website Builder
3. Accordiondisplay Top Content On Your Website Domain

A common design question we receive from clients is if putting content behind tabs and accordions is okay for SEO. Content is one of the most important factors for any internet marketing strategy, so how it is displayed to your users matters. While there’s no definitive answer for how content should be displayed, there are some guidelines around it that Google offers.

Content accordions are a great option for displaying lots of content on mobile, especially Frequently Asked Questions (FAQ) type content. Brandpoint's mission is to provide copyright-free, high-quality content for editors, ad directors, bloggers, and print and online publishers. Use Accordion design to wrangle unwieldy content on your website into a clickable, expandable and collapsable menu. It's the perfect element to show or hide information on demand. Use it to organize your resume or portfolio, services page, FAQ, store policies and shipping procedures, or team member bios. It is a free plugin, so you just have to download it and install the Plugins Add New tab of your website administrative dashboard. Click the “Upload Plugin” button, install, and activate. After the installation, this plugin adds two little buttons to the WordPress page creation toolbar: “Add an accordion group” and “Add an accordion.

“Make your site’s important content visible by default. Google is able to crawl HTML content hidden inside navigational elements such as tabs or expanding sections, however we consider this content less accessible to users, and believe that you should make your most important information visible in the default page view.“

Content tabs and accordions can be okay as long as you consider what might be important for your users and the search engines to read. The information may not hold as much weight when it comes to SEO, but this doesn’t mean that Google cannot read, process or index it, only that it’s viewed as less important for organic rankings. So if it’s really important information, make sure your users can see it by default.

Below are a few examples of websites designed and developed by TopSpot that organize content with these guidelines in mind.

Tabbed Content for SEO

In this example, there is plenty of space for this company’s most important content to be visible by default including a product summary, application info, benefits and a very detailed product overview – all great information for users and search engines. In tabs, there is secondary information for the user like a product video, technical information and product literature that can be downloaded. This secondary information is useful, but in this case, not as influential for organic rankings. Putting it in tabs for the user is a fine solution.

What about mobile?

With a primary mobile index from Google coming at the end of this year, how your website handles content on a mobile device is very important. Last year, when plans of a mobile index were announced, Google’s Gary Illyes mentioned that content behind tabs or accordions for the mobile user experience will have full SEO value. Content tabs and accordions can make the mobile experience a lot better, so a user can expand on the content they want easily without lots of scrolling. In other words, the use of content tabs or accordions is fine for a mobile device.

Accordions / Accordion Content for SEO

Accordiondisplay Top Content On Your Website Page

Content accordions are a great option for displaying lots of content on mobile, especially Frequently Asked Questions (FAQ) type content. In the example below, the responsive website is designed to show all the valuable FAQ content by default on the desktop view, but transitions to accordions on a mobile device to make it an easy user experience for mobile users.

Find 5 listings related to Mac Cleaners Inc in New York on YP.com. See reviews, photos, directions, phone numbers and more for Mac Cleaners Inc locations in New York, NY. Mac cleaner nyc. Mac Cleaners at 328 E 53rd St Frnt B, New York, NY 10022. New York, NY 10012. Greenwich Village. The worst dry cleaner in NYC? Hard to say, but definitely a contender. Mac Dry Cleaners. 25 $$ Moderate Dry Cleaning. Laundry Services in New York, NY. New York, NY - House Cleaning Service. Appliance Installation Services Architect Carpenter Carpet Cleaner Chimney Sweep Cleaner Concrete Contractor Deck Contractor Door Contractor Drywall Contractor. 7 reviews of Heather Mac Clean Cleaners 'This is the best dry-cleaning place I have ever been to!

The example below uses content accordions on the desktop view to include supplemental information that explains specifics on a process relevant to their products. While it’s important information, it serves as more of an FYI for users in case they’d like more information.

Content Dropdowns for SEO

Tabs and accordions aren’t the only design elements for displaying content. Content dropdowns can be a neat way to display information and get a user to interact with your content. This example is an interactive tool for users from our Local SEO page. Similarly to tabs and accordions, the content shows based on what the user selects, meaning the content does not show by default. If this content’s purpose was only to influence rankings, a different strategy for displaying all the content by default might be necessary. In this case, the tool’s purpose is just to be an informational and interactive resource for users.

When it comes to designing content for SEO, the most important thing to remember is that you are designing for people. What information will your customers need to be able to access quickly to get closer in their decision-making process? Display that content upfront. Make their experience an easy and intuitive one no matter which device they are using.

If you are interested in learning more about how TopSpot can help your business, please Contact Us or give us a call at 713-933-0449!

Would you like to receive more information like this, sent directly to your inbox?

Accordion Menu provides a presentable interface for web site visitors to navigate through the content within a single page. This eliminates having to arrange multiple pages to display relevant contents on separate interface. You can built accordion menu to organize your contents grouping together the relevant contents over a single menu. Accordion menu features just like any tabs menu would displaying the content of particular menu. However, in accordion contents and menu are stacked together providing a beautiful design of hide and show effects. In this tutorial we will be building Horizontal Accordion menu with just HTML and pure CSS.

Now see there are lots of accordion designs that you could go for. And for that you can use several development approaches. For advanced features and broad applications use of Javascript or Jquery is an obvious choice, but in this tutorial we are keeping things simple and just restricting our development to pure HTML and CSS to built a horizonal accordion menu making effect use of the hover effect.

Okay! folks come on board. lets get our hands dirty with CSS and HTML to build an actual example of horizontal accordion menu.

HTML and CSS Horizontal Accordion Menu With Example

Lets understand a brief overview of what we are implementing. We will stack menu and content together side by side. Then by setting a minimum width just enough to show menu sections we will hide the content of the menu. Then with hover effect we will be increasing the width enough to display the content together with menu. Thats it. Seems easy ,right?? Okay! lets go on step by step.

Step 1: Building the Basic HTML Structure

Before building the HTML structure. first of all we will be linking CDN link of font-awesome to include some icons in our example. You can add icons from other sites like Google icons, iconicons, or wherever you prefer from. In this tutorial, I am going for font-awesome icons. So lets, add the following line in the head section of your HTML.

With that done, lets start by building a basic structure of HTML.

In the above structure, we have taken a list item and added some paragraph and icon from font awesome. The code should be self-explanatory even to beginners.

Accordiondisplay Top Content On Your Website Builder

Complete Horizontal Accordion Menu HTML

With above basic structure understood. Other elements are just redundant multiplication of the above basic example. So below is the final complete HTML. The icons will be used for menu while content will be its relevant content which will be displayed when hovered over the icon.

The above complete HTML should render the following web structure.

Step 2: Adding Basic CSS

Okay! Seems fair enough. We haven’t added any CSS so the mere HTML looks nothing like horizontal accordion menu. So yeah, from here on its all experiments.

The above CSS adds background to the page and arranges the heading to a proper position with better font styling.

Step 3: Horizontal Accordion Menu Stacking

As already mentioned for horizontal accordion menu, we will be manipulating the CSS property width of the content and menu to provide an interactive show and hide property. Since the width contains the overall content, I have pre-estimated our final content width and set the min-width of the accordion_menus element. With that set, the value of width that is 65% never yields a width less than 800px in any responsiveness. That is set because if the width of the horizontal accordion menu is less than the estimated width then some width jitter occurs. Try experimenting.

Then the width of the accordion element was set to 80px for now which isn’t enough to showcase the entire content but is wide enough to display the menu content. We will be increasing the size of width as we over over the menu just as we did for vertical accordion menu.

For now the content and menu gets stacked together if you view your web page.

Step 4: Separating each Accordion Menu Stacks

Okay! Coming to these point we have managed to set a minimum width of the accordion menu that further sets out to be a horizontal accordion menu. Now we want to increase the width of the menu as the icon is hovered on. So here we have it the hover effect.

Accordiondisplay Top Content On Your Website Domain

Above CSS simply expands the width of the accordion. However still the contents seem to stack. We need to arrange the icon element and content element separately. Now by separation don’t get misled by tabs menu configuration where all menus are arranged together either horizontally or vertically depending upon the designs while contents are arranged together separately. While in accordion we are spearting the menu and content stack but they will be relatively positioned against each other. So, lets manipulate the content element CSS.

With above code, we successfully separated the content with menu just by adding a margin-left of appropriate value such that the width of the icon menu i.e. 80px + width of content i.e.360px + padding-left i.e. 10px would finally add up giving the width of 450px as set by the hover effect. This content and menu separation with width manipulation can be further depicted by following figure.

Step 5: Beautifying the Accordion Menu

It seems though, we have achieved the basic expand and collapse feature of the horizontal Accordion Menu with pure CSS coming to this point of tutorial. But the menu lacks a beautiful design, So lets experiment with designs.

The above CSS designs the icon’s specifications. The font-size is used to increase the size of the icon.

The above CSS seems pretty confusing to look at. But the ::before selector adds contents before the fab element while ::after selector adds content after the fab element. These additions will be needed for transitions. For now you can simply look at the CSS of ::before selector which simply sets the padding and positioning of the fab element. The ::before can be assumed as the positioning arrangment of the icon currently seen. Those are just a mere experimentation with pixels to align the icon centrally to our menu display.

Note: The use of content property in ::before and ::after selector is very important as it sets out what needs to be added to the selected elements before and after itself.

Step 6: Adding the “::after” Element

In the above CSS we have added :after CSS and set its positioning and padding. But we haven’t added any content. So now lets add the contents.

In step 5, we added CSS for fabs class as they were common for all icons. But since each icons are different from one another for each item we have added individual unicode content resembling to the corresponding icon. The unicode was obtained from official font-awesome site. Since we haven’t set any content for ::before, its because the icon provided from the html structure serves its purpose.

Fonepaw android data recovery 2.4.0 serial key mac. Fonepaw Android Data Recovery 2.4.0 Serial Key Code Fonepaw Android Data Recovery Free Trial FonePaw Android Data Recovery 2.6.0 Serial key is the effective device for the recuperation of all the Le sorts of your Android whether it is the content substance or media less. FonePaw Android Data Recovery free is Powerful recovery software specifically for Android users who lost their valuable data as a result of a sudden deletion, virus infection, restore factory settings and physical Android damage. Serial key for idm 6.25 build 8. Also, FonePaw Android Data Recovery Serial Key Identifies and recover effectively deleted files and envelopes of Android devices. FonePaw Android Data Recovery 2.9.0 Serial Key can recover most of. Free Gw2 Pof Serial Key Fonepaw Android Data Recovery 2.4.0 Serial Key How To Check Serial Key In Steam Stellar Phoenix Jpeg Repair 5.0 Serial Key Final Draft 10 Serial Key Free Nero 6 Serial Key For Windows 7 Active Undelete 9 Serial Key Internet Download Manager 6.06 Beta Serial Key Cyberghost 6 Serial Key Free.

Step 7: Transition Effect on Accordion Menu

Now Since we’ve added ::after contents for each different icons. The above CSS simply replaces the display of ::before content with ::after contents. By moving to way left the original content and moving the ::after content left till it is visible to display.

Complete Horizontal Accordion Menu CSS

If you have just scrolled down then for complete HTML portion, please look in step-1. The complete Horizontal Accordion Menu CSS for this tutorial is given below. You can just copy the HTML and CSS and that should work fine.

Conclusion

Accordion Menu system provides an interactive approach to organizing your contents. In this tutorial we have used pure HTML and CSS to build a beautiful example of horizontal accordion menu. From here, you could go on exploring further designs of accordion and development process. Though using CSS seem a basic simple implementation in major development fields, the use of JavaScript or jquery is recommended. Well, congrats you held through. That’s it for now!!