Need to Add Custom Title and Text on Blog Landing Page

@tuanphan Could you please help me to add custom Blog Header (Title) and Text on these pages

https://www.philippinestravelguides.com/philippines-travel https://www.philippinestravelguides.com/latest-updates

I tried to find solutions online but i dont see any.

Thank you

Add to Website > Page (or Design) > Website Tools > Custom CSS

body#collection-61c02453b72f9a6d676149bb #page:before {
    content: "Philippines Travel";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}
body#collection-5b967321575d1fa6884b1635 #page:before {
    content: "Latest Updates";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}

1 hour ago, tuanphan said:

Add to Website > Page (or Design) > Website Tools > Custom CSS

body#collection-61c02453b72f9a6d676149bb #page:before {
    content: "Philippines Travel";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}
body#collection-5b967321575d1fa6884b1635 #page:before {
    content: "Latest Updates";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}

Thank you @tuanphan for this piece of code but I wanted to add H1 Tag on its page heading as well one line text..

E.g. For this page https://www.philippinestravelguides.com/philippines-travel <h1>Philippines Travel<h1>
Get real information and experiences from our Philippines Travel Trip diaries

Could you please provide code how to do that?

Thanks

23 hours ago, madzie said:

Thank you @tuanphan for this piece of code but I wanted to add H1 Tag on its page heading as well one line text..

E.g. For this page https://www.philippinestravelguides.com/philippines-travel <h1>Philippines Travel<h1>
Get real information and experiences from our Philippines Travel Trip diaries

Could you please provide code how to do that?

Thanks

Second text: Get real information and experiences from our Philippines Travel Trip diaries will be paragraph <p> or?

20 hours ago, tuanphan said:

Second text: Get real information and experiences from our Philippines Travel Trip diaries will be paragraph <p> or?

Yes it will be paragraph

On 9/23/2023 at 11:12 AM, madzie said:

Yes it will be paragraph

Add this code to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $('<h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p>').insertBefore('body#collection-61c02453b72f9a6d676149bb #page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p {
    text-align: center;
}
</style>

1 hour ago, tuanphan said:

Add this code to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $('<h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p>').insertBefore('body#collection-61c02453b72f9a6d676149bb #page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p {
    text-align: center;
}
</style>

But I want to add H1 tag and Paragraph text in every pages, but the code which you gave will work for 1 page... Am i Right?

Remove code from Code Injection, add this code to Philippines Travel Page Settings > Advanced > Header Code Injection

Repeat similar for other blog pages, just change the text in the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p>').insertBefore('#page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p {
    text-align: center;
}
</style>

2 hours ago, tuanphan said:

Remove code from Code Injection, add this code to Philippines Travel Page Settings > Advanced > Header Code Injection

Repeat similar for other blog pages, just change the text in the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p>').insertBefore('#page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p {
    text-align: center;
}
</style>

 

Thank you @tuanphan

Hi @tuanphan,

I have added the above script in every pages as you explained for h1 tag and paragraph. But, most of the crawlers doesnt detect this H1 tag, when i made the SEO audit of the website. It reports as Missing H1 Tag. Please see attached, is there any other way to add H1 tag to pages which crawlers can detect too.

Also, I would like to change H2 which is coming up on my Blog Title to H1 tag, can you please help me with it. For example for this page https://www.philippinestravelguides.com/philippines-destinations/puerto-princesa-travel-guide H2 tag is on Explore the Wonders of Puerto Princesa: Travel Guide which i need to change to h1 tag.

Maybe Your Tool craws site before the script code loading, so it won't find h1 to show 

You can try this new code

<div class="custom-heading"><h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.custom-heading').insertBefore('#page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p, #page .custom-heading {
    text-align: center;
}
</style>

Note the text, maybe appears before header 1-2 seconds, then disappear and appear to correct position

Don't care this, and check your seo tool again, if it works, I will give code to fix this problem

6 hours ago, tuanphan said:

Maybe Your Tool craws site before the script code loading, so it won't find h1 to show 

You can try this new code

<div class="custom-heading"><h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.custom-heading').insertBefore('#page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p, #page .custom-heading {
    text-align: center;
}
</style>

Note the text, maybe appears before header 1-2 seconds, then disappear and appear to correct position

Don't care this, and check your seo tool again, if it works, I will give code to fix this problem

Hi @tuanphan I added this code and h1 tag works but same h1 tag is appearing on all sub pages.

For example, I added the code to this page https://www.philippinestravelguides.com/philippines-travel

and it works but same H1 tag is appearing on this page as well https://www.philippinestravelguides.com/philippines-travel/bamboo-paraiso-resort-hundred-islands https://www.philippinestravelguides.com/philippines-travel/leyte-visayas-adventure-tours

Thanks

On 9/27/2023 at 9:51 PM, madzie said:

Hi @tuanphan I added this code and h1 tag works but same h1 tag is appearing on all sub pages.

For example, I added the code to this page https://www.philippinestravelguides.com/philippines-travel

and it works but same H1 tag is appearing on this page as well https://www.philippinestravelguides.com/philippines-travel/bamboo-paraiso-resort-hundred-islands https://www.philippinestravelguides.com/philippines-travel/leyte-visayas-adventure-tours

Thanks

 

Use this new code

<div class="custom-heading"><h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.custom-heading').insertBefore('body.view-list #page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p, #page .custom-heading {
    text-align: center;
}
</style>

And add this to Website > Page > Website Tools > Custom CSS

  body.view-item .custom-heading {
  	display: none !important;
  }

11 hours ago, tuanphan said:

Use this new code

<div class="custom-heading"><h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.custom-heading').insertBefore('body.view-list #page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p, #page .custom-heading {
    text-align: center;
}
</style>

And add this to Website > Page > Website Tools > Custom CSS

  body.view-item .custom-heading {
  	display: none !important;
  }

 

@tuanphan This code doesnt works, it is still showing H1 tag "Philippines Travel" to other pages such as on https://www.philippinestravelguides.com/philippines-travel/bamboo-paraiso-resort-hundred-islands https://www.philippinestravelguides.com/philippines-travel/leyte-visayas-adventure-tours

On 9/29/2023 at 7:52 PM, madzie said:

@tuanphan This code doesnt works, it is still showing H1 tag "Philippines Travel" to other pages such as on https://www.philippinestravelguides.com/philippines-travel/bamboo-paraiso-resort-hundred-islands https://www.philippinestravelguides.com/philippines-travel/leyte-visayas-adventure-tours

HI @tuanphan was wondering if you still can help me out with a solutions?

Thanks

On 9/29/2023 at 9:22 PM, madzie said:

@tuanphan This code doesnt works, it is still showing H1 tag "Philippines Travel" to other pages such as on https://www.philippinestravelguides.com/philippines-travel/bamboo-paraiso-resort-hundred-islands https://www.philippinestravelguides.com/philippines-travel/leyte-visayas-adventure-tours

I see blog detail post fine here?

On 10/3/2023 at 9:01 AM, tuanphan said:

I see blog detail post fine here?

Hi @tuanphan if you check its source code then you will see that same h1 tag is repeated in every pages within the subpages of Philippines travel..

See attached.

There are only 2 ways to insert the title into the list page, one is to use jQuery code as I sent at the beginning, but as you said SEO Tools does not display it, the other is to use the code I sent in the second code (insert HTML tag then hide it in Detail Page).

In my opinion there is no way to get what you want. Maybe you need to hire a better dev to help you with this.