Move Your Blog Posts to HubSpot with CSS Selectors| A Guide

Let us consider that you are moving your content from some other CMS to your HubSpot CMS. In this process, one of the daunting tasks you will have to handle is transforming content from your blog page to HubSpot. If you have been blogging for a while now, you will have dozens of blog posts if not hundreds or thousands of already published blog posts. It can be daunting to manually recreate all the contents. This is where the CMS Hub and Marketing Hub users of HubSpot can use one of the two different options available for migrating the blog posts. One is migrating using Smart Copy and the other is using CSS Selectors.

Smart Copy:

What is Smart Copy?

The Smart Copy is a feature that evaluates the template you have used in your blog to spot the tags, content, authors and titles in your blog posts using their links. After it scans your entire blog, the feature will map all these features and will import them into existing posts in a new HubSpot blog.

This feature or tool makes it simple to move a blog that already exists in your website and is hosted presently somewhere onto the HubSpot Platform. The combination of Smart Copy and other available blog import options like WordPress Connect, CSV and XML Import means that it is now simple than ever before for marketers to get started with blogging on HubSpot.

Before You Start:

Before you learn how to migrate blog posts into HubSpot with Smart Copy, it is better to first ensure certain things:

• When creating your HubSpot Account, you will find a new default blog in your account that you can use for importing your blog posts.
• You will use an URL from a blog that already exists on your website to import all your present blog content into the HubSpot Blog. To ensure that the import process happens smoothly, you can do one thing.
• You can use a sample blog post with a unique opening paragraph, featured image and title so that it will be easier to spot these elements when you confirm the mapping of your blog post.
• Also, remember that this feature does not work with blog posts that contain hashtags in the structure of their URL. For instance, let us consider that your blog URL goes as follows: www.sampleblog.com#title. In this case, the Smart Copy feature will not work.
• Further, the smart copy will not work on blogs that are hosted on some popular domains like ikea.com, medium.com, twitter.com, Wikipedia.org, google.com, amazon.com, wwe.com, themindbodyspiritstore.com and hubadpi.com.
• The smart copy will not work on date format separated by dots. For instance, a blog post with the date of publishing as 11.25.2022 will not have the date of publishing imported to your new HubSpot Blog.
• Let us consider that you are importing your blog posts from WordPress. In this case, you can use WordPress Connect Feature as against Smart Copy.
• When you use Smart Copy, you can import only 400 blog posts in a single import. However, for the same scan, you can repeat the import procedure many times.

How to Import Using Smart Copy?

1. When you log in to your HubSpot Account, you will find the settings icon in the main navigation bar.
2. In the left sidebar menu, you can navigate to the website and then the blog
3. In the Current View Section, you can tap the initial dropdown menu and choose the Import Blog option. Here is what it will look like:
4. On the import overview page, tap the import new blog option that you can find in the top right. In case, you have already tried importing a blog, you can click on the option called Start New Import in the drop-down menu as against choosing the option called select blog posts.
5. Now, tap the smart copy option and then on the Next option.
6. In the homepage field of the blog, provide the URL of the listing page of your blog.
7. In the recent blog post field, provide the URL of a recent blog that you published.
8. Now, from the dropdown menu, you will find an option that asks you about the blog platform that you are presently using. Select the appropriate blog platform from the options available. In case, you are not sure of the platform that you are presently using, you can select the option that says you are not sure about it.
9. Now, tap the HubSpot Blog dropdown menu and choose the blog in which the import blog posts have to be hosted. In case, you wish to create a new blog in HubSpot, you can click the option called Create New Blog instead.
10. In the lower right, you should click on the option called “Copy Blog Posts”

Remember that it will take at least an hour for your blog posts to be skimmed and imitated into the importer tool. So, you can check the import process at least an hour later. Also, as soon as the import process is completed, you will get an email notification.

Review your Blog Post Mappings:

After the tool finishes scanning your blog posts, you will get to see “scan completed” in the status column. In case of an issue when importing or when the import crosses the limit of 10,800 pages, you will get to see the details in the status column. When you intend to import more than 10,800 pages, you can import them in XML file format.

You can conclude the import process by clicking on the option called review results. When you do this, you can confirm whether the blog contents are properly mapped. Here, the Smart Copy feature will recommend any field mappings that it can spot on the basis of the content of your live blog post. For every field, you will have to choose the right value for those listed. Here are some examples for a better understanding:

• Title: Choose the title of the blog post
• Author: Choose the author of the blog post. In case, you do not want to name of the author to be displayed, you can choose “Author is not displayed, use “Admin” instead. Prior to importing your posts, you have the option to customize this default value.

The title, post body, date of publishing and author fields are compulsory fields and you will have to enter these details.

• Date of Publishing: Choose the date when the post was published. In case, you do not want to reveal the date of publishing, you can use another option. Yes, you can choose “Publish date is not displayed, use today’s date instead. Before importing, you can personalize this default value.
• Featured Image: The purpose of this value is to spot any images in the body of your blog posts that might be featured images. From this value, you can tell the Smart Copy Tool as to where it should locate the featured image for the remaining posts. If you do not want the featured images to be imported into your HubSpot post, you have an option. You can select the option that reads “Featured image is not displayed, do not import it.”
• Post Body: The purpose of this value is to display a preview of the post body. In case, the display text is not correct, you will have to tap the option that reads “No, see another choice.”
• Tags/Categories: Choose the tags/categories applied to the blog post. In case, you do not want to import the tags or categories of this blog post, you can again use an option. The option is “category/tag is not displayed, do not import it.”

If you wish to scan a different blog post as the source for importing, you have the option to change the URL and enter the URL of the new blog post. This will start the field mapping process again.

CSS Selectors:

What are They?

CSS in CSS Selectors stands for Cascading Style Sheets. In CSS, selectors are used for targeting the HTML elements on web pages that we want to style. You can find a wide range of CSS selectors. These selectors will allow you to achieve fine-grained precision when it comes to selecting elements to style.

CSS Selectors spot HTML Elements on a webpage. The purpose of this spotting is to target them with other code like JavaScript or CSS Stylesheets. At this juncture, it is better to know about the kinds of CSS Selectors:

• Tag: A Tag otherwise called a type selector is nothing but the name of the tag
• Class: A Class selector is nothing but the name of the class that comes with a dot on the front. Examples include .blog-title, .blog-banner and .featuredcontent
• ID: An ID Selector is the name of the ID that comes with a hashtag in the front. Examples include #news_heading, #blog_content and #post_title.
• When you feed a CSS selector within the Smart Copy feature, you are providing the information to the person engaged in importing to import only the appropriate feature into your new blog in HubSpot.

How to Find CMS Selectors?

The answer to this question relies on the browser you use. For instance, let us consider that you use Chrome Browser. This browser has extensions that can aid you with finding and copying CSS Selectors. For the best outcomes, regardless of the browser you use, you can refer to the documentation for the web browser that you use.

But, the good thing here is that you can use Smart Copy and CSS Selectors together when importing your blog posts to HubSpot. When you use Smart Copy, it is not enough to find and copy any CSS selector. You should be particular about finding and using a good CSS Selector. You can do this selection by inspecting the source code of your blog.

For the best outcomes, you can select a CSS Selector that can pay attention to the feature on all blog posts. However, it should be particular to target the exact feature that you are looking to import. Here, you should remember one thing. Smart Copy will aid you along the way by showing the value that your CSS selector found.

How to Use CSS Selectors Together with Smart Copy for Importing Blog Posts to HubSpot?

Let us consider that you are looking to find the CSS Selector to the date of publishing or the author of your blog posts. In this case, you can focus on an aspect that encompasses more content as compared to the date of publishing and the name of the author alone. When using Smart Copy, it will strip out every other thing like punctuation marks, special characters, published on, posted, etc. You can understand this better with an example in the image below:

When it imports the body of your blog post, the Smart Copy feature or tool will not import any elements that have been specified already for the mapping of other features. This rule will not apply to the feature image as it will still be part of the body of your blog post.

Conclusion:

Now, with the tips given above, you can migrate blog posts into HubSpot with ease.